/* Shared reader UI for the prayer pages (Chalisa, Bhimarupi): tokens, title, ways-in cards,
   Script choice and Show chips. Versioned by `npm run build:site`. */
:root {
  --ink: #2d1a0a;
  --ink-soft: #6b4f37;
  --accent: #87400d;
  --saffron: #ff8c00;
  --line: #dfc9a8;
  --cream: #fff8ec;
  --focus: #985016;
  --ui-font: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
h1#main-content { margin: 1.6rem 0 .25rem; padding: 0 16px; color: #542d14; font-weight: 600; font-size: clamp(30px, 6vw, 44px); line-height: 1.15; letter-spacing: -.01em; }
.hc-tagline { margin: 0 auto 1.1rem; padding: 0 16px; max-width: 560px; text-align: center; color: var(--ink-soft); font: italic 16px/1.5 'Noto Serif', Georgia, serif; text-shadow: none; text-wrap: balance; }

/* ── Ways in: Read · Recite · Play cards under the title ── */
.ways-in { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; max-width: 720px; margin: 0 auto 1.4rem; padding: 0 16px; box-sizing: border-box; text-shadow: none; }
.ways-in a { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 14px 16px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ways-in a:hover { border-color: var(--saffron); box-shadow: 0 4px 14px #87400d1a; transform: translateY(-1px); }
.ways-in a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ways-in .way-dev { font: 20px/1.3 'Noto Serif Devanagari', serif; color: var(--accent); }
.ways-in .way-title { display: flex; align-items: center; gap: 6px; font: 600 18px/1.3 'Noto Serif', Georgia, serif; }
.ways-in .way-text { font: 14px/1.45 var(--ui-font); color: var(--ink-soft); }
.ways-in .way-primary { background: linear-gradient(0deg, moccasin 0%, orange 50%, moccasin 100%); border: 0; border-left: 6px double orangered; border-right: 6px double orangered; }
.ways-in .way-primary .way-dev, .ways-in .way-primary .way-text { color: #5a2d00; }
.ways-in .way-primary:hover { box-shadow: 0 4px 16px #c2410c33; }
.way-play-icon { width: 14px; height: 14px; fill: currentColor; }
@media (max-width: 599px) {
  .ways-in { gap: 8px; }
  .ways-in a { padding: 10px 10px 12px; align-items: center; text-align: center; }
  .ways-in .way-title { font-size: 16px; }
  .ways-in .way-text { font-size: 13px; }
}
@media (max-width: 399px) { .ways-in .way-text { display: none; } }

/* ── Reader display chips (inputs keep their sibling structure for the ~ rules) ── */
.reader-show { display: inline-flex; align-items: center; min-height: 44px; margin-right: 4px; color: var(--ink-soft); font: 13px/1 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; text-shadow: none; }
.pure-g > input[type="checkbox"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
.pure-g > input[type="checkbox"] + label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 3px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink-soft); font: 14px/1 var(--ui-font); text-shadow: none; white-space: nowrap; cursor: pointer; user-select: none; transition: background .15s, border-color .15s, color .15s; }
.pure-g > input[type="checkbox"] + label::before { content: ""; width: 8px; height: 8px; border: 1.5px solid currentColor; border-radius: 50%; box-sizing: border-box; }
.pure-g > input[type="checkbox"]:not(:checked) + label { background: moccasin; border-color: #e7b46a; color: var(--ink); }
.pure-g > input[type="checkbox"]:not(:checked) + label::before { background: var(--accent); border-color: var(--accent); }
.pure-g > input[type="checkbox"] + label:hover { border-color: var(--saffron); }
.pure-g > input[type="checkbox"]:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.pure-g > input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
.pure-g > input[type="radio"] + label { display: inline-flex; align-items: center; min-height: 40px; margin: 3px 0; padding: 0 16px; border: 1px solid var(--line); background: white; color: var(--ink-soft); font: 14px/1 var(--ui-font); text-shadow: none; white-space: nowrap; cursor: pointer; user-select: none; transition: background .15s, color .15s; }
#script-both + label { margin-left: 3px; border-radius: 999px 0 0 999px; }
#script-dev + label { padding-top: 4px; border-left: 0; border-right: 0; font: 15px/1 'Noto Serif Devanagari', serif; }
#script-roman + label { margin-right: 3px; border-radius: 0 999px 999px 0; }
.pure-g > input[type="radio"] + label:hover { background: #fff5e3; }
.pure-g > input[type="radio"]:checked + label { background: moccasin; color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px #e7b46a; }
.pure-g > input[type="radio"]:focus-visible + label { position: relative; z-index: 1; outline: 3px solid var(--focus); outline-offset: 2px; }
.reader-break { flex-basis: 100%; height: 0; }
/* One script: hide the other and give the chosen one the full width and a larger size. */
#script-dev:checked ~ div.lit, #script-roman:checked ~ div.dev { display: none; }
#script-dev:checked ~ div.dev, #script-roman:checked ~ div.lit { width: 91.6667%; }
#script-dev:checked ~ div.dev { font-size: 135%; }
#script-roman:checked ~ div.lit { font-size: 122%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .ways-in a, .pure-g > input[type="checkbox"] + label, .pure-g > input[type="radio"] + label { transition: none; }
  .ways-in a:hover { transform: none; }
}
@media print {
  .hc-tagline, .ways-in, .reader-show, .reader-break, .pure-g > input + label { display: none !important; }
}

/* Story-game links: a quiet icon in the verse block's bottom-right corner, out of the reading line.
   Shown once per verse (Devanagari, or transliteration in Roman mode) and hidden while reciting. */
.dev, .lit { position: relative; }
.dev:has(.verse-activity-link), .lit:has(.verse-activity-link) { padding-bottom: 28px; }
.verse-activity-link { position: absolute; right: 4px; bottom: 4px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 18px; line-height: 1; text-decoration: none; text-shadow: none; opacity: .6; isolation: isolate; transition: opacity .15s; }
.verse-activity-link::before { content: ""; position: absolute; inset: 6px; border: 1px solid #87400d40; border-radius: 9px; background: #fff8ecb3; z-index: -1; }
.verse-activity-link:hover, .verse-activity-link:focus-visible { opacity: 1; }
.verse-activity-link:hover::before { border-color: #87400d99; }
.verse-activity-link:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; border-radius: 10px; }
.lit .verse-activity-link { display: none; }
#script-roman:checked ~ div.lit .verse-activity-link { display: inline-flex; }
body.reciting .verse-activity-link { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .verse-activity-link { transition: none; } }
@media print { .verse-activity-link { display: none !important; } }