/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; /* (else phones flash a blue box on each tap; presses show in the theme) */
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); }
button, input { font: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 30;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--btn-b);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Scene: the bhajan's holy place, in the player card's picture ---------- */
/* Drawn over the place's still picture (.screen-cover), which shows until it has faded in (or if it can't load) */
.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: strict;
}
.deck:not([data-media="file"]) .scene { display: none; }
.scene-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  will-change: opacity;
}
.scene-layer.is-drawing { opacity: 0.01; transition: none; } /* (drawn before it shows: ui/scenes.js) */
.scene-layer.is-visible { opacity: 1; }
/* Scene animations rest while the page scrolls and in the layer fading out, to keep phones smooth. */
/* (and for good on phones that can't keep them smooth: .calm-scene, ui/scenes.js) */
.calm-scene :is(.scene, .yatra-explore-art) *,
.scene.is-still *,
.scene-layer.is-leaving * { animation-play-state: paused !important; }
.scene-layer svg { display: block; width: 100%; height: 100%; }
.scene-layer picture,
.scene-overlay { position: absolute; inset: 0; }
.scene-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  animation: scene-drift 60s ease-in-out infinite alternate;
}
@keyframes scene-drift {
  from { transform: scale(1.02); }
  to { transform: scale(1.1) translate(-1%, -1%); }
}

/* ---------- Top bar ---------- */
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--topbar-h);
  padding: max(10px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 10px max(var(--gutter), env(safe-area-inset-left));
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}
.brand-mark {
  width: 38px;
  height: 38px;
  flex: none;
  filter: drop-shadow(0 2px 6px rgba(120, 50, 20, 0.22));
}
.brand-text { display: flex; flex-direction: column; min-width: 0; margin: 0; font-size: inherit; font-weight: inherit; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.1;
  color: var(--title);
}
.brand-tag {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
/* The tagline is the Bhajan page's alone, and the website's: the other pages and the installed app show just the name */
:is(body:has([data-page]:target), [data-hold] body) .brand-tag { display: none; }
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  .brand-tag { display: none; }
}

/* The main tabs: one glass bar of five tabs, all as wide as the widest name */
.topnav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  flex: none;
  padding: 3px;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background: rgba(var(--ink-rgb), 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.navlink {
  display: grid;
  place-items: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover) {
  .navlink:hover { background-color: rgba(var(--line-rgb), 0.14); }
}
/* The page you're on (or, on the Pathshala page, its Granth): lit like the play button.
   The page you're on itself can't be tapped again (ui/views.js) */
.navlink[aria-current] {
  background: linear-gradient(145deg, var(--btn-a), var(--btn-b));
  color: var(--on-accent);
  box-shadow: 0 3px 12px rgba(var(--glow-rgb), 0.4);
}
.navlink[aria-current]:focus-visible { box-shadow: var(--focus-ring); }
.navlink[aria-current="page"] { cursor: default; pointer-events: none; }

/* Phones and tablets: the top bar stays on screen while the page scrolls (it goes only while a
   granth is open, with the rest of the site: .is-reading). It is clear at the top of the page
   and tints as the page scrolls under it (browsers without scroll timelines keep the tint). */
@media (max-width: 1024px) {
  html { scroll-padding-top: calc(var(--topbar-h) + 16px); }
  .topbar {
    position: fixed;
    background: rgba(var(--ink-rgb), 0.94);
    box-shadow: 0 1px 0 var(--line);
  }
  @supports (animation-timeline: scroll()) {
    .topbar { animation: topbar-tint linear both; animation-timeline: scroll(root); animation-range: 0 48px; }
  }
}
@keyframes topbar-tint { from { background-color: transparent; box-shadow: none; } }

/* ---------- Pages ---------- */
/* Yatra and About are pages of their own, shown when the address ends in #yatra or #about
   (:target, so the first paint is already right); anything else is the player page.
   The page never reloads, so the bhajan keeps playing (ui/views.js). */
[data-page]:not(:target) { display: none; }
main:has([data-page]:target) :is(#player, #bhajans) { display: none; }
/* (A page tapped away from, to a view over the site, stays until that view opens: ui/views.js) */
:is([data-hold="puja"] #puja, [data-hold="granth"] #granth, [data-hold="pathshala"] #pathshala, [data-hold="tithi"] #tithi,
  [data-hold="yatra"] #yatra, [data-hold="passport"] #passport, [data-hold="about"] #about) { display: block; }
[data-hold] main :is(#player, #bhajans) { display: none; }
/* A page fills the screen, however short */
:is(main:has([data-page]:target), [data-hold] main) .content { min-height: 100vh; min-height: 100svh; padding-top: var(--topbar-h); }
[data-page] { scroll-margin-top: var(--topbar-h); }
/* The footer (with the "Created with Suno AI" credit) is part of the About page; every other page ends with just
   an "About" link in its place (About has no button in the top bar) */
main:not(:has(#about:target)) .footer > :not(.footer-about) { display: none; }
main:not(:has(#about:target)) .footer { padding-top: 6px; padding-bottom: max(12px, env(safe-area-inset-bottom)); } /* (just the About link: a slim bar) */
main:has(#about:target) .footer-about { display: none; }
/* Browsers without :has() (iPhones before iOS 15.4, Chrome before 105): ui/views.js marks the page shown instead,
   and these stand in for the rules above (with no :is() either) */
.no-has[data-paged] #player, .no-has[data-paged] #bhajans, .no-has[data-paged] .brand-tag { display: none; }
.no-has[data-paged] .content { min-height: 100vh; padding-top: var(--topbar-h); }
.no-has:not([data-about]) .footer > :not(.footer-about) { display: none; }
.no-has:not([data-about]) .footer { padding-top: 6px; padding-bottom: 12px; }
.no-has[data-about] .footer-about { display: none; }

/* ---------- Hero & player deck ---------- */
main { position: relative; z-index: 2; }

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: calc(var(--topbar-h) + 22px) var(--gutter) 8px;
  background: radial-gradient(60% 50% at 50% 55%, rgba(var(--glow-rgb), 0.14), transparent 72%); /* a soft lamp-glow behind the player */
}
@media (max-width: 640px) {
  .hero { padding-top: calc(var(--topbar-h) + 6px); }
}

/* The player card: the one part of the app in the bhajan's own colours (its data-theme, from ui/scenes.js) */
.deck {
  width: min(100%, 520px);
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* (nothing in it may widen it: see .screen) */
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(80% 45% at 50% 100%, rgba(var(--glow-rgb), 0.16), transparent 70%),
    linear-gradient(180deg, var(--surface), var(--bg));
  box-shadow: 0 22px 44px -18px rgba(90, 40, 12, 0.55), 0 2px 6px rgba(90, 40, 12, 0.12); /* (on the light page) */
}

/* The holy place the pictures show, above the picture (like a photo's location tag) */
.deck-place {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: -4px 0 -6px 2px;
  color: var(--cream-100);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
}
.deck-place svg { flex: none; width: 15px; height: 15px; color: var(--accent); }
.deck-place span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* The YouTube player must stay visible and at least 200×200 px.
   z-index: never-ending animations (the song picture's slow zoom, the live dot's pulse) are painted
   last. Chrome puts everything painted after one into separate layers, which Android phones leave
   blank while scrolling: that hid the player buttons (but not Like) until you scrolled again. */
.screen {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 200px;
  min-width: 0; /* Safari otherwise turns the 200px height into a 356px (16:9) least width: past the card on phones */
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--screen-bg);
  border: 1px solid rgba(var(--line-rgb), 0.2);
}
.screen, img, canvas { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
/* Controls, not text: a long press opens no iPhone link menu (assets/js/press.js does Android's), and picks out
   no word of a label. Email and phone links keep theirs, to copy the address. */
a[href]:not([href^="mailto:"]):not([href^="tel:"]) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
button, summary { -webkit-user-select: none; user-select: none; }
.screen-mount { position: absolute; inset: 0; }
.screen-mount iframe,
.screen-mount video { display: block; width: 100%; height: 100%; border: 0; }

.screen-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 58%, rgba(var(--accent-rgb), 0.28), transparent 62%),
    var(--screen-bg);
  pointer-events: none;
}
.screen-empty svg {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 4px 18px rgba(var(--glow-rgb), 0.6));
}
.deck[data-media="youtube"] .screen-empty,
.deck[data-media="file"] .screen-empty { display: none; }

/* Song picture, shown when playing audio files */
.screen-cover {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 60%;
}
.deck[data-media="file"] .screen-cover { display: block; }
.deck[data-media="file"][data-status="playing"] .screen-cover {
  animation: slow-zoom 24s ease-in-out infinite alternate;
}
@keyframes slow-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
/* Under the drawn scene once it shows: hidden, and no longer zooming */
.screen:has(.scene-layer.is-visible) .screen-cover { visibility: hidden; animation: none; }

.deck-info { text-align: center; }
.eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.track-title {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 4.6vw, 1.9rem);
  line-height: 1.2;
  color: var(--cream-100);
  overflow-wrap: anywhere;
}
.track-meta {
  margin: 2px 0 0;
  min-height: 1.4em;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Progress */
.progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.time {
  min-width: 3.4ch;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Range inputs (seek + volume) */
.range {
  --fill: 0%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.range:disabled { cursor: default; opacity: 0.5; }
.range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--fill), rgba(var(--fg-rgb), 0.18) var(--fill));
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--title);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.range::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(var(--fg-rgb), 0.18); }
.range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
.range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--title);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.range:focus-visible { box-shadow: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.range:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }

/* Buttons */
.btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.icon { width: 44px; height: 44px; }
.btn.icon svg { width: 22px; height: 22px; }
.btn.small { width: 38px; height: 38px; }
.btn.small svg { width: 20px; height: 20px; }
.btn.icon:not(:disabled):hover { background: rgba(var(--fg-rgb), 0.1); }
.btn:not(:disabled):active { transform: scale(0.94); }

/* Previous · play · next stay centred; repeat sits to their right. */
.controls {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items: center;
  gap: clamp(6px, 3vw, 18px);
}
.controls > .like { justify-self: end; }
.controls > .repeat { justify-self: start; }

.btn.toggle { color: var(--text-faint); }
.btn.toggle[aria-pressed="true"],
.btn.repeat[data-mode="all"],
.btn.repeat[data-mode="one"] { color: var(--accent); }
.btn.toggle[aria-pressed="true"]::after,
.btn.repeat[data-mode="all"]::after,
.btn.repeat[data-mode="one"]::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: currentColor;
}
.repeat-one {
  position: absolute;
  top: 5px;
  right: 4px;
  display: none;
  width: 14px;
  height: 14px;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.btn.repeat[data-mode="one"] .repeat-one { display: grid; }

.btn.play {
  z-index: 1; /* its loading ring spins: painted last, see .screen */
  width: 66px;
  height: 66px;
  background: linear-gradient(145deg, var(--btn-a), var(--btn-b));
  color: var(--on-accent);
  box-shadow: 0 8px 24px rgba(var(--glow-rgb), 0.45);
}
.btn.play svg { width: 30px; height: 30px; }
.btn.play:not(:disabled):hover { box-shadow: 0 10px 30px rgba(var(--glow-rgb), 0.6); }
.btn.play .i-pause { display: none; }
.deck[data-status="playing"] .btn.play .i-play { display: none; }
.deck[data-status="playing"] .btn.play .i-pause { display: block; }
.deck[data-status="loading"] .btn.play svg { opacity: 0.35; }
.deck[data-status="loading"] .btn.play::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--title);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.deck-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--card);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.chip svg { width: 18px; height: 18px; }
.chip:hover { background: var(--card-hover); }
.chip[aria-expanded="true"] { background: var(--highlight); color: var(--on-accent); border-color: var(--highlight); }
.chip:disabled { opacity: 0.45; cursor: default; }
.chip[aria-pressed="true"] { color: var(--highlight); border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.14); }

/* Like: a thumbs-up, outlined, filled when liked; the song list shows how many listeners liked each bhajan */
.thumb { fill: none; }
.like {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.like:hover { background: rgba(var(--fg-rgb), 0.08); }
.like:disabled { opacity: 0.4; cursor: default; }
.like[aria-pressed="true"] { color: var(--accent); }
.like svg { width: 24px; height: 24px; }
.like.is-popping svg { animation: like-pop 0.4s ease; }
@keyframes like-pop { 40% { transform: scale(1.35); } }
[aria-pressed="true"] > .thumb,
.song-stats .thumb { fill: currentColor; }

.volume {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: flex-end;
  min-width: 120px;
}
.volume .range { width: min(130px, 100%); }
.volume .btn { flex: none; } /* (never squeezed narrower than its 44px) */
.volume .i-muted { display: none; }
.volume.is-muted .i-vol { display: none; }
.volume.is-muted .i-muted { display: block; }
/* Phones control volume with their own buttons. */
@media (hover: none) and (pointer: coarse) {
  .volume .range { display: none; }
  .volume { min-width: 44px; } /* (just the mute button: on the narrowest screens it wraps below, never over Share) */
}

.deck-credit {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.78rem;
  text-align: center;
}

/* Visitors today (ui/visits.js) */
.visit-count {
  position: relative;
  z-index: 1; /* painted last: see .screen */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(var(--ink-rgb), 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.visit-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5fd38a;
}


/* ---------- Content sections ---------- */
.content {
  position: relative;
  background: var(--bg);
}

.section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 36px var(--gutter);
}
.section-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--title);
}

