:root {
  --paper: #F6EFE2;
  --ink: #2B211B;
  --muted: #66574A;
  --line: rgba(43, 33, 27, 0.15);
  --mark: #9E4426;
  --soft: #FFFBF4;
  --dead: rgba(43, 33, 27, 0.32);
  --shelf: var(--soft);
  --glow-a: rgba(214, 150, 82, 0.16);
  --glow-b: rgba(176, 108, 58, 0.08);
  --glow-a-wide: rgba(214, 150, 82, 0.16);
  --glow-b-wide: rgba(186, 116, 62, 0.08);
  --max: 46rem;
  color-scheme: light;
}
/* Dark: the original reader palette, chosen from the header toggle. */
html[data-theme="dark"] {
  --paper: #140E0C;
  --ink: #F3E6C8;
  --muted: #C2B09A;
  --line: rgba(243, 230, 200, 0.18);
  --mark: #E38B6A;
  --soft: #2A211C;
  --dead: rgba(243, 230, 200, 0.28);
  --shelf: color-mix(in srgb, var(--paper) 96%, black);
  --glow-a: rgba(226, 148, 70, 0.42);
  --glow-b: rgba(176, 108, 58, 0.18);
  --glow-a-wide: rgba(226, 156, 76, 0.4);
  --glow-b-wide: rgba(186, 116, 62, 0.22);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body {
  margin: 0;
  font-family: "Source Serif 4", "Noto Serif Tamil", "Noto Serif Devanagari", Palatino, serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  min-height: 100dvh;
  position: relative;
  z-index: 0;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 14% 52% at -8% 40%, var(--glow-a), transparent 72%),
    radial-gradient(ellipse 8% 30% at 108% 68%, var(--glow-b), transparent 70%);
}
a { color: inherit; }
button, input, summary { font: inherit; color: inherit; }
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.4rem 0.7rem;
}
.skip:focus { top: 0.5rem; z-index: 6; }
.top {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 0.45rem;
  min-height: 3.25rem;
  padding: 0.3rem 0.75rem;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.mark {
  justify-self: start;
  min-width: 0;
  font-family: "Noto Serif Tamil", serif;
  font-weight: 600;
  font-size: 1.2rem;
  text-decoration: none;
  white-space: nowrap;
}
.where { justify-self: center; min-width: 0; position: relative; }
.where-link, .where summary {
  color: var(--mark);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  cursor: pointer;
}
.where summary {
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--mark) 65%, var(--line));
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  background: transparent;
}
.where summary::-webkit-details-marker { display: none; }
.where summary::after { content: "⌄"; font-size: 0.85rem; color: var(--muted); }
.where[open] summary::after { content: "⌃"; }
.where:not([open]) > .where-panel,
.more:not([open]) > .more-panel { display: none; }
.where-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 0.35rem);
  width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(60vh, 24rem);
  overflow: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  z-index: 6;
  padding: 0.35rem 0;
}
.where-panel .hub {
  display: block;
  padding: 0.45rem 0.85rem 0.55rem;
  color: var(--mark);
  text-decoration: none;
  font-family: "Noto Serif Tamil", serif;
}
.where-panel ol { list-style: none; margin: 0; padding: 0; }
.where-panel a.padal {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: 0.55rem;
  padding: 0.45rem 0.85rem;
  text-decoration: none;
  min-height: 44px;
  align-items: center;
}
.where-panel a.padal[aria-current="page"] { color: var(--mark); }
.where-panel .ln {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Noto Serif Tamil", serif;
  font-size: 0.95rem;
}
/* Header tools, right to left: menu, theme, text size. Each is a 44px target; the icons are quiet. */
.tools {
  justify-self: end;
  display: flex;
  align-items: center;
  margin-right: -0.4rem;
}
.tools button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  border-radius: 0.5rem;
}
.tools button:disabled { color: var(--dead); cursor: default; }
.text-size {
  display: flex;
  align-items: center;
  position: relative;
  margin-right: 0.1rem;
}
.text-size::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  bottom: 14px;
  border-left: 1px solid var(--line);
}
.text-size button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  font-family: "Noto Serif Tamil", serif;
}
.text-size .ts-a, .text-size .ts-sign { display: block; line-height: 1; }
.ts-down .ts-a { font-size: 0.86rem; }
.ts-up .ts-a { font-size: 1.12rem; }
.ts-sign {
  font-family: "Source Serif 4", serif;
  font-size: 0.82rem;
  color: var(--muted);
}
.text-size button:disabled .ts-sign { color: inherit; }
.theme .sun { display: none; }
html[data-theme="dark"] .theme .sun { display: block; }
html[data-theme="dark"] .theme .moon { display: none; }
.more { position: relative; }
.more > summary {
  list-style: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}