.songlist {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Long lists scroll inside their own box, ten bhajans tall. On touch screens it is almost a screen
   tall (about 9 bhajans or 5 tirths on a phone), leaving a strip of page to swipe past it.
   Its edges fade while there is more to see. */
.scroll-box {
  position: relative; /* rows are measured from the box (ui/scrollbox.js) */
  max-height: var(--box-max, 830px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.45) transparent;
}
.songlist.scroll-box,
.yatra-list.scroll-box { margin: -3px; padding: 3px; } /* room for the focus ring */
.yatra-list.scroll-box { --box-max: 720px; }
.scroll-box.is-scrollable {
  --fade-top: 0px;
  --fade-bottom: 40px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent);
}
.scroll-box.is-scrolled { --fade-top: 28px; }
.scroll-box.at-end { --fade-bottom: 0px; }
@media (pointer: coarse) {
  .scroll-box { max-height: min(var(--box-max, 830px), 70vh); } /* (browsers without svh) */
  .scroll-box { max-height: min(var(--box-max, 830px), calc(100svh - 56px)); }
}
/* …below the fixed top bar */
@media (pointer: coarse) and (max-width: 1024px) {
  .scroll-box { max-height: min(var(--box-max, 830px), calc(100svh - 56px - var(--topbar-h))); }
}
.song-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  text-align: left;
  text-decoration: none; /* a link (so search engines find each bhajan's page) that looks like a button */
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.song-btn:hover { background: var(--card-hover); border-color: var(--glass-border); }
.song-num {
  display: grid;
  place-items: center;
  height: 22px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.song-text { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
.song-title { display: block; grid-column: 1 / -1; font-weight: 600; overflow-wrap: anywhere; }
.song-cat { display: block; grid-column: 1; color: var(--text-faint); font-size: 0.82rem; }
/* Plays and likes: small, on the right of the second line */
.song-stats { grid-column: 2; grid-row: 2; display: flex; gap: 10px; align-self: end; color: var(--text-faint); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.song-stats > span { display: inline-flex; align-items: center; gap: 3px; }
.song-stats svg { width: 11px; height: 11px; }
.song-go { width: 22px; height: 22px; color: var(--accent); }
.song { position: relative; }
.song-btn { padding-right: 54px; }
.fav-btn { position: absolute; top: 0; bottom: 0; right: 8px; margin: auto 0; color: var(--text-faint); }
.fav-btn[aria-pressed="true"] { color: var(--accent); }
.song.is-current .song-btn { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }

/* Little equaliser shown on the playing song */
.eq { display: none; gap: 3px; align-items: end; height: 16px; }
.eq span { width: 3px; border-radius: 2px; background: var(--accent); animation: eq 1s ease-in-out infinite; }
.eq span:nth-child(2) { animation-delay: -0.35s; }
.eq span:nth-child(3) { animation-delay: -0.7s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.song.is-current.is-playing .eq { display: flex; }
.song.is-current.is-playing .num-text { display: none; }

.empty-note { color: var(--text-muted); }

/* Search */
.search { position: relative; display: flex; align-items: center; margin: 0 0 12px; }
.search-icon { position: absolute; left: 15px; width: 20px; height: 20px; color: var(--text-faint); pointer-events: none; }
.search-input {
  width: 100%;
  height: 48px;
  padding: 0 48px 0 44px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--card);
  color: var(--text);
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}
.search-input::placeholder { color: var(--text-faint); }
.search-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-clear { position: absolute; right: 5px; }
.search-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.search-count { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
/* "All bhajans" / "Liked" tabs: they take the title's place once something is liked */
.tabs { display: flex; gap: 28px; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.tab {
  display: inline-flex;
  align-items: center;
  margin: 0 0 -1px;
  padding: 0 2px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
  background: none;
  color: var(--text-faint);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--title); border-bottom-color: var(--accent); }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.section-head .section-title { margin: 0; }
.section-note { margin: 2px 0 0; color: var(--text-faint); font-size: 0.85rem; }

.about p { max-width: 65ch; color: rgba(var(--fg-rgb), 0.86); }
.about .jai { font-family: var(--font-display); font-size: 1.3rem; color: var(--title); }
.verse {
  margin: 24px 0;
  padding: 18px 20px;
  border-left: 3px solid var(--highlight);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: rgba(var(--line-rgb), 0.07);
}
.verse blockquote {
  margin: 0 0 10px;
  color: var(--title);
  font-size: 1.15rem;
  line-height: 1.8;
  white-space: pre-line;
}
.verse figcaption { color: var(--text-muted); }
.about .kshama, .about .thanks-note { color: var(--text); }
/* About: the name and one line on what it is, large */
.about .about-title { margin-bottom: 2px; font-size: clamp(2.1rem, 8vw, 2.9rem); }
.about .about-lede { margin: 0 0 10px; font-family: var(--font-display); font-size: 1.3rem; color: var(--highlight); }
.about .about-app { color: var(--text-muted); font-size: 0.95rem; }
/* Feedback form */
.feedback { display: grid; gap: 14px; max-width: 65ch; margin: 0 0 8px; }
.feedback-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.field-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}
textarea.field-input { resize: vertical; min-height: 110px; }
.field-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.btn-send, .pp-share {
  justify-self: start;
  min-height: 46px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  color: var(--on-accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.btn-send:disabled { opacity: 0.6; cursor: default; }
.bot-check { position: fixed; left: 50%; bottom: 16px; z-index: 1000; transform: translateX(-50%); } /* (only if Cloudflare must ask: services/appcheck.js) */
.feedback-fine { margin: 0; font-size: 0.8rem; opacity: 0.75; }
.feedback-status { margin: 0; color: var(--highlight); }
.feedback-status:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.seva-title { margin: 26px 0 10px; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: var(--title); }
.footer .footer-fine { font-size: 0.72rem; }
.photo-credits { margin-top: 6px; font-size: 0.72rem; }
.photo-credits summary { cursor: pointer; }
.photo-credits ul { margin: 6px auto 0; padding: 0; list-style: none; max-width: 60ch; }
.photo-credits li { margin: 2px 0; }

.footer {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 24px var(--gutter) max(40px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 0.85rem;
  text-align: center;
}
.footer p { margin: 4px 0; }
.footer .footer-about { margin: 0; }
.footer-about a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4); color: var(--text-muted); font-size: 1rem; text-decoration: none; }
.footer-about a:hover { color: var(--accent); }
/* A page's Back (About's, Pathshala's): to the page it was opened from */
.page-back { min-height: 44px; margin-bottom: var(--s4); text-decoration: none; }
.footer-links a { margin: 0 8px; }

/* ---------- Lyrics panel ---------- */
.lyrics {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--glass-border);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform 0.35s ease;
}
.lyrics.is-open { transform: none; }
.lyrics-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 14px 20px;
  border-bottom: 1px solid var(--line);
}
.lyrics-title {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--title);
}
.lyrics-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 36px;
  color: var(--text);
  font-size: 1.12rem;
  line-height: 1.9;
  text-align: center;
  white-space: pre-line;
  overscroll-behavior: contain;
}
.lyrics-body .muted { color: var(--text-muted); white-space: normal; }
.lyrics-body.is-synced { position: relative; padding-bottom: 35vh; }
.lyric {
  margin: 0;
  padding: 3px 0;
  color: var(--text-faint);
  transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}
.lyric:empty { min-height: 1em; padding: 0; }
.lyric.is-timed { cursor: pointer; }
.lyric.is-timed:hover { color: var(--text-muted); }
.lyric.is-active {
  color: var(--highlight);
  transform: scale(1.06);
}

@media (max-width: 640px) {
  .lyrics {
    top: auto;
    left: 0;
    height: 72vh;
    height: 72svh;
    width: 100%;
    border-left: 0;
    border-top: 1px solid var(--glass-border);
    border-radius: 22px 22px 0 0;
    transform: translateY(100%);
  }
  .lyrics-body { padding-bottom: max(36px, env(safe-area-inset-bottom)); }
}

/* ---------- Yatra planner ---------- */
.yatra-intro { max-width: 65ch; margin: 0 0 18px; color: var(--text-muted); }
.yatra-form {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 12px;
  margin: 0 0 14px;
}
.field { display: grid; gap: 6px; min-width: 0; }
.field-label { color: var(--text-faint); font-size: 0.85rem; font-weight: 600; }
.field-select {
  width: 100%;
  height: 48px;
  padding: 0 40px 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e1a12' stroke-opacity='.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.field-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.field-select:disabled { opacity: 0.5; cursor: default; }
.field-select option, .field-select optgroup { background: var(--surface); color: var(--text); }
/* Where the browser allows it (Chromium), the open list is styled to match the theme too;
   elsewhere it stays the system's own list. */
@supports (appearance: base-select) {
  .field-select, .field-select::picker(select) { appearance: base-select; }
  .field-select { display: flex; align-items: center; }
  .field-select::picker-icon { display: none; }
  .field-select > button { all: unset; flex: 1; min-width: 0; }
  .field-select selectedcontent { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .field-select::picker(select) {
    margin-top: 6px;
    padding: 6px;
    max-height: min(360px, 60vh);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
  }
  .field-select optgroup { padding: 4px 0; background: none; color: var(--text-faint); font-size: 0.8rem; font-weight: 700; }
  .field-select option { padding: 10px 12px; border-radius: var(--radius-sm); background: none; color: var(--text); font-size: 1rem; font-weight: 400; }
  .field-select option::checkmark { display: none; }
  .field-select option:hover, .field-select option:focus-visible { outline: none; background: rgba(var(--accent-rgb), 0.18); }
  .field-select option:checked { color: var(--accent); font-weight: 600; }
}
/* What was found, with Clear beside it, right under the state, place and distance */
.yatra-status { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 12px; }
.yatra-status #yatraClear { margin-left: auto; min-height: 40px; }
.yatra-count { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.yatra-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tirth {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--card);
  transition: border-color 0.15s, background-color 0.15s;
}
/* The whole card opens the tirth's page: its name is the link, stretched over the card (the directions button stays on top) */
.tirth-link { color: inherit; text-decoration: none; }
.tirth-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tirth-link:focus-visible { box-shadow: none; }
.tirth:has(.tirth-link:focus-visible) { box-shadow: var(--focus-ring); }
.tirth:has(.tirth-link:hover) { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.07); }
.tirth:has(.tirth-link:hover) .tirth-link { color: var(--accent); }
/* Back from a tirth's page: its card glows for a moment, so the eye finds it */
@keyframes tirth-back { from { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.16); } }
.tirth.is-back { animation: tirth-back 2.4s ease-out; }
.tirth-main { min-width: 0; }
.tirth-name { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.tirth-hi { color: var(--text-muted); font-weight: 500; }
.tirth-meta { margin: 2px 0 0; color: var(--accent); font-size: 0.85rem; font-weight: 600; }
.tirth-place { display: flex; align-items: flex-start; gap: 5px; margin: 4px 0 0; color: var(--text-muted); font-size: 0.9rem; }
.tirth-place svg { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--text-faint); }
.tirth-note { margin: 4px 0 0; color: var(--text-faint); font-size: 0.88rem; }
/* In the visitor's Yatra Passport (ui/yatra.js) */
.tirth-seen { display: flex; align-items: center; gap: 4px; margin: 4px 0 0; color: var(--accent); font-size: 0.85rem; font-weight: 700; }
.tirth-seen svg { width: 15px; height: 15px; }
.tirth-dist { display: grid; align-content: start; justify-items: end; margin: 0; text-align: right; white-space: nowrap; }
.tirth-dist strong { color: var(--title); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.tirth-dist span { color: var(--text-faint); font-size: 0.82rem; }
.tirth-actions { position: relative; z-index: 1; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tirth-actions .chip { padding: 6px 12px; font-size: 0.88rem; text-decoration: none; }
.tirth-actions .chip svg { width: 16px; height: 16px; }
/* The way to the list of all tirths (/tirth/): a board at the top of the planner, its picture behind the words */
.yatra-explore {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  min-height: 190px;
  margin: 0 0 22px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px -14px rgba(90, 45, 15, 0.45); /* (on the light page) */
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.yatra-explore-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; background: var(--surface); transform-origin: 70% 100%; transition: transform 0.6s ease; }
/* One drawing of tirths across the land (a smooth pale-stone Digambar murti seated in padmasan, gold shrivatsa,
   halo and triple chhatra, lanchhan on the seat, diyas beside it; a manastambh, shikhar temples, Sammed Shikhar's tonks
   on the far hills), painted in the colours of its data-theme (index.html). <use> pieces are styled by class alone. */
.yx-sky-a { stop-color: rgb(var(--bg-rgb)); }
.yx-sky-b { stop-color: var(--surface); }
.yx-sky-c { stop-color: rgba(var(--glow-rgb), 0.45); }
.yx-sun-a { stop-color: rgba(var(--glow-rgb), 0.95); }
.yx-sun-m { stop-color: rgba(var(--glow-rgb), 0.35); }
.yx-sun-b { stop-color: rgba(var(--glow-rgb), 0); }
.yx-gold-a { stop-color: var(--title); }
.yx-gold-b { stop-color: var(--accent-strong); }
.yx-stone-a { stop-color: var(--text); stop-opacity: 0.95; }
.yx-stone-b { stop-color: var(--text); stop-opacity: 0.72; }
.yx-body { fill: url(#yxStone); }
.yx-glow { fill: rgba(var(--glow-rgb), 0.35); filter: blur(6px); }
.yx-ring { fill: none; stroke: var(--highlight); stroke-width: 1.4; opacity: 0.85; }
.yx-line { fill: none; stroke: rgba(var(--shade-rgb), 0.22); stroke-width: 1.1; stroke-linecap: round; }
.yx-mark { fill: url(#yxGold); filter: drop-shadow(0 0 3px rgba(var(--glow-rgb), 0.9)); }
.yx-plinth { fill: var(--text); opacity: 0.8; }
.yx-plinth2 { fill: var(--text); opacity: 0.55; }
.yx-plaque { fill: rgb(var(--shade-rgb)); opacity: 0.85; }
.yx-step { fill: rgb(var(--shade-rgb)); stroke: rgba(var(--accent-rgb), 0.35); stroke-width: 1.2; }
.yx-star { fill: rgba(var(--line-rgb), 0.7); }
.yx-cloud { fill: rgba(var(--line-rgb), 0.1); }
.yx-bird { fill: none; stroke: rgba(var(--shade-rgb), 0.7); stroke-width: 1.4; stroke-linecap: round; }
.yx-far { fill: rgba(var(--line-rgb), 0.14); }
.yx-mid { fill: rgba(var(--shade-rgb), 0.6); }
.yx-land { fill: rgb(var(--shade-rgb)); stroke: rgba(var(--accent-rgb), 0.55); stroke-width: 1.2; }
.yx-edge { fill: none; stroke: rgba(var(--accent-rgb), 0.25); stroke-width: 1; }
.yx-door { fill: rgba(var(--accent-rgb), 0.85); stroke: none; }
.yx-kalash { fill: var(--highlight); stroke: none; }
.yx-pole { fill: none; stroke: rgba(var(--accent-rgb), 0.8); stroke-width: 1.5; }
.yx-flag { fill: var(--accent); stroke: none; }
.yx-flame { fill: var(--btn-a); filter: drop-shadow(0 0 4px rgba(var(--glow-rgb), 0.9)); transform-box: fill-box; transform-origin: 50% 100%; animation: yx-flicker 1.4s ease-in-out infinite alternate; }
.yx-ground { fill: rgb(var(--shade-rgb)); }
.yx-cloud { animation: yx-drift 30s ease-in-out infinite alternate; }
@keyframes yx-flicker { from { transform: scale(0.9, 0.85); opacity: 0.85; } to { transform: scale(1.05, 1.1); opacity: 1; } }
@keyframes yx-drift { to { transform: translateX(40px); } }
@media (prefers-reduced-motion: reduce) { .yx-flame, .yx-cloud { animation: none; } }
.yatra-explore::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(var(--shade-rgb), 0.9) 0%, rgba(var(--shade-rgb), 0.65) 38%, rgba(var(--shade-rgb), 0) 62%);
}
.yatra-explore:hover { border-color: var(--accent); }
.yatra-explore:hover .yatra-explore-art { transform: scale(1.04); }
.yatra-explore-text { display: grid; gap: 4px; min-width: 0; }
.yatra-explore-top { color: var(--accent); font-size: 0.85rem; font-weight: 700; }
.yatra-explore strong { color: var(--title); font-family: var(--font-display); font-size: clamp(1.45rem, 5vw, 1.95rem); font-weight: 400; line-height: 1.25; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); }
.yatra-explore-sub { max-width: 46ch; color: var(--text); font-size: 0.95rem; line-height: 1.5; opacity: 0.9; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.yatra-explore-go {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  padding: 9px 12px 9px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
}
.yatra-explore-go svg { width: 18px; height: 18px; }
/* Narrow screens: the picture as a band on top and the words below it, so they never cover Bhagwan */
@media (max-width: 760px) {
  .yatra-explore { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 0; background: var(--surface); }
  .yatra-explore-art { position: relative; inset: auto; z-index: auto; display: block; flex: none; height: 170px; }
  .yatra-explore::before { top: 120px; bottom: auto; height: 52px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, var(--surface)); }
  .yatra-explore-text { padding: 12px 18px 0; }
  .yatra-explore strong, .yatra-explore-sub { text-shadow: none; }
  .yatra-explore-go { align-self: flex-start; margin: 14px 18px 18px; }
}
@media (max-width: 640px) {
  .yatra-form { grid-template-columns: 1fr; }

  /* Compact rows on phones, so more fit in the list boxes */
  .songlist { gap: 6px; }
  .song-btn { grid-template-columns: 28px 1fr auto; gap: 10px; padding: 9px 50px 9px 12px; }
  .song-title { line-height: 1.4; }
  .song-cat, .song-stats { line-height: 1.35; }

  /* A tirth in four short lines: name · km / tradition / place and note · buttons */
  .yatra-list { gap: 8px; }
  .tirth {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name km" "meta meta" "place actions" "note actions";
    gap: 0 10px;
    padding: 10px 12px;
  }
  .tirth-main, .tirth-dist { display: contents; }
  .tirth-name { grid-area: name; font-size: 1rem; line-height: 1.35; }
  .tirth-hi { font-size: 0.85rem; }
  .tirth-meta { grid-area: meta; margin: 1px 0 0; font-size: 0.8rem; line-height: 1.35; }
  .tirth-place { grid-area: place; align-self: center; margin: 2px 0 0; font-size: 0.85rem; line-height: 1.35; }
  .tirth-note { grid-area: note; margin: 2px 0 0; font-size: 0.82rem; line-height: 1.35; }
  .tirth-dist strong { grid-area: km; justify-self: end; font-size: 1.05rem; line-height: 1.35; }
  .tirth-dist span { grid-area: km; justify-self: end; align-self: center; font-size: 0.78rem; line-height: 1.35; }
  /* Icon-only buttons here (they keep their full names for screen readers) */
  .tirth-actions { grid-area: actions; align-self: center; justify-self: end; gap: 6px; margin: 4px 0 0; }
  .tirth-actions .chip { gap: 0; padding: 6px; font-size: 0; }
  .tirth-actions .chip svg { width: 18px; height: 18px; }
}

/* ---------- Tithi: today's tithi on the player page, and the calendar (#tithi) ---------- */
.hero-pills { display: flex; flex-direction: column; align-items: center; gap: 8px; } /* one pill a row: widths never re-wrap them */
/* Both pills keep their place while they load, so the player doesn't jump when they appear */
.hero-pills > * { min-height: 32px; }
.hero-pills .visit-count[hidden], .tithi-pill.is-loading { display: inline-flex !important; visibility: hidden; }
.tithi-pill.is-loading::before { content: "…"; }
.tithi-pill {
  position: relative;
  z-index: 1; /* painted last, like .visit-count (Android leaves layers after an endless animation blank) */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(var(--ink-rgb), 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.tithi-pill:hover { background: var(--card-hover); }
.tithi-pill svg { width: 20px; height: 20px; flex: none; }

/* Festival days (ui/festival.js): a banner under the player, from 2 days before */
.parva {
  position: relative;
  z-index: 1; /* painted last, like .visit-count */
  width: min(100%, 520px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 14px;
  padding: 14px 44px 14px 16px;
  border: 1px solid rgba(var(--line-rgb), 0.45);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(var(--glow-rgb), 0.2), rgba(var(--ink-rgb), 0.88) 60%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text);
}
.parva.is-today { border-color: var(--highlight); box-shadow: 0 0 30px rgba(var(--glow-rgb), 0.3); }
.parva-diya { width: 40px; height: 40px; }
.parva-text { min-width: 0; }
.parva-text p { margin: 0; }
.parva-when { color: var(--highlight); font-size: 0.82rem; font-weight: 700; }
.parva-name { margin: 0; color: var(--title); font-family: var(--font-book); font-size: 1.35rem; font-weight: 400; line-height: 1.3; }
.parva-sub { margin-top: 2px !important; color: var(--text-muted); font-size: 0.86rem; line-height: 1.45; }
.parva-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.parva-actions .chip { padding: 6px 12px; font-size: 0.86rem; text-decoration: none; }
.parva-close { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; color: var(--text-muted); }

/* "Install app" (ui/install.js): in the room below the deck, so the deck doesn't move when
   the browser offers it a moment after loading */
.hero { position: relative; }
.install-pill {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 1; /* painted last, like .visit-count */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--ink-rgb), 0.88);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-50%);
}
.install-pill svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
@media (max-width: 640px) { .install-pill { bottom: max(8px, calc(7svh - 17px)); } }
@media (min-width: 641px) and (hover: none) and (pointer: coarse) { .hero { padding-bottom: 60px; } }
.tithi-tag {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.22);
  color: var(--accent);
  font-size: 0.8rem;
  white-space: nowrap;
}

.tithi-layout { display: grid; gap: 20px; align-items: start; margin: 8px 0 30px; }
@media (min-width: 760px) {
  .tithi-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .tithi-card { position: sticky; top: calc(var(--topbar-h) + 12px); }
}
.tithi-month, .tithi-card {
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: rgba(var(--line-rgb), 0.06);
}
.tithi-month-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.tithi-month-head .btn:disabled { opacity: 0.3; }
.tithi-month-name { min-width: 0; text-align: center; }
.tithi-month-name h3 { margin: 0; color: var(--title); font-family: var(--font-book); font-size: 1.45rem; font-weight: 400; line-height: 1.3; }
.tithi-month-name p { margin: 0; color: var(--text-muted); font-size: 0.88rem; }
.tithi-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tithi-grid > .granth-empty { grid-column: 1 / -1; }
.tithi-wd { padding: 0 0 4px; color: var(--text-faint); font-size: 0.8rem; text-align: center; }
.tday {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  min-height: 56px;
  padding: 6px 1px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.tday:hover { background: var(--card-hover); }
.tday.is-blank { color: var(--text-faint); cursor: default; }
.tday-num { font-size: 1.05rem; font-weight: 700; line-height: 1.1; }
.tday-tithi { max-width: 100%; overflow: hidden; color: var(--text-muted); font-size: clamp(0.62rem, 2.7vw, 0.74rem); line-height: 1.2; white-space: nowrap; }
.tday.is-parva { background: rgba(var(--accent-rgb), 0.12); }
.tday.is-parva .tday-tithi { color: var(--highlight); font-weight: 600; }
.tday.has-ev::after { content: "✦"; position: absolute; top: 2px; right: 4px; color: var(--highlight); font-size: 0.62rem; }
.tday.is-today { border-color: var(--highlight); }
.tday[aria-pressed="true"] { background: var(--btn-b); color: var(--on-accent); }
.tday[aria-pressed="true"] .tday-tithi, .tday[aria-pressed="true"]::after { color: inherit; }
.tithi-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; color: var(--text-muted); font-size: 0.82rem; }
.legend-parva::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 3px;
  background: rgba(var(--accent-rgb), 0.4);
  vertical-align: -1px;
}
.legend-event::before { content: "✦"; margin-right: 6px; color: var(--highlight); }