.more > summary::-webkit-details-marker { display: none; }
.more[open] .more-panel {
  display: grid;
  position: absolute;
  right: 0;
  top: calc(100% + 0.2rem);
  min-width: 15.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.35rem;
  z-index: 6;
}
.more-panel .layer-prefs {
  display: flex;
  flex-direction: column;
}
.more-panel .layer-prefs button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  min-height: 44px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  color: var(--ink);
  border-radius: 0.35rem;
  font-family: "Noto Serif Tamil", "Source Serif 4", serif;
}
/* Menu rows are switches: the whole row toggles; the track fills with the accent when on. */
.more-panel .switch {
  flex: none;
  position: relative;
  width: 2.35rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 1.5px solid var(--muted);
  background: transparent;
  transition: background-color 0.15s, border-color 0.15s;
}
.more-panel .knob {
  position: absolute;
  top: 50%;
  left: 0.17rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--muted);
  transform: translateY(-50%);
  transition: transform 0.15s, background-color 0.15s;
}
.more-panel [aria-checked="true"] .switch { background: var(--mark); border-color: var(--mark); }
.more-panel [aria-checked="true"] .knob { background: var(--paper); transform: translate(0.98rem, -50%); }
@media (prefers-reduced-motion: reduce) {
  .more-panel .switch, .more-panel .knob { transition: none; }
}
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.85rem 1.05rem 2.5rem;
}
.wrap.song { padding-bottom: 6.75rem; }
.quiet { color: var(--muted); }
.home h1, .pathikam h1, .song h1 {
  font-family: "Noto Serif Tamil", serif;
  font-weight: 600;
  line-height: 1.3;
  margin: 0.15rem 0 0.45rem;
  overflow-wrap: anywhere;
}
.pathikam h1 { font-size: clamp(1.8rem, 6vw, 2.5rem); }
.song h1 {
  text-align: center;
  font-size: 1.35rem;
  color: var(--mark);
  margin-top: 0.85rem;
}
.song h1 a { color: inherit; text-decoration: none; }
.about { margin: 0.15rem 0 0.2rem; }
.about > summary {
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.about > summary::-webkit-details-marker { display: none; }
.about > summary::after { content: "⌄"; }
.about[open] > summary::after { content: "⌃"; }
.about .lede { margin: 0.2rem 0 0.7rem; font-size: 1.02rem; }
.volumes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.15rem 0 0.45rem;
}
.volumes a {
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.volumes a[aria-current="page"] {
  color: var(--paper);
  background: var(--mark);
  border-color: var(--mark);
}
.home h1.vol-name {
  font-size: 1.35rem;
  margin: 0.1rem 0 0.35rem;
}
html[data-subset] .volumes,
html[data-subset-pending] .volumes,
html[data-subset] .about,
html[data-subset-pending] .about,
html[data-subset] .books-link,
html[data-subset-pending] .books-link,
html[data-subset] .vol-name,
html[data-subset-pending] .vol-name,
html[data-subset] .volume-shelf,
html[data-subset-pending] .volume-shelf,
html[data-subset] .library-count,
html[data-subset-pending] .library-count,
html[data-finding] .volume-shelf,
.volumes[hidden] { display: none; }
.library-count { margin: 0.1rem 0 0.35rem; }
.volume-shelf {
  list-style: none;
  margin: 0.55rem 0 1.2rem;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.volume-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "num titles"
    "num counts";
  column-gap: 0.85rem;
  row-gap: 0.12rem;
  align-items: center;
  min-height: 5.4rem;
  padding: 0.85rem 0.95rem;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--soft) 55%, transparent);
}
.volume-card:hover { border-color: color-mix(in srgb, var(--mark) 65%, var(--line)); }
.volume-card:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
.volume-card .num {
  grid-area: num;
  font-variant-numeric: tabular-nums;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
  color: var(--mark);
  min-width: 1.6rem;
  text-align: center;
}
.volume-card .titles { grid-area: titles; min-width: 0; }
.volume-card .titles .ta {
  display: block;
  font-family: "Noto Serif Tamil", serif;
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--ink);
}
.volume-card .counts {
  grid-area: counts;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.find {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--mark) 45%, var(--line));
  border-radius: 0.6rem;
  min-height: 48px;
  padding: 0 0.8rem;
  margin: 0.35rem 0 0.15rem;
  color: var(--muted);
}
.find input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  border-radius: 0;
}
.find input::placeholder { color: var(--muted); }
.find-icon { flex: 0 0 auto; }
.tertiary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0.45rem 0 0.2rem;
}
.tertiary a, .tertiary button {
  color: var(--mark);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.contents, .song-list { list-style: none; padding: 0; margin: 0.35rem 0 1.2rem; }
.contents li {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--line);
}
.contents li[hidden],
.share-shelf[hidden],
.find[hidden],
.tertiary[hidden],
#subset-empty[hidden],
#select-shown[hidden],
#start[hidden],
.volume-shelf[hidden],
.contents[hidden] { display: none !important; }
.pick {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}
.pick input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--mark);
}
html[data-subset] .pick { display: none; }
.contents li:has(input:checked) { background: color-mix(in srgb, var(--mark) 12%, transparent); }
.contents a.row {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  text-decoration: none;
  min-height: 58px;
  padding: 0.55rem 0;
}
.contents a.row > span { min-width: 0; }
.vn, .sn, .n-songs {
  font-variant-numeric: tabular-nums;
  color: var(--mark);
}
.n-songs { font-size: 1.02rem; }
.place {
  display: block;
  font-family: "Noto Serif Tamil", serif;
  font-size: 1.12rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.sub {
  display: block;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
  margin-top: 0.1rem;
}
html[data-subset-pending] .contents,
html[data-subset-pending] .tertiary,
html[data-subset-pending] #share-shelf { display: none; }
html[data-subset-pending] #where-label { visibility: hidden; }
.share-shelf {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(46rem, 100%);
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--shelf);
  border-top: 1px solid var(--line);
}
.share-count { margin: 0; color: var(--mark); }
.share-url {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  user-select: all;
}
.share-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.share-actions button {
  min-height: 44px;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mark) 65%, var(--line));
  background: transparent;
  color: var(--mark);
  cursor: pointer;
}
#copy-link {
  background: var(--mark);
  color: var(--paper);
  border-color: var(--mark);
}
body.has-share .wrap.home { padding-bottom: 12rem; }
#subset-empty { margin: 0.8rem 0 1rem; }
.all-link a { color: var(--mark); }
.all-link { margin: 0.8rem 0 0.2rem; }
.all-link a { text-decoration: none; }
.books-link { margin: 0 0 0.35rem; font-size: 0.95rem; }
.books-link a { color: var(--mark); text-decoration: none; display: inline-block; padding: 0.7rem 0.6rem 0.7rem 0; margin: -0.7rem 0; }
.books-link a:hover, .books-link a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.meta {
  display: grid;
  gap: 0.45rem;
  margin: 0.4rem 0 0.2rem;
  padding: 0;
}
.meta div {
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: baseline;
  margin: 0;
}
.meta dt { color: var(--mark); font-size: 0.95rem; line-height: 1.25; }
.meta dd {
  margin: 0;
  font-family: "Noto Serif Tamil", serif;
  font-size: 1.05rem;
}
.flag { margin: 0.55rem 0 0; }
.song-list a {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  min-height: 52px;
  padding: 0.45rem 0;
  text-decoration: none;
  border-top: 1px solid var(--line);
}
.song-list .sn { color: var(--muted); }
.song-list .line {
  font-family: "Noto Serif Tamil", serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.song-list .go { color: var(--muted); }
.badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}
.hub-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0.4rem 0 0.2rem;
  border-top: 1px solid var(--line);
}
.hub-pager a, .hub-pager .dead {
  min-height: 52px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--mark);
}
.hub-pager .next { justify-content: flex-end; border-left: 1px solid var(--line); }
/* The Tamil labels (முந்தைய / அடுத்த பதிகம்) stay on one line, with a little air at the divider. */
.hub-pager a, .hub-pager .dead { white-space: nowrap; }
.hub-pager .prev { padding-right: 0.5rem; }
.hub-pager .next { padding-left: 0.5rem; }
@media (max-width: 400px) {
  .hub-pager a, .hub-pager .dead { font-size: 0.94rem; }
}
.hub-pager .dead { color: var(--dead); }
.verse-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0.75rem 0 0.2rem;
}
.verse-scroll .card { scroll-margin-top: 4.25rem; }
.card {
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 1.05rem 0.95rem 1.15rem;
  background: color-mix(in srgb, var(--soft) 55%, transparent);
}
.card:target {
  border-color: color-mix(in srgb, var(--mark) 70%, var(--line));
}
.padal-no {
  margin: 0 0 0.45rem;
  text-align: center;
  font-family: "Source Serif 4", "Noto Serif Tamil", serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--mark);
  font-variant-numeric: tabular-nums;
}
.padal-no .badge {
  margin-left: 0.4rem;
  font-weight: 500;
  vertical-align: 0.05em;
}
.song-title, .kicker { overflow-wrap: anywhere; }
.kicker {
  margin: 0 0 0.55rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}