.tithi-card { padding: 18px; }
.tithi-card p { margin: 0; }
.tc-when { color: var(--text-muted); }
.tc-today {
  margin-right: 8px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--btn-b);
  color: var(--on-accent);
  font-size: 0.8rem;
  font-weight: 700;
}
.tc-tithi { margin: 6px 0 2px !important; color: var(--title); font-family: var(--font-book); font-size: 1.6rem; line-height: 1.35; }
.tc-samvat { color: var(--text-faint); font-size: 0.86rem; }
.tc-note { margin: 4px 0 0 !important; color: var(--text); font-size: 0.92rem; }
.tc-parva {
  display: inline-block;
  margin: 10px 8px 0 0 !important; /* right: room before the share chip */
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 600;
}
.tc-share { margin-top: 16px; }
/* The 24 on the Tithi page (ui/tithi.js), each opening his page: the Parichay (ui/tirthankar.js) */
.tithi-tks { margin: 0 0 var(--s6); scroll-margin-top: var(--topbar-h); }
.tithi-tk-note { max-width: 65ch; margin: 0 0 var(--s4); color: var(--text-muted); line-height: 1.5; }
.tc-events, .tithi-events ul { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.tithi-events ul { margin: 0; }
:is(.tc-events, .tithi-events ul) li { position: relative; padding-left: 20px; line-height: 1.5; }
/* A kalyanak's link to that Bhagwan's Parichay (ui/tirthankar.js), and a quiz answer's */
.tc-parichay, .ps-parichay { display: inline-block; padding: 8px 0; color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tc-parichay:hover, .ps-parichay:hover { text-decoration: underline; }
:is(.tc-events, .tithi-events ul) .ev-k::before { content: "✦"; position: absolute; left: 0; color: var(--highlight); }
:is(.tc-events, .tithi-events ul) .ev-p::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.tithi-events { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.tithi-events > li {
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: rgba(var(--line-rgb), 0.05);
}
.tithi-events > .ev-none { color: var(--text-muted); }
.ev-when { margin: 0 0 6px; color: var(--text-muted); font-size: 0.9rem; }
.ev-when b { margin-right: 8px; color: var(--title); }

/* ---------- Granth: the library (#granth) ---------- */
.granth-head { text-align: center; }
.granth-head .section-title { margin-bottom: 8px; font-family: var(--font-book); font-size: clamp(1.8rem, 5vw, 2.3rem); }
.granth-om { margin: 0 0 4px; color: var(--highlight); font-family: var(--font-book); font-size: 1.05rem; letter-spacing: 0.06em; }
.granth-intro { max-width: 52ch; margin: 0 auto 26px; color: var(--text-muted); font-size: 1.05rem; }
.granth-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 22px; }
.granth-cats .chip { min-height: 44px; padding: 7px 16px; font-size: 1rem; }
.chip-count { font-size: 0.78rem; opacity: 0.7; }
/* Phones: the heading closes up so the books start on the first screen (the same on every page with this heading),
   and the categories stand in an even grid of three, every one in sight */
@media (max-width: 560px) {
  [data-page]:has(> .granth-head) { padding-top: 20px; }
  .granth-om { font-size: 0.92rem; }
  .granth-head .section-title { margin-bottom: 4px; font-size: 1.7rem; }
  .granth-intro { margin-bottom: 18px; font-size: 0.95rem; line-height: 1.55; text-wrap: balance; }
  .granth-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; }
  .granth-cats .chip { flex-wrap: wrap; justify-content: center; column-gap: 4px; row-gap: 0; min-height: 42px; padding: 4px 6px; font-size: 0.95rem; line-height: 1.25; text-align: center; }
}
.granth-cat-note { margin: 0 0 26px; color: var(--text-muted); text-align: center; }
.granth-empty { display: grid; justify-items: center; gap: 10px; margin: 0; padding: 28px 0; color: var(--text-muted); text-align: center; }
.granth-empty svg { width: 44px; height: 44px; }
.granth-fine { margin: 8px 0 0; color: var(--text-faint); font-size: 0.85rem; text-align: center; }

/* The parts as chips over the shelves, the one shown lit (ui/granth.js); they stay in sight (under the top bar on
   phones) as the page scrolls */
.granth-jump {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  gap: var(--s2);
  margin: 0 0 var(--s6);
  padding: var(--s2) 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(var(--bg-rgb), 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(var(--line-rgb), 0.25);
}
.granth-jump::-webkit-scrollbar { display: none; }
.granth-jump .chip { flex: none; min-height: 40px; padding: 0 var(--s4); font-size: 0.98rem; }
.granth-jump .chip:first-child { margin-left: auto; } /* (centred, and still all reachable if they ever overflow) */
.granth-jump .chip:last-child { margin-right: auto; }
@media (max-width: 1024px) { .granth-jump { top: var(--topbar-h); } }
@media (max-width: 400px) { .granth-jump .chip { padding: 0 var(--s3); font-size: 0.92rem; } }
/* The part of the library lit: its name between two gold rules, then its shelves */
.granth-part-title {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin: 0 0 var(--s4);
  color: var(--title);
  font-family: var(--font-book);
  font-size: clamp(1.5rem, 4.5vw, 1.85rem);
  font-weight: 400;
  line-height: 1.3;
}
.granth-part-title::before, .granth-part-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.55)); }
.granth-part-title::after { background: linear-gradient(270deg, transparent, rgba(var(--accent-rgb), 0.55)); }
/* The way into the Pathshala, under the shelves */
.granth-ps { max-width: 560px; margin: var(--s8) auto 0; }

/* A series is a shelf: its books stand on a wooden plank, their names below it. All its books show:
   as many to a row as fit (3 on a phone), the plank running under each row. */
.shelf { margin: 0 0 34px; }
.shelf.is-own > :is(.shelf-note, .shelf-credit) { text-align: center; } /* (a box set's own page, under its name) */
.shelf-title { margin: 0; font-family: var(--font-book); font-weight: 400; font-size: 1.5rem; line-height: 1.3; color: var(--title); }
.shelf-note { margin: 2px 0 0; color: var(--text-muted); }
.shelf-credit { margin: 2px 0 0; color: var(--text-faint); font-size: 0.85rem; }
.shelf-row {
  --card-w: clamp(100px, 27vw, 148px);
  --plank-top: calc(8px + var(--card-w) * 4 / 3);
  --plank:
    linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent) 0 calc(var(--plank-top) + 14px) / 100% 10px no-repeat,
    linear-gradient(180deg, #8a5230, #5c2f17 45%, #3a1b0c) 0 var(--plank-top) / 100% 14px no-repeat;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-w) + 6px), 1fr));
  gap: 28px 0;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.shelf-row > li { display: flex; justify-content: center; padding-top: 8px; background: var(--plank); }
/* Separate books: 2 to a row, 3 on wider screens */
.shelf-grid { --card-w: clamp(120px, 38vw, 150px); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .shelf-grid { grid-template-columns: repeat(3, 1fr); } }
.book-card {
  display: grid;
  gap: 4px;
  width: var(--card-w);
  color: var(--text);
  text-align: center;
  text-decoration: none;
}
.book-card .cover { margin-bottom: 16px; transition: transform 0.2s ease; }
.book-card:hover .cover { transform: translateY(-5px); }
.book-card:focus-visible { box-shadow: none; }
.book-card:focus-visible .cover { box-shadow: var(--focus-ring); }
.book-card-part { font-weight: 700; line-height: 1.3; }
.book-card-credit { color: var(--text-faint); font-size: 0.8rem; line-height: 1.35; }
/* A box set: a button like a book's card, its cover with two more books' edges behind it */
.book-card.is-set { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.book-card.is-set .cover {
  --stack: 5px -5px 0 -1px var(--c1), 5px -5px 0 0 rgba(233, 193, 96, 0.6), 10px -10px 0 -2px var(--c1), 10px -10px 0 -1px rgba(233, 193, 96, 0.45);
  box-shadow: var(--stack), 0 10px 20px rgba(0, 0, 0, 0.45);
}
.book-card.is-set:focus-visible .cover { box-shadow: var(--focus-ring), var(--stack); }
/* A book the Pathshala has a daily paper on */
.book-card-quiz {
  justify-self: center;
  padding: 0 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--highlight);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
}

/* A cloth-bound cover with a gold frame (the same on the shelf and as the book's first page).
   Sizes are shares of the cover's width (cqw), so it looks the same small or large. */
.cover {
  --gold: #e9c160;
  container-type: inline-size;
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 2px 6px 6px 2px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 70% 18%, var(--c2), var(--c1) 72%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
  color: #fff4d6;
  font-family: var(--font-book);
  text-align: center;
}
.cover::before { /* the spine */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(255, 255, 255, 0.14) 70%, rgba(0, 0, 0, 0.25));
}
.cover-frame {
  position: absolute;
  inset: 6cqw 6cqw 6cqw 12cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4cqw 2cqw 3cqw;
  border: 0.8cqw solid rgba(233, 193, 96, 0.85);
  border-radius: 2cqw;
  outline: 0.4cqw solid rgba(233, 193, 96, 0.45);
  outline-offset: 1.3cqw;
}
.cover-top { color: var(--gold); font-size: 5.5cqw; line-height: 1; }
.cover-title { font-size: 11cqw; line-height: 1.2; text-shadow: 0 0.6cqw 1.2cqw rgba(0, 0, 0, 0.5); }
.cover-art {
  display: grid;
  place-items: center;
  width: 48cqw;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0.9cqw solid var(--gold);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 160, 0.3), rgba(0, 0, 0, 0.25));
  box-shadow: 0 0 5cqw rgba(255, 200, 90, 0.35);
}
.cover-art img, .cover-art canvas { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.cover-art svg { width: 80%; height: 80%; }
.cover-part {
  padding: 0.6cqw 5cqw;
  border: 0.6cqw solid var(--gold);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  font-family: "Mukta", var(--font-book); /* the book font has no bold */
  font-size: 7.5cqw;
  font-weight: 700;
  line-height: 1.35;
}
.cover-part:empty { display: none; } /* a book that isn't part of a series */
.cover-pub { font-size: 3.8cqw; line-height: 1.3; opacity: 0.85; }
.book-card .cover-pub { display: none; }

/* ---------- Granth: the book reader (#granth/<book>) ---------- */
/* It covers the site; the page behind is put away so it doesn't scroll or animate underneath */
html.is-reading, html.is-reading body { overflow: hidden; }
.is-reading :is(main, .topbar, .skip-link) { display: none; }
.reader {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 42%, #f1e4cb, #dcc59c 80%); /* a sandalwood desk */
  color: var(--text);
}
.reader:focus { outline: none; }
.reader-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
}
.reader-name { flex: 1; min-width: 0; text-align: center; line-height: 1.25; }
.reader-title {
  margin: 0;
  overflow: hidden;
  color: var(--title);
  font-family: var(--font-book);
  font-size: 1.2rem;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.reader-part { margin: 0; color: var(--text-muted); font-size: 0.88rem; }
.reader-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.reader-btn:hover { background: rgba(255, 255, 255, 0.9); }
.reader-btn:disabled { opacity: 0.35; cursor: default; }
.reader-btn svg { width: 22px; height: 22px; flex: none; }
.reader-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

.reader-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  container-type: size;
  touch-action: none; /* the reader handles swipes, pinches and drags itself (granth.js) */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.reader.is-zoomed .reader-stage { cursor: grab; }
.reader-hint {
  position: absolute;
  left: 50%;
  bottom: 52px; /* above the zoom buttons */
  z-index: 3;
  width: max-content;
  max-width: min(90%, 380px);
  margin: 0;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: rgba(46, 26, 18, 0.92);
  box-shadow: var(--shadow-lg);
  color: var(--cream-100);
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}
/* Zoom: a small − + pill in the lower right corner of the stage, over the page's margin */
.reader-zoom {
  position: absolute;
  right: max(10px, env(safe-area-inset-right));
  bottom: 8px;
  z-index: 4;
  display: flex;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 12px rgba(90, 45, 15, 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.reader-zoom-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: none;
  color: inherit;
  cursor: pointer;
}
.reader-zoom-btn + .reader-zoom-btn { border-left: 1px solid var(--line); border-radius: 0 999px 999px 0; }
.reader-zoom-btn:hover:not(:disabled) { background: rgba(var(--fg-rgb), 0.06); }
.reader-zoom-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.reader-zoom-btn:disabled { opacity: 0.35; cursor: default; }
.reader-zoom-btn svg { width: 18px; height: 18px; }

/* Page size: as big as fits (--pw wide); the pictures keep the book's shape (--ratio) */
.book {
  --pw: min(calc(100cqw - 24px), calc((100cqh - 20px) * var(--ratio)));
  --ph: calc(var(--pw) / var(--ratio));
}
.book.zoom-ease { transition: transform 0.2s ease; } /* a press of + or − glides; fingers don't */
.book[data-mode="spread"] { --pw: min(calc((100cqw - 48px) / 2), calc((100cqh - 24px) * var(--ratio))); }
.sheet {
  position: relative;
  display: grid;
  grid-template-columns: var(--pw);
  perspective: calc(var(--pw) * 4);
  transition: transform 0.7s cubic-bezier(.4, .1, .3, 1); /* as TURN_MS in granth.js */
}
.book[data-mode="spread"] .sheet { grid-template-columns: var(--pw) var(--pw); }
.book.is-closed .sheet { transform: translateX(calc(var(--pw) / -2)); } /* a closed book sits in the middle */
.slot { position: relative; width: var(--pw); height: var(--ph); }
/* The edges of the other pages show beside the open page */
.slot:is(.single, .right):not(.is-empty) {
  border-radius: 0 3px 3px 0;
  box-shadow: 1px 0 0 #efe6d2, 2px 0 0 #c9ba9a, 3px 1px 0 #ede3cd, 4px 1px 0 #c3b28e, 5px 2px 0 #e9dfc7, 6px 2px 0 #b9a680, 0 16px 36px rgba(70, 35, 12, 0.32);
}
.slot.left:not(.is-empty) {
  border-radius: 3px 0 0 3px;
  box-shadow: -1px 0 0 #efe6d2, -2px 0 0 #c9ba9a, -3px 1px 0 #ede3cd, -4px 1px 0 #c3b28e, -5px 2px 0 #e9dfc7, -6px 2px 0 #b9a680, 0 16px 36px rgba(70, 35, 12, 0.32);
}
.page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: inline-size;
  background: #fbf5e6;
}
.page-img canvas { display: block; width: 100%; height: 100%; object-fit: contain; } /* never cut a page */
/* Book pictures can't be pressed, dragged or long-pressed to save (main.js also blocks the menu) */
.page img, .page canvas, .cover-art canvas { pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
/* Printing shows no book */
@media print {
  #granth, .reader { display: none !important; }
}
.page-cover .cover { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0 3px 3px 0; box-shadow: none; }
.page-blank { background: linear-gradient(135deg, #f7efdc, #efe3c6); }
/* The fold near the spine */
.slot:is(.single, .right) .page::after, .face:is(.single, .right) .page::after,
.slot.left .page::after, .face.left .page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(60, 30, 10, 0.26), rgba(60, 30, 10, 0.07) 3.5%, transparent 9%);
}
.slot.left .page::after, .face.left .page::after {
  background: linear-gradient(270deg, rgba(60, 30, 10, 0.26), rgba(60, 30, 10, 0.07) 3.5%, transparent 9%);
}
.page-cover::after { display: none; }

/* The page being turned: it swings over on the spine, its back showing the next page */
.leaf {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: var(--pw);
  height: var(--ph);
  transform-origin: left center;
  transform-style: preserve-3d;
}
.leaf.right { left: var(--pw); }
.leaf.left { transform-origin: right center; }
.face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.face.back { transform: rotateY(180deg); }
.shade {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(90deg, rgba(40, 18, 6, 0.9), rgba(40, 18, 6, 0.3));
  pointer-events: none;
}
.face.left .shade { background: linear-gradient(270deg, rgba(40, 18, 6, 0.9), rgba(40, 18, 6, 0.3)); }

/* Our own pages: the mangalacharan before the book and the closing page after it */
.page-note {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.4cqw;
  padding: 10cqw 9cqw;
  background: radial-gradient(ellipse at 50% 40%, #fffaf0, #f2e3c2);
  color: #5b2b12;
  font-family: var(--font-book);
  text-align: center;
}
.page-note::before {
  content: "";
  position: absolute;
  inset: 4.5cqw;
  border: 0.5cqw solid rgba(180, 120, 30, 0.45);
  border-radius: 1.5cqw;
  outline: 0.25cqw solid rgba(180, 120, 30, 0.3);
  outline-offset: 1.2cqw;
  pointer-events: none;
}
.page-note p { margin: 0; }
.note-top { color: #9a3412; font-size: 5.2cqw; }
.note-mark { width: 13cqw; height: 13cqw; }
.note-verse { color: #7c2d12; font-size: 4.4cqw; line-height: 1.75; text-wrap: balance; }
.note-text { max-width: 30em; color: #5c3a1e; font-size: 4.6cqw; line-height: 1.6; }
.note-jai { color: #b45309; font-size: 5.8cqw; }
.note-credit { color: #7b6044; font-size: 3.6cqw; line-height: 1.6; }
.note-btn {
  position: relative;
  padding: 2cqw 5cqw;
  border: 0.4cqw solid #b45309;
  border-radius: 999px;
  background: #b45309;
  color: #fff8e8;
  font: inherit;
  font-size: 4.2cqw;
  text-decoration: none;
  cursor: pointer;
}
.note-btn.quiet { background: transparent; color: #9a3412; }

.reader-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 6px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.has-mini .reader-nav { padding-bottom: calc(max(10px, env(safe-area-inset-bottom)) + 54px); }
.reader-turn { width: 54px; height: 54px; padding: 0; }
.reader-turn svg { width: 26px; height: 26px; }
.reader-seek { display: grid; flex: 1; justify-items: center; gap: 2px; max-width: 560px; }
.reader-slider { width: 100%; height: 26px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.reader-count { min-width: 9.5em; color: var(--text); font-size: 1.05rem; text-align: center; white-space: nowrap; }
@media (max-width: 480px) {
  .reader-back span { display: none; }
}
/* A phone held sideways: the top bar lies over the page (so the page gets the full height) and
   slides away while reading; granth.js brings it back on a touch */
@media (orientation: landscape) and (max-height: 540px) {
  .reader-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: linear-gradient(rgba(var(--bg-rgb), 0.96), rgba(var(--bg-rgb), 0.86));
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .reader.bar-hidden .reader-bar { transform: translateY(-100%); opacity: 0; pointer-events: none; }
}

/* ---------- Mini player (on the Granth, Yatra and About pages) ---------- */
.mini {
  position: fixed;
  z-index: 5;
  left: 10px;
  right: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  max-width: 400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(var(--ink-rgb), 0.94);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: mini-in 0.25s ease-out;
}
@keyframes mini-in { from { opacity: 0; transform: translateY(12px); } }
/* How far the bhajan has got */
.mini::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--progress, 0%);
  height: 2px;
  background: var(--accent);
}
/* A slim pill: on a laptop it keeps to the bottom-right corner, out of the page's way */
@media (min-width: 760px) {
  .mini { left: auto; right: 16px; bottom: 16px; width: 330px; margin: 0; }
}
.mini-info { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--text); text-decoration: none; }
.mini-cover { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--screen-bg); }
.mini-title { min-width: 0; overflow: hidden; font-size: 0.92rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.mini .btn.icon { width: 36px; height: 36px; }
.mini .btn.icon svg { width: 19px; height: 19px; }
.mini-play { color: var(--accent); }
.mini .i-pause { display: none; }
.mini:is([data-status="playing"], [data-status="loading"]) .i-play { display: none; }
.mini:is([data-status="playing"], [data-status="loading"]) .i-pause { display: block; }
/* Room for it at the bottom of the page, and for toasts above it */
.has-mini .content { padding-bottom: 60px; }
.has-mini .toast { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 54px); }

/* A tirth's page over the site (ui/tirthframe.js). It keeps room for the mini player itself (tirth.css), since a
   strip kept here would be in the bhajan's colours, not the page's. */
.has-tirth { overflow: hidden; }
.tirth-sheet { position: fixed; inset: 0; z-index: 4; display: flex; background: var(--bg); }
.tirth-sheet iframe { flex: 1; width: 100%; border: 0; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.92rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden; /* once faded, so screen readers don't find an old message */
  transform: translate(-50%, 16px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.offline-note { z-index: 19; border-radius: 16px; } /* under a passing toast */

/* ---------- Aarti: the 24 tirthankars' aartis (ui/aarti.js) ---------- */
/* Each tirthankar's body colour (varna) glows around his medallion, and tints the aarti page behind it
   (the pratima itself takes it from the pv-* gradients in index.html) */
.varna-gold { --vrgb: 240, 186, 74; }
.varna-white { --vrgb: 236, 228, 210; }
.varna-red { --vrgb: 232, 96, 64; }
.varna-green { --vrgb: 90, 200, 140; }
.varna-dark { --vrgb: 120, 140, 210; }
.aarti-disc {
  --d: 56px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--d);
  height: var(--d);
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, rgba(var(--glow-rgb), 0.5), #170905 72%); /* a lamp-lit niche */
  box-shadow: 0 0 0 2px rgba(var(--line-rgb), 0.55), 0 0 0 5px rgba(var(--line-rgb), 0.2), 0 0 22px rgba(var(--vrgb), 0.35);
  transition: box-shadow 0.3s ease;
}
.aarti-disc::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(var(--line-rgb), 0.3); border-radius: 50%; }
.aarti-disc .pratima { width: 86%; height: 86%; margin-top: 8%; overflow: visible; color: #2a1208; }
.aarti-disc .aarti-art { width: 100%; height: 100%; margin: 0; }
.varna-dark .pratima { color: #dfe5ff; }
.pratima-hood { fill: #1f3a2d; stroke: #7fb394; stroke-opacity: 0.6; stroke-width: 0.5; }
.aarti-disc img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* The list, in the Granth page */
/* A list's title on a gold thread, a bead at each end of it by the words: the thread its pujas hang on below */
.aarti-head { display: flex; align-items: center; justify-content: center; gap: var(--s3); margin: 0 0 16px; text-align: center; }
.aarti-head::before, .aarti-head::after {
  content: "";
  flex: 1 1 0; /* (the room the words leave, the words first) */
  min-width: 28px;
  max-width: 120px;
  height: 10px;
  background: linear-gradient(90deg, rgba(var(--line-rgb), 0), rgba(var(--line-rgb), 0.9));
  clip-path: polygon(0 4px, calc(100% - 10px) 4px, calc(100% - 5px) 0, 100% 5px, calc(100% - 5px) 100%, calc(100% - 10px) 6px, 0 6px);
}
.aarti-head::after { transform: scaleX(-1); }
.aarti-group + .aarti-group { margin-top: 36px; }
/* The other aartis (Panch Parmeshthi, Jinvani Mata…): cards, apart from the 24 */
.aarti-mangal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.aarti-mangal-card {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 10px 12px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  transition: background 0.2s ease;
}
.aarti-mangal-card:hover { background: rgba(var(--accent-rgb), 0.1); }
.aarti-mangal-card .aarti-disc { --d: 54px; flex: none; }
.aarti-mangal-text { display: grid; gap: 2px; min-width: 0; }
.aarti-mangal-text strong { color: var(--title); font-family: var(--font-book); font-size: 1.1rem; font-weight: 400; line-height: 1.25; }
.aarti-mangal-text span { color: var(--text-faint); font-size: 0.8rem; line-height: 1.3; }
.aarti-soon {
  position: relative;
  max-width: 560px;
  margin: 0 auto 26px;
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.12), rgba(var(--ink-rgb), 0.5));
}
.aarti-soon.is-today { border-color: rgba(var(--accent-rgb), 0.75); box-shadow: 0 0 34px rgba(var(--glow-rgb), 0.28); }
.aarti-soon-when { margin: 0 0 6px; color: var(--highlight); font-size: 0.9rem; letter-spacing: 0.02em; text-align: center; }
/* The Puja page's card can be closed (ui/puja.js): its heading keeps clear of the button, still centred */
.soon-close { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; color: var(--text-muted); }
.aarti-soon.has-close .aarti-soon-when { padding: 0 40px; }
.aarti-soon ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.aarti-soon-item { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: var(--radius-md); color: var(--text); text-decoration: none; }
.aarti-soon-item:hover { background: var(--card-hover); }
.aarti-soon-item .aarti-disc { --d: 46px; flex: none; }
.aarti-soon-text { display: grid; flex: 1; gap: 1px; min-width: 0; }
.aarti-soon-text strong { color: var(--title); font-family: var(--font-book); font-size: 1.15rem; font-weight: 400; }
.aarti-soon-text span { color: var(--text-muted); font-size: 0.86rem; }
.aarti-soon-go {
  flex: none;
  padding: 7px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  color: var(--on-accent);
  font-size: 0.88rem;
  font-weight: 700;
}
.aarti-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 14px 8px; margin: 0; padding: 0; list-style: none; }
.aarti-tile {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 2px 8px;
  border-radius: var(--radius-md);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease;
}
.aarti-tile:hover { background: rgba(var(--accent-rgb), 0.08); }
.aarti-tile:hover .aarti-disc { box-shadow: 0 0 0 2px rgba(var(--line-rgb), 0.7), 0 0 0 5px rgba(var(--line-rgb), 0.2), 0 0 32px rgba(var(--vrgb), 0.65); }
.aarti-tile-name { color: var(--title); font-family: var(--font-book); font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.aarti-tile-chinh { color: var(--text-faint); font-size: 0.8rem; line-height: 1.1; }
@media (max-width: 420px) {
  .aarti-grid { grid-template-columns: repeat(4, 1fr); gap: 12px 2px; }
  .aarti-grid .aarti-disc { --d: 50px; }
  .aarti-tile-name { font-size: 0.84rem; }
  .aarti-tile-chinh { font-size: 0.74rem; }
}

/* One aarti (#aarti/<id>): covers the site, like the book reader */
.aarti-view {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 90% 55% at 50% 16%, rgba(var(--vrgb), 0.2), transparent 70%),
    radial-gradient(ellipse at 50% 40%, var(--surface), var(--screen-bg) 80%); /* the site's theme, like the pages */
  color: var(--text);
}
.aarti-view:focus { outline: none; }
.aarti-view .reader-title { color: var(--title); white-space: normal; line-height: 1.25; }
.aarti-view .reader-part { color: var(--text-muted); } /* long names take two lines on phones, never cut */
.aarti-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px max(16px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.aarti-scroll > * { max-width: 660px; margin-left: auto; margin-right: auto; }

/* The altar: the medallion, and the lit diya circling it like an aarti thal */
.aarti-altar { position: relative; display: grid; place-items: center; width: 196px; height: 196px; margin: 4px auto 0; }
.aarti-altar .aarti-disc {
  --d: 112px;
  box-shadow: 0 0 0 3px rgba(var(--line-rgb), 0.6), 0 0 0 9px rgba(var(--line-rgb), 0.16), 0 0 0 10px rgba(var(--line-rgb), 0.25), 0 0 54px rgba(var(--vrgb), 0.45);
}
.aarti-halo {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--glow-rgb), 0.32) 30%, rgba(var(--glow-rgb), 0.08) 60%, transparent 71%);
  animation: aarti-breathe 3.2s ease-in-out infinite;
}
.aarti-orbit { position: absolute; inset: 0; animation: aarti-orbit 5.5s linear infinite; }
.aarti-thal { position: absolute; bottom: -8px; left: 50%; width: 46px; height: 46px; margin-left: -23px; animation: aarti-orbit 5.5s linear infinite reverse; }
.aarti-thal svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 10px rgba(255, 170, 60, 0.9)); }
.aarti-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: aarti-flicker 1.3s ease-in-out infinite alternate; }
@keyframes aarti-orbit { to { transform: rotate(360deg); } }
@keyframes aarti-flicker {
  0% { transform: scale(1, 1) rotate(-2deg); }
  45% { transform: scale(0.93, 1.07) rotate(2deg); }
  100% { transform: scale(1.04, 0.95) rotate(-1deg); }
}
@keyframes aarti-breathe { 50% { opacity: 0.7; transform: scale(1.04); } }

.aarti-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; margin-bottom: 8px; padding: 0; list-style: none; }
.aarti-facts li { padding: 5px 11px; border: 1px solid rgba(var(--line-rgb), 0.22); border-radius: 999px; background: var(--card); font-size: 0.88rem; }
.aarti-facts span { color: var(--highlight); }
.aarti-kalyanak { margin-top: 6px; margin-bottom: 0; color: var(--text-muted); font-size: 0.92rem; text-align: center; }
.aarti-kalyanak.is-today { color: var(--title); font-weight: 700; }