.prose {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}
/* Verse lines keep the source's form: each அடி is a unit, its second half sits on the next row
   indented, and a gap separates one அடி from the next. A half-line too long for the column wraps
   one step deeper than the second half, so a wrap never looks like the next half. */
div.verse, div.split {
  --hang: min(1.1em, 1.15rem);
  font-family: "Noto Serif Tamil", "Source Serif 4", serif;
  overflow-wrap: anywhere;
  text-align: start;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
div.verse .grp, div.split .grp, div.verse .adi, div.split .adi { display: block; }
div.verse .grp + .grp, div.split .grp + .grp { margin-top: 0.85em; }
div.verse .adi + .adi, div.split .adi + .adi { margin-top: 0.45em; }
div.verse .h, div.split .h {
  display: block;
  padding-left: calc(2 * var(--hang));
  text-indent: calc(-2 * var(--hang));
}
div.verse .h + .h, div.split .h + .h { text-indent: calc(-1 * var(--hang)); }
div.verse .note, div.split .note {
  font-size: 0.82em;
  color: var(--muted);
}
/* --read-scale is the header's text-size step (1 by default); it scales reading text only. */
.verse {
  font-weight: 500;
  font-size: calc(clamp(1.04rem, 2.4vw, 1.4rem) * var(--read-scale, 1));
  line-height: 1.6;
}
.split, .ta-body {
  font-family: "Noto Serif Tamil", serif;
  font-size: 1.05rem;
  line-height: 1.85;
  text-align: start;
}
div.split, .ta-body { font-size: calc(1.05rem * var(--read-scale, 1)); }
.layer { margin-top: 0.35rem; border-top: 1px solid var(--line); }
.layer:not([open]) > .body { display: none; }
.layer summary {
  cursor: pointer;
  padding: 0.7rem 0;
  min-height: 44px;
  color: var(--mark);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.layer summary::-webkit-details-marker { display: none; }
.layer summary::after {
  content: "Show";
  font-family: "Source Serif 4", serif;
  color: var(--muted);
  font-size: 0.92rem;
}
.layer[open] summary::after { content: "Hide"; }
html[data-layer-split="show"] .layer.split > .body { display: block; }
html[data-layer-split="show"] .layer.split summary::after { content: "Hide"; }
html[data-layer-urai="show"] .layer.meaning > .body { display: block; }
html[data-layer-urai="show"] .layer.meaning summary::after { content: "Hide"; }
.layer .body { padding: 0 0 0.8rem; }
/* பாராயணம்: read the சொற்பிரிப்பு as the verse; hide the original lines and உரை. */
html[data-parayanam="on"] .layer.meaning,
html[data-parayanam="on"] .card.has-split > .verse,
html[data-parayanam="on"] .card.has-split > .layer.split > summary,
html[data-parayanam="on"] .card.is-missing > .layer.split,
html[data-parayanam="on"] .more-panel [data-set-layer] { display: none; }
html[data-parayanam="on"] .card.has-split > .layer.split { border-top: 0; margin-top: 0; }
html[data-parayanam="on"] .card.has-split > .layer.split > .body { display: block; padding: 0; }
html[data-parayanam="on"] .card.has-split > .layer.split::details-content { content-visibility: visible; }
html[data-parayanam="on"] .card.has-split div.split {
  font-weight: 500;
  font-size: calc(clamp(1.04rem, 2.4vw, 1.4rem) * var(--read-scale, 1));
  line-height: 1.6;
}
.card.is-missing .verse {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--muted);
  font-weight: 400;
  text-align: start;
}
.missing { margin: 0 0 0.8rem; color: var(--mark); font-weight: 600; }
.gap { margin: 0.35rem 0 0; }
.cols { display: block; }
.shelf {
  position: fixed;
  z-index: 4;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(46rem, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--shelf);
  border-top: 1px solid var(--line);
}
.shelf a, .shelf .dead {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--mark);
}
.shelf .dead { color: var(--dead); }
.shelf .mid { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.mark:focus-visible,
.where-link:focus-visible,
.where summary:focus-visible,
.more summary:focus-visible,
.more-panel button:focus-visible,
.tools button:focus-visible,
.tertiary a:focus-visible,
.tertiary button:focus-visible,
.pick input:focus-visible,
.share-actions button:focus-visible,
.contents a:focus-visible,
.song-list a:focus-visible,
.shelf a:focus-visible,
.hub-pager a:focus-visible,
.find input:focus-visible,
.layer summary:focus-visible,
.about summary:focus-visible,
.volumes a:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .contents a.row {
    grid-template-columns: max-content minmax(0, 1fr) auto;
    column-gap: 0.4rem;
  }
}
@media (max-width: 520px) {
  .wrap { padding-left: 0.8rem; padding-right: 0.8rem; }
  /* On a phone the song is the page: no box around it, so a half-line gets the full column. */
  .verse-scroll { gap: 0; }
  .verse-scroll .card {
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    padding: 1.1rem 0 0.9rem;
  }
  .verse-scroll .card:target { border-top-color: var(--mark); }
  .verse-scroll .padal-no { text-align: start; }
  div.verse, div.split { margin-left: 0; }
}
/* Phones (up to 480px): the header keeps the brand and the tools; the where-chip (e.g. 1 · 1.001 · 11)
   is hidden because it cannot fit beside them. The page heading and back link carry the same place. */
@media (max-width: 480px) {
  .top { grid-template-columns: auto minmax(0, 1fr) auto; }
  .top > .where-link, .top > .where { display: none; }
}
@media (max-width: 380px) {
  .mark { font-size: 1.05rem; }
}
@media (min-width: 1000px) {
  body::before {
    background:
      radial-gradient(ellipse 22% 68% at -4% 44%, var(--glow-a-wide), transparent 70%),
      radial-gradient(ellipse 12% 40% at 106% 60%, var(--glow-b-wide), transparent 72%);
  }
  .verse { font-size: calc(1.4rem * var(--read-scale, 1)); line-height: 1.75; }
  html[data-parayanam="on"] .card.has-split div.split { font-size: calc(1.4rem * var(--read-scale, 1)); line-height: 1.75; }
}
.pathikam .card.is-missing {
  background: transparent;
}
.pathikam .card.is-missing .missing {
  color: var(--muted);
  font-weight: 500;
  text-align: center;
}
.pathikam .card.is-missing .verse { text-align: center; }