/* The text: the tek (the refrain) on top, then the numbered verses */
.aarti-text { margin-top: 26px; font-family: var(--font-book); font-size: 1.22rem; line-height: 1.75; text-align: center; }
.aarti-line { display: block; padding: 1px 10px; }
.aarti-tek {
  margin: 0 0 24px;
  padding: 16px 8px;
  border-block: 1px solid rgba(var(--line-rgb), 0.35);
  background: radial-gradient(ellipse at center, rgba(var(--glow-rgb), 0.12), transparent 70%);
  color: var(--title);
  font-size: 1.1em;
}
.aarti-verses { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.aarti-verse p { margin: 0; }
.aarti-vnum { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--highlight); font-size: 0.8em; line-height: 1.4; }
.aarti-vnum::before, .aarti-vnum::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--line-rgb), 0.6)); }
.aarti-vnum::after { transform: scaleX(-1); }
.aarti-cue { color: var(--text-faint); font-size: 0.86em; }
.aarti-end { margin: 30px 0 0; color: var(--title); }

/* Puja-Path (ui/puja.js): the pujas and paths as text. The list is the Puja page, and one puja opens over the site
   (the aarti's view); its mantras stand apart from the verses, each with the dravya it offers. */
.puja-thread { --bead: 34px; max-width: 560px; margin: 0 auto; padding: 0; list-style: none; }
.puja-thread li { position: relative; }
.puja-thread li + li { padding-top: var(--s2); } /* (each puja its own box; the thread shows between them) */
.puja-thread li::before { /* the gold thread through the beads, from the first to the last */
  content: "";
  position: absolute;
  left: calc(var(--s3) + var(--bead) / 2); /* (the box's 1px border, less half the thread) */
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(var(--line-rgb), 0.45);
}
.puja-thread li:first-child::before { top: 50%; }
.puja-thread li:last-child::before { bottom: 50%; }
.puja-thread li:only-child::before { display: none; }
.puja-step {
  position: relative; /* (over the thread) */
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 60px;
  padding: var(--s2) var(--s3);
  border: 1px solid rgba(var(--line-rgb), 0.4);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: 0 1px 3px rgba(90, 45, 15, 0.08);
  color: var(--text);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.puja-step:is(:hover, :active) { border-color: rgba(var(--accent-rgb), 0.5); background: var(--card-hover); }
.puja-bead, .puja-bead-disc { position: relative; z-index: 1; flex: none; }
.puja-bead {
  display: grid;
  place-items: center;
  width: var(--bead);
  height: var(--bead);
  border: 1px solid rgba(var(--line-rgb), 0.6);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(var(--glow-rgb), 0.4), var(--screen-bg) 75%);
}
.puja-bead.is-dot::after { /* a small lamp in the bead */
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--highlight);
  box-shadow: 0 0 10px rgba(var(--glow-rgb), 0.8);
}
.puja-bead-disc { --d: var(--bead); }
.puja-step-text { display: grid; gap: 2px; min-width: 0; }
.puja-step-text strong { color: var(--title); font-family: var(--font-book); font-size: 1.12rem; font-weight: 400; line-height: 1.3; }
.puja-step-text span { color: var(--text-faint); font-size: 0.8rem; line-height: 1.3; }
.puja-books { margin: var(--s8) 0 0; text-align: center; }
.puja-books .chip { min-height: 44px; padding: 0 var(--s4); }
.puja-books svg { color: var(--accent); }
/* The groups as chips, all in sight: three to a row */
.puja-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 680px; margin-inline: auto; }
.puja-tabs .chip { justify-content: center; text-align: center; }
.puja-soon-diya { --d: 46px; flex: none; color: var(--highlight); }
/* The Granth search (ui/granthsearch.js): its box under the heading, and while something is typed, the names found
   in the page's place, each kind under its title, each one a box like the pujas' */
.granth-search { max-width: 560px; margin: 0 auto 22px; }
.granth.is-searching > :is(.granth-jump, #granthShelves, .granth-ps, .granth-fine, #pujaHome) { display: none; }
.granth-results { max-width: 560px; margin: 0 auto; }
.granth-results > .search-count { margin: 0 0 22px; text-align: center; }
.granth-hits + .granth-hits { margin-top: 32px; }
.granth-hit-list { --bead: 40px; display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.granth-hit mark { border-radius: 3px; background: rgba(var(--accent-rgb), 0.16); color: var(--highlight); }
.granth-hit-cover { /* a book: its cover's colours, with Mahavir */
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 42px;
  margin: 0 4px; /* (in line with the beads) */
  border-radius: 3px 5px 5px 3px;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: inset 0 0 0 2px rgba(255, 226, 160, 0.35), 0 1px 3px rgba(60, 30, 10, 0.25);
}
.granth-hit-cover svg { width: 26px; height: 26px; }
@media (max-width: 560px) {
  .granth-search { margin-bottom: 18px; }
}
.puja-soon-diya svg { width: 26px; height: 26px; }

/* One puja */
/* The buttons in one row, the puja's name on its own line under them (never squeezed between them) */
.puja-view .reader-bar { flex-wrap: wrap; row-gap: var(--s2); }
.puja-view .reader-name { order: 1; flex-basis: 100%; }
.puja-view #pujaShare { margin-inline-start: auto; }
.puja-view .aarti-scroll { touch-action: pan-x pan-y; } /* (two fingers resize the text, not the page: ui/puja.js) */
.puja-jump { /* its parts, under the title (scrolls sideways when they don't fit) */
  display: flex;
  gap: var(--s2);
  justify-content: safe center;
  overflow-x: auto;
  padding: 0 var(--s4) var(--s2);
  scrollbar-width: none;
}
.puja-jump::-webkit-scrollbar { display: none; }
.puja-jump .chip { flex: none; min-height: 44px; font-family: var(--font-book); font-weight: 400; font-size: 1rem; }
.puja-top { display: grid; justify-items: center; gap: var(--s3); margin-top: var(--s3); }
.puja-altar .aarti-disc { --d: 92px; }
.puja-versions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.puja-versions .chip { min-height: 44px; text-decoration: none; }
.puja-versions .chip[aria-current="page"] { color: var(--highlight); border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.14); pointer-events: none; }
.puja-text { container-type: inline-size; margin-top: var(--s4); font-size: var(--puja-size, 1.22rem); }
.puja-verse .aarti-line { /* whole on one line: a long one set just small enough (--w: its width in em, ui/puja.js) */
  padding-inline: 0;
  font-size: max(0.6em, min(1em, 100cqw / var(--w) * 0.99 * var(--puja-zoom, 1))); /* (a pinch grows them all alike) */
  line-height: calc(var(--puja-size, 1.22rem) * 1.75); /* (the text's own spacing, set smaller or not) */
}
.puja-verse { /* drawn only near the screen (a vidhan is thousands of them), its height known: --n lines, each whole */
  margin: 0 0 var(--s4);
  content-visibility: auto;
  contain-intrinsic-block-size: calc(var(--n, 1) * (var(--puja-size, 1.22rem) * 1.75 + 2px));
}
.puja-part { /* स्थापना, अष्टक, जयमाला: between two gold threads */
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s8) 0 var(--s4);
  color: var(--highlight);
  font-family: var(--font-book);
  font-size: 1.05em;
  font-weight: 400;
  scroll-margin-top: var(--s3);
}
.puja-part:first-child { margin-top: var(--s2); }
.puja-part::before, .puja-part::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--line-rgb), 0.6)); }
.puja-part::after { transform: scaleX(-1); }
.puja-sub { /* स्थापना, अष्टक, जयमाला inside a vidhan's puja (the puja itself is the .puja-part above) */
  margin: var(--s6) 0 var(--s3);
  color: var(--highlight);
  font-family: var(--font-book);
  font-size: 0.86em;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.puja-part + .puja-sub { margin-top: 0; }
.puja-chhand { margin: 0 0 var(--s2); color: var(--text-faint); font-family: var(--font-body); font-size: 0.68em; letter-spacing: 0.04em; }
.puja-mantra { /* a mantra: set apart, smaller, with the dravya it offers */
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s6);
  padding: var(--s2) var(--s3);
  border: 1px solid rgba(var(--line-rgb), 0.28);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.12), rgba(var(--ink-rgb), 0.35));
  color: var(--text-muted);
  font-size: 0.8em;
  line-height: 1.55;
  text-align: start;
}
.puja-mantra:not(.has-icon) { justify-content: center; text-align: center; }
.puja-dravya {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(var(--glow-rgb), 0.45), rgba(var(--ink-rgb), 0.6) 75%);
  box-shadow: 0 0 0 1px rgba(var(--line-rgb), 0.5);
  color: var(--highlight);
}
.puja-dravya svg { width: 1.35em; height: 1.35em; }
.puja-mantra-body { display: grid; gap: 2px; min-width: 0; }
.puja-tag { color: var(--highlight); font-size: 0.86em; font-weight: 700; letter-spacing: 0.02em; }
.puja-end { text-align: center; }
.puja-end .aarti-end { margin-top: var(--s8); font-family: var(--font-book); font-size: 1.22rem; } /* (below the text, centred, with room) */

/* Pathshala (ui/pathshala.js): its page, and a lesson or quiz over the site (the aarti's view) */
.ps-levels { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 var(--s2); }
.ps-levels .chip { min-height: 44px; padding: 0 var(--s6); font-size: 1rem; }
.ps-level-sub { margin: 0 0 var(--s6); color: var(--text-faint); font-size: 0.9rem; }
.ps-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.ps-card, .ps-entry {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 72px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: inherit;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ps-card:hover, .ps-entry:hover { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.08); }
.ps-entry .ps-num svg { width: 26px; height: 26px; }
.ps-entry-go { flex: none; width: 22px; height: 22px; color: var(--text-faint); }
.ps-num {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
  font-family: var(--font-book);
  font-size: 1.2rem;
  font-weight: 700;
}
.ps-text { display: grid; flex: 1; min-width: 0; gap: 2px; overflow-wrap: anywhere; }
.ps-text strong { color: var(--title); font-family: var(--font-book); font-size: 1.12rem; font-weight: 400; line-height: 1.3; }
.ps-text span { color: var(--text-faint); font-size: 0.84rem; line-height: 1.35; }
.ps-stars { flex: none; color: #946508; font-size: 1rem; letter-spacing: 2px; }
.ps-stars.is-faint { opacity: 0.35; }
.ps-spacer { visibility: hidden; }
.ps-body { padding-bottom: var(--s8); }
.ps-part { margin-top: var(--s6); }
.ps-h { margin: 0 0 var(--s3); color: var(--highlight); font-size: 1.05rem; font-weight: 700; }
.ps-p { margin: 0 0 var(--s3); font-size: 1.08rem; line-height: 1.8; }
.ps-big {
  margin: 0;
  padding: var(--s6) var(--s4);
  border-block: 1px solid rgba(var(--line-rgb), 0.35);
  background: radial-gradient(ellipse at center, rgba(var(--glow-rgb), 0.12), transparent 70%);
  color: var(--title);
  font-family: var(--font-book);
  font-size: 1.35rem;
  line-height: 1.9;
  text-align: center;
}
.ps-note { margin: var(--s2) 0 0; color: var(--text-faint); font-size: 0.86rem; text-align: center; }
.ps-note::before { content: "— "; }
.ps-rows { display: grid; gap: var(--s2); margin: 0; }
.ps-rows div { padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.ps-rows dt { color: var(--title); font-family: var(--font-book); font-size: 1.12rem; }
.ps-rows dd { margin: var(--s1) 0 0; color: var(--text-muted); line-height: 1.7; }
.ps-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3); margin: var(--s6) 0 0; }
.ps-actions .btn-send { display: inline-flex; align-items: center; justify-self: auto; text-decoration: none; }
.ps-actions .chip { min-height: 44px; padding: 0 var(--s4); }
.ps-quiz { padding-top: var(--s4); }
.ps-progress { margin: 0 0 var(--s2); color: var(--text-faint); font-size: 0.9rem; text-align: center; }
.ps-bar { height: 4px; overflow: hidden; border-radius: 999px; background: rgba(var(--line-rgb), 0.2); }
.ps-bar span { display: block; height: 100%; background: var(--accent); transition: width 0.3s ease; }
.ps-q { margin: var(--s6) 0 var(--s4); color: var(--title); font-family: var(--font-book); font-size: 1.4rem; font-weight: 400; line-height: 1.5; text-align: center; }
.ps-options { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.ps-opt {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 56px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: inherit;
  font: inherit;
  font-size: 1.1rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ps-opt:hover:not(:disabled) { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.08); }
.ps-opt:disabled { cursor: default; }
.ps-opt:disabled:not(.is-right, .is-wrong) { opacity: 0.55; }
.ps-key { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--line-rgb), 0.16); font-size: 0.95rem; }
.ps-opt.is-right { border-color: rgba(110, 200, 140, 0.8); background: rgba(110, 200, 140, 0.16); }
.ps-opt.is-right .ps-key { background: rgba(110, 200, 140, 0.85); color: #0c2416; }
.ps-opt.is-wrong { border-color: rgba(232, 110, 90, 0.75); background: rgba(232, 110, 90, 0.14); }
.ps-opt.is-wrong .ps-key { background: rgba(232, 110, 90, 0.85); color: #2a0c06; }
.ps-feedback:empty { display: none; }
.ps-feedback { margin-top: var(--s4); text-align: center; }
.ps-verdict { margin: 0; font-size: 1.1rem; font-weight: 700; }
.ps-verdict.is-right { color: #1f7a45; }
.ps-verdict.is-wrong { color: var(--highlight); }
.ps-why { margin: var(--s2) 0 0; color: var(--text-muted); line-height: 1.7; }
.ps-result { padding-top: var(--s8); text-align: center; }
.ps-result .ps-stars { font-size: 2.6rem; letter-spacing: var(--s2); }
.ps-score { margin: var(--s4) 0 var(--s2); color: var(--title); font-family: var(--font-book); font-size: 1.5rem; font-weight: 400; }

/* A tirthankar's Parichay, under his aarti (ui/aarti.js): calm rows, like the site's lists */
.aarti-jump { margin-top: var(--s3); margin-bottom: 0; text-align: center; }
.aarti-jump .chip { min-height: 44px; padding: 0 var(--s4); }
.aarti-jump svg { color: var(--accent); }
/* A tirthankar's page: his puja and his aarti, side by side */
.tk-do { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.tk-do .chip { gap: var(--s2); font-size: 1rem; }
.tk-do .chip svg { width: 26px; height: 26px; }
/* A Parichay (ui/tirthankar.js): the pratima without the circling thal */
.tk-altar { width: 150px; height: 150px; }
.tk-view .parichay { margin-top: var(--s6); }
.parichay { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid rgba(var(--line-rgb), 0.35); scroll-margin-top: var(--s4); }
.parichay-title { margin: 0 0 var(--s2); color: var(--title); font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; text-align: center; }
.parichay-h { margin: var(--s6) 0 var(--s3); color: var(--highlight); font-size: 1rem; font-weight: 700; }
.parichay-list { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.parichay-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 56px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
}
:is(a, button).parichay-row { cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
:is(a, button).parichay-row:hover { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.08); }
.parichay-text { display: grid; flex: 1; min-width: 0; gap: 2px; }
.parichay-name { font-weight: 700; overflow-wrap: anywhere; }
.parichay-meta { color: var(--text-faint); font-size: 0.88rem; overflow-wrap: anywhere; }
.parichay-go { flex: none; width: 20px; height: 20px; color: var(--accent); }
.parichay-row.is-past { background: transparent; } /* (quieter, still easy to read on the light page) */
.parichay-row.is-past .parichay-name { color: var(--text-muted); }
.parichay-row:is(.is-next, .is-today) { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.1); }
.parichay-tag { flex: none; padding: 2px var(--s2); border-radius: 999px; background: var(--btn-b); color: var(--on-accent); font-size: 0.78rem; font-weight: 700; }

/* Yatra Passport (ui/passport.js): its card on the Yatra page, and its page */
.pp-entry { margin: 0 0 var(--s6); }
.pp-entry .ps-num svg { width: 24px; height: 24px; }
.pp-body { max-width: 640px; margin: 0 auto; }
.pp-summary {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4) var(--s4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 90% at 50% 0%, rgba(var(--accent-rgb), 0.14), transparent 70%), var(--card);
  text-align: center;
}
.pp-big { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 var(--s2); margin: 0; }
.pp-big strong { color: var(--title); font-family: var(--font-book); font-size: clamp(2.4rem, 11vw, 3rem); font-weight: 400; line-height: 1.1; }
/* (the page's top kept short, so the map comes into view sooner; its intro only while there's nothing in it yet) */
.section.passport { padding-top: var(--s4); }
.passport .page-back { margin-bottom: var(--s2); }
.passport:not(:has(.pp-summary.is-empty)) .granth-intro { display: none; }
.pp-big span { color: var(--text); font-size: 1.2rem; font-weight: 600; }
.pp-share { display: inline-flex; justify-self: center; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.pp-share svg { width: 20px; height: 20px; }
.pp-empty { margin: 0; color: var(--text-muted); font-size: 1.1rem; }
.pp-h { margin: 0; color: var(--title); font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; }
/* The yatra on India's map (ui/passport.js): a sheet of old paper, a pin at each tirth, a year's route drawn in */
.pp-years { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.pp-years .chip { min-height: 44px; padding-inline: var(--s4); font-variant-numeric: tabular-nums; }
.pp-years .chip[aria-pressed="true"] { background: var(--btn-b); border-color: var(--btn-b); color: var(--on-accent); }
.pp-map {
  position: relative;
  width: 100%;
  padding: var(--s3);
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(120, 72, 30, 0.28)),
    linear-gradient(135deg, #f4e8cd, #e6d2aa);
  box-shadow: inset 0 0 0 1px rgba(74, 42, 18, 0.25), 0 10px 30px rgba(0, 0, 0, 0.35);
  color: #4a2a12;
}
.pp-map svg { display: block; width: 100%; height: auto; cursor: pointer; }
.pp-india { fill: #f8f0dc; stroke: rgba(74, 42, 18, 0.75); stroke-width: 2.4; stroke-linejoin: round; filter: drop-shadow(0 4px 8px rgba(55, 32, 10, 0.25)); }
.pp-route { fill: none; stroke: #8a2e1a; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 14 12; }
.pp-route-reveal { fill: none; stroke: #fff; stroke-width: 40; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pp-draw 2.6s ease-in-out 0.2s forwards; }
@keyframes pp-draw { to { stroke-dashoffset: 0; } }
.pp-pin-ring { fill: #fffaee; filter: drop-shadow(0 3px 4px rgba(55, 32, 10, 0.45)); }
.pp-pin-bg { fill: #f3dcae; }
.pp-map[data-year=""] .pp-pin { animation: pp-pin 0.5s ease-out backwards; }
@keyframes pp-pin { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pp-route-reveal { animation: none; stroke-dashoffset: 0; }
  .pp-map .pp-pin { animation: none; }
}
@media (max-width: 480px) {
  .pp-summary { padding-inline: var(--s2); }
  .pp-map { padding: var(--s2); }
}
.pp-map-hint { margin: var(--s2) 0 0; color: rgba(74, 42, 18, 0.75); font-size: 0.85rem; text-align: center; }
.pp-pop {
  position: absolute;
  z-index: 1;
  width: min(280px, calc(100% - 16px));
  padding: var(--s2);
  border-radius: var(--radius-md);
  background: #fffaee;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: #4a2a12;
  text-align: left;
}
.pp-pop ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pp-pop a { display: grid; gap: 2px; min-height: 44px; padding: var(--s2); border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.pp-pop a:hover, .pp-pop a:focus-visible { background: rgba(201, 122, 30, 0.15); }
.pp-pop b { font-weight: 700; }
.pp-pop span { color: rgba(74, 42, 18, 0.75); font-size: 0.85rem; }
.pp-pop p { margin: var(--s1) var(--s2); font-size: 0.85rem; }
.pp-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3); margin-top: var(--s2); }
.pp-actions .pp-share { margin: 0; }
.pp-actions .chip { min-height: 44px; }
.pp-list { margin-top: var(--s6); }
.pp-list summary { min-height: 44px; display: flex; align-items: center; color: var(--accent); font-weight: 700; cursor: pointer; }
.pp-list .parichay-list { margin-top: var(--s2); }
/* Keeping it safe: on this phone only, a backup link, the iPhone's tip; lit once there are 3 tirths */
.pp-safe { display: grid; justify-items: start; gap: var(--s3); margin-top: var(--s8); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.pp-safe .chip { min-height: 44px; }
.pp-safe.is-urgent { margin-top: var(--s4); border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.08); }
.pp-safe p { margin: 0; color: var(--text-muted); font-size: 0.98rem; line-height: 1.6; }
.pp-safe .pp-tip { padding: var(--s3); border-radius: var(--radius-md); background: var(--card); }
.pp-safe .pp-safe-status { color: var(--highlight); font-weight: 600; }
.pp-safe .pp-safe-status:empty { display: none; }
.pp-restore { width: 100%; }
.pp-restore summary { min-height: 44px; display: flex; align-items: center; color: var(--accent); font-weight: 700; cursor: pointer; }
.pp-restore-form { display: flex; gap: var(--s2); margin-top: var(--s2); }
.pp-restore-form input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--s3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 1rem; /* (16px or more: iPhones don't zoom in on it) */
}
.pp-restore-form input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.pp-pick-search input {
  min-height: 48px;
  padding: 0 var(--s3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
}
.pp-pick-search input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* A sheet over the page (ui/sharesheet.js, the passport's checklist): from the bottom on phones, in the middle on wider screens */
.dlg {
  width: min(560px, 100%);
  max-width: 100%;
  max-height: min(92vh, 92dvh);
  margin: auto auto 0;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: radial-gradient(ellipse at 50% 0%, var(--surface), var(--screen-bg) 85%);
  color: var(--text);
}
@media (min-width: 640px) { .dlg { margin: auto; border-radius: var(--radius-lg); } }
.dlg::backdrop { background: rgba(0, 0, 0, 0.6); }
/* While a sheet is open only what's in it scrolls (the checklist's list, the share sheet), never the page behind it:
   the page can't scroll, and a drag anywhere else on the sheet or its backdrop moves nothing */
html:has(dialog.dlg[open]) { overflow: hidden; scrollbar-gutter: stable; }
.dlg { overscroll-behavior: contain; touch-action: none; }
.share-sheet .dlg-body { touch-action: pan-y; }
.pp-pick .dlg-body { touch-action: none; }
.pp-pick-list { touch-action: pan-y; }
.dlg[open] { display: flex; flex-direction: column; overflow: hidden; }
/* (its own height, so what's in it scrolls inside it and never runs out of it) */
.dlg-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--s3); min-height: 0; max-height: min(92vh, 92dvh); padding: var(--s4) var(--s4) max(var(--s4), env(safe-area-inset-bottom)); }
.pp-pick .dlg-body { height: min(92vh, 92dvh); overflow: hidden; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.dlg-title { margin: 0; color: var(--title); font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; }
.dlg .btn.dlg-close { flex: none; width: 44px; height: 44px; }
.dlg-body { overflow-y: auto; overscroll-behavior: contain; }
.ss-formats { display: flex; justify-content: center; gap: var(--s2); }
.ss-formats .chip { min-height: 44px; padding-inline: var(--s6); }
.ss-formats .chip[aria-pressed="true"] { background: var(--btn-b); border-color: var(--btn-b); color: var(--on-accent); }
.ss-pic { display: grid; flex: none; place-items: center; min-height: 240px; overflow: hidden; border-radius: var(--radius-md); background: rgba(var(--ink-rgb), 0.5); }
.ss-pic img { display: block; width: auto; max-width: 100%; height: min(50vh, 520px); height: min(50dvh, 520px); object-fit: contain; }
.ss-photo { display: grid; gap: var(--s2); }
.ss-photo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3); }
.ss-thumbs { display: flex; gap: var(--s3); }
.ss-thumbs:empty { display: none; }
.ss-thumb { position: relative; width: 64px; height: 64px; }
.ss-thumb canvas { width: 100%; height: 100%; border: 3px solid #fbf8f1; border-radius: var(--radius-md); object-fit: cover; }
.ss-thumb button { position: absolute; top: -14px; right: -14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--on-accent); cursor: pointer; }
.ss-thumb button svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--btn-b); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.ss-photo .chip { min-height: 44px; padding-inline: var(--s4); }
.ss-add { border-color: rgba(var(--accent-rgb), 0.6); color: var(--accent); }
.ss-add:focus-within { box-shadow: var(--focus-ring); }
.ss-private { margin: 0; color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; text-align: center; }
.ss-field { display: grid; gap: var(--s1); color: var(--text-muted); font-size: 0.92rem; }
.ss-field input {
  min-height: 48px;
  padding: 0 var(--s3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
}
.ss-field input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.ss-wait { margin: 0; color: var(--text-muted); }
.ss-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3); }
.ss-actions .pp-share { margin: 0; }
.ss-actions .chip { min-height: 46px; padding-inline: var(--s6); }
.ss-actions :disabled { opacity: 0.5; cursor: default; }
.ss-status { margin: 0; color: var(--highlight); font-weight: 600; text-align: center; }
.ss-status:empty { display: none; }
/* The checklist: search, state and kind, then every tirth with a big tick */
/* The yatra's month and year (ui/when.js) */
.when { display: inline-grid; grid-template-columns: 1.3fr 1fr; gap: var(--s2); min-width: min(100%, 300px); }
.pp-pick-when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s2) var(--s3); border-radius: var(--radius-md); background: rgba(var(--accent-rgb), 0.1); }
.pp-pick-when > span { color: var(--title); font-weight: 700; }
.pp-pick-when .when { flex: 1; }
.pp-pick-when .pp-select { height: 40px; padding-right: 30px; background-position: right 8px center; background-size: 16px; font-size: 0.92rem; } /* (compact: the list keeps the room) */
.pp-pick-also { color: var(--accent); font-size: 0.82rem; font-weight: 600; }
.pp-pick-also:empty { display: none; }
.pp-pick-search { position: relative; display: block; }
.pp-pick-search svg { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; color: var(--text-faint); transform: translateY(-50%); pointer-events: none; }
.pp-pick-search input { width: 100%; padding-left: 42px; }
.pp-select {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 36px 0 var(--s3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e1a12' stroke-opacity='.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
  color: var(--text);
  font: inherit;
  font-size: 0.98rem;
  text-overflow: ellipsis;
  appearance: none;
  cursor: pointer;
}
.pp-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.pp-pick-list { flex: 1 1 0; min-height: 0; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.pp-pick-row { display: flex; align-items: center; gap: var(--s3); min-height: 60px; padding: var(--s2) var(--s1); border-bottom: 1px solid rgba(var(--line-rgb), 0.25); cursor: pointer; }
.pp-pick-row input { position: absolute; opacity: 0; pointer-events: none; }
.pp-pick-text { display: grid; flex: 1; min-width: 0; gap: 2px; }
.pp-pick-name { font-weight: 700; overflow-wrap: anywhere; }
.pp-pick-meta { color: var(--text-faint); font-size: 0.85rem; overflow-wrap: anywhere; }
.pp-pick-box { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border: 2px solid var(--glass-border); border-radius: 50%; color: transparent; transition: background 0.15s ease, border-color 0.15s ease; }
.pp-pick-box svg { width: 20px; height: 20px; }
.pp-pick-row:has(input:checked) .pp-pick-box { border-color: var(--btn-b); background: var(--btn-b); color: var(--on-accent); }
.pp-pick-row:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.pp-pick-none { margin: 0; color: var(--text-muted); text-align: center; }
.pp-pick-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.pp-pick-foot .pp-share { min-height: 40px; margin: 0; padding: 0 20px; font-size: 0.95rem; } /* (compact: the list keeps the room) */
.pp-pick-count { color: var(--text-muted); font-size: 0.95rem; }
@media (max-width: 560px) {
  .aarti-altar { width: 168px; height: 168px; }
  .aarti-altar .aarti-disc { --d: 96px; }
}

/* ---------- Touch screens ---------- */
/* Blurring the page behind these panels as it scrolls is heavy for phones, so they use a stronger tint instead */
@media (hover: none) and (pointer: coarse) {
  .topnav, .visit-count, .tithi-pill, .lyrics, .parva {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .topnav, .visit-count, .tithi-pill { background: rgba(var(--ink-rgb), 0.92); }
}

/* ---------- Small screens ---------- */
/* The top bar on narrow screens: the name and the five tabs must share one line without touching.
   Up to 600px the tagline goes and the tabs tighten; the tabs scroll sideways (never overlap
   the name) if a screen is narrower still. */
@media (max-width: 600px) {
  .brand-tag { display: none; }
  .topbar { gap: 8px; }
  .brand { flex: none; gap: 7px; }
  .topnav { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
  .navlink { padding: 0 12px; font-size: 0.95rem; }
}
/* Phones: every tab and the name show on every page; the name takes two short lines, centred on each other */
@media (max-width: 480px) {
  .brand-mark { width: 30px; height: 30px; }
  .brand-name { width: min-content; font-size: 1.02rem; line-height: 1.2; text-align: center; } /* (Hindi: room for the matras) */
  .navlink { padding: 0 clamp(5px, (100vw - 290px) / 10, 11px); font-size: 0.92rem; } /* (as wide as the bar has room for) */
}
@media (max-width: 420px) {
  .deck { padding: 12px; }
}
/* The narrowest phones: the tabs tighten so the name and all five still fit; the player's five buttons close
   up a little so they stay inside the card; the Granth categories keep to one line */
@media (max-width: 359px) {
  .topbar { gap: 6px; }
  .navlink { font-size: 0.86rem; }
  .granth-cats .chip { font-size: 0.9rem; }
  .granth-jump .chip { padding: 0 10px; }
  .controls { gap: 4px; }
  .controls .btn.icon { width: 40px; height: 40px; }
  .controls .btn.play { width: 60px; height: 60px; }
}
/* The very narrowest screens (a folded phone's outer screen, about 280px): the logo steps aside for the name, and
   the player's buttons, the reader's bottom bar and the calendar's tithis close up further so nothing leaves the screen */
@media (max-width: 300px) {
  .brand-mark { display: none; }
  .controls { gap: 2px; }
  .controls .btn.icon { width: 36px; height: 36px; }
  .controls .btn.play { width: 54px; height: 54px; }
  .reader-nav { gap: 6px; }
  .reader-turn { width: 44px; height: 44px; }
  .reader-count { min-width: 0; font-size: 0.9rem; }
  .tday-tithi { font-size: 0.56rem; }
}

/* Phones (app or browser): the name and logo are a sign, not a button */
@media (pointer: coarse) {
  .brand { pointer-events: none; }
}
/* The logo's turning page (index.html i-logo-art) stays still for those who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  .logo-flip { display: none; }
}
/* The installed app: pulling down never reloads it, on any page */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  html, body { overscroll-behavior-y: none; }
}

/* ---------- Opening screen (installed app only; ui/intro.js) ----------
   The phone shows its own launch screen first (no site can turn it off): the app's icon, its middle
   two-thirds in a 160 px circle at the very centre, on the manifest's background_color. This starts as
   exactly that and stays so for --intro-hold, while the phone fades its own away over it (about 0.3 s), so the
   change can't be seen; only then do the glow, the halo and "जैनं जयति शासनम्" appear around the muniraj (his
   page turns); then it fades away. */
.intro { display: none; --intro-hold: 0.5s; }

@media (display-mode: standalone) {
  .intro {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: block;
    background: #120a06; /* (the launch screen's: manifest background_color, tools/logo.py BG) */
    animation: intro-out 0.55s ease-in calc(var(--intro-hold) + 1.95s) forwards;
  }
}
.intro.is-skipped { animation: intro-out 0.3s ease-in forwards; pointer-events: none; }
.intro-seen .intro { display: none; } /* already shown once this launch (intro-once.js) */
.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, #2e0d08 0%, #140806 52%, #0a0403 100%);
  animation: intro-fade 0.9s ease-out var(--intro-hold) both;
}

.intro-art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%);
}
.intro-art::before {
  content: "";
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 176, 112, 0.3) 0%, rgba(255, 176, 112, 0.08) 38%, transparent 64%);
  animation: intro-glow 1.2s ease-out var(--intro-hold) both;
}
.intro-halo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #e9c160;
  animation: intro-halo 1s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--intro-hold) + 0.1s) both;
}
.intro-halo g { transform-origin: 120px 120px; }
.halo-dots { stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 14.92; stroke-opacity: 0.7; animation: intro-spin 90s linear infinite reverse; }
.halo-rays { stroke-width: 9; stroke-dasharray: 1.4 25.57; stroke-opacity: 0.55; animation: intro-spin 60s linear infinite; }
.halo-line { stroke-width: 1; stroke-opacity: 0.65; }
.intro-murti { /* (as on the launch screen) */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: circle(80px at 50% 50%);
}
.intro-art::after { /* its ring, after */
  content: "";
  position: absolute;
  inset: 40px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(243, 217, 139, 0.75), 0 0 36px rgba(255, 170, 110, 0.35);
  animation: intro-fade 0.6s ease-out calc(var(--intro-hold) + 0.15s) both;
}
.intro-words {
  position: absolute;
  top: calc(50% + 132px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro-title {
  margin: 0;
  font-family: var(--font-book);
  font-size: clamp(2.1rem, 10.5vw, 3rem);
  line-height: 1.5;
  white-space: nowrap;
  color: #f3d98b;
  background: linear-gradient(100deg, #e9c160 0%, #f3d98b 35%, #fff4dc 48%, #f3d98b 60%, #e0a86a 100%) 100% 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 186, 120, 0.35));
  animation: intro-rise 0.9s ease-out calc(var(--intro-hold) + 0.45s) both, intro-shine 1.4s ease-in-out calc(var(--intro-hold) + 0.8s) both;
}
.intro-rule {
  position: relative;
  width: 140px;
  height: 1px;
  margin: 10px 0 12px;
  background: linear-gradient(90deg, transparent, rgba(243, 217, 139, 0.8), transparent);
  animation: intro-rule 0.7s ease-out calc(var(--intro-hold) + 0.9s) both;
}
.intro-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  background: #f3d98b;
  transform: translate(-50%, -50%) rotate(45deg);
}

@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
@keyframes intro-glow { from { opacity: 0; transform: scale(0.6); } }
@keyframes intro-halo { from { opacity: 0; transform: scale(0.82) rotate(-20deg); } }
@keyframes intro-spin { to { transform: rotate(360deg); } }
@keyframes intro-fade { from { opacity: 0; } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes intro-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes intro-rule { from { opacity: 0; transform: scaleX(0); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .scene * { animation: none !important; }
  .intro * { animation-delay: var(--intro-hold) !important; } /* the launch screen's moment, then everything at once, then the fade */
}

/* Text for screen readers only */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }