/* MSP — Mobile Screen Protocol (rule 45; administrative/MSP.md) for SHABDA Books.
   Tokens and rules ported from Veekshaa veeksha-site/web/css/msp.css (PR 28, e4c466b); the selectors
   are the Books pages' own. In force when html has class "msp" (/books/msp.js): below 600 px, or at
   any width with Text size Large or above. Sizes are in rem, so the device's own font setting and the
   Text size switch both scale them; at 200% nothing is cut off. These tokens are the only place the
   MSP sizes are set. Body text 18 px at Normal (VKG 2026-11-07, MSP 9.2.2); Text size raises it to 20, 22, 24 px. */
:root {
  --msp-base: 1.125rem;     /* 18 px body text at Normal (MSP 9.2.2); Large 20, Larger 22, Largest 24 */
  --msp-min: 1.125rem;      /* 18 px: nothing on screen is smaller (3.1) */
  --msp-q: 1.65rem;         /* 26-28 px question titles (3.2) */
  --msp-tap: 3.5rem;        /* 56 px tap targets (4.1) */
  --msp-gap: .75rem;        /* 12 px between tappable items (4.2) */
}

.msp-chrome { display: none; }
html.msp .msp-chrome { display: block; }
html.msp .msp-top { display: flex; }
.msp-chrome[hidden], html.msp .msp-chrome[hidden] { display: none; }

html.msp body { font-size: var(--msp-base); line-height: 1.55; }
html.msp { --muted: #4a4034; }   /* 9:1 on the parchment: hint text meets 7:1 (MSP 6.1) */
html.msp h1 { font-size: var(--msp-q); }
html.msp h2 { font-size: 1.4rem; }
html.msp h3, html.msp h4 { font-size: 1.2rem; }

/* Nothing below 18 px (3.1): every class the desktop sets smaller is lifted to the floor. */
html.msp :is(.meta, .note, nav.crumbs, nav.crumbs a, .signin-link, .menu, .price, .tag, .cover .cs, .donate-line,
  .rd-note, .rd-bar .rd-note, .entry-link, .entry-ref, .entry-speaker, .toc li, .credits, .rd-settings, .marks .m, .ann h3,
  .seg h3, .seg .srctag, .seg-btn, .tabs button, aside.chapters, .btn, label, legend, small, .sl-lead, .sl-row label,
  .sl-kinds, .sl-kinds legend, .sl-msg, .pub-dl, .continue, .offers, .lang-line, .tr-note, #script-set .seg-btn,
  .msp-count, .msp-answer-q, .err, .state) { font-size: var(--msp-min); }
html.msp .msp-answer-a { font-size: 1.35rem; }

/* Every tappable item 56 px or taller (4.1), 12 px apart (4.2). */
html.msp :is(.btn, .seg-btn, .tabs button, aside.chapters button, .avatar, .signin-link, nav.crumbs a, .menu a, .star,
  .rd-bar button, .msp-answer, .sl-kinds label) { min-height: var(--msp-tap); }
html.msp :is(.btn, .signin-link, nav.crumbs a, .menu a, .seg-btn, .tabs button) { display: inline-flex; align-items: center; justify-content: center; }
html.msp .menu a { display: flex; justify-content: flex-start; }
html.msp :is(input:not([type=radio]):not([type=checkbox]), select, textarea) { min-height: var(--msp-tap); font-size: var(--msp-base); padding: 12px; width: 100%; }
html.msp input[type=radio], html.msp input[type=checkbox] { width: 1.6rem; height: 1.6rem; }
html.msp form label:has(input[type=radio]), html.msp form label:has(input[type=checkbox]) { display: flex; align-items: center; gap: .6rem; min-height: var(--msp-tap); }
html.msp .avatar { width: var(--msp-tap); height: var(--msp-tap); font-size: 1.25rem; }
html.msp .star { min-width: var(--msp-tap); }
html.msp .rd-bar button { width: var(--msp-tap); height: var(--msp-tap); }
html.msp :is(.rd-settings .grp, .tabs, nav.crumbs, .sl-kinds) { gap: var(--msp-gap); }

/* No swipe-only strips (4.4): tabs wrap into a row of buttons, all in view. */
html.msp .tabs { flex-wrap: wrap; border: 0; }
html.msp .tabs button { border: 1px solid var(--line); border-radius: 8px; }
html.msp .tabs button.on { background: var(--maroon); color: #fff; }

/* Header: the person stays at the top (8.4), wrapping rather than clipping. */
html.msp header.top { flex-wrap: wrap; padding: 8px 16px; }
html.msp header.top .brand b { font-size: var(--msp-base); }
html.msp nav.crumbs { flex-wrap: wrap; }
html.msp .menu { min-width: min(18rem, 90vw); }

/* One column (8.1). A shelf card lies flat: a small cover beside its words. */
html.msp main { padding-left: 16px; padding-right: 16px; }
html.msp :is(.reader, .bookhead, .continue, .rd-settings, .pub-dl, .pub-person, .pub-date) { grid-template-columns: 1fr !important; }
html.msp .shelf { grid-template-columns: 1fr; gap: var(--msp-gap); }
html.msp .shelf .card { flex-direction: row; min-height: var(--msp-tap); }
html.msp .shelf .card .cover { width: 6.5rem; flex: none; aspect-ratio: 2/3; padding: .4rem; }
html.msp .shelf .card .cover .ct { font-size: var(--msp-min); }
html.msp .shelf .card .cover .cs { display: none; }
html.msp .shelf .card .body { justify-content: center; }
html.msp .bookhead .cover { max-width: 12rem; }
html.msp .toc { columns: 1; }
html.msp aside.chapters { max-height: 50vh; }
html.msp aside.chapters button { padding: .5rem .6rem; }
html.msp .sl-row { flex-direction: column; align-items: stretch; }
html.msp .sl-row label { flex: 1 1 auto; }
html.msp :is(p, li, .card, .note, .entry-link, .lang-line) { overflow-wrap: anywhere; }
html.msp .lang-line .btn { margin-top: .4rem; }

/* ── The step flow (ShabdaMsp.steps) ── */
.msp-top { align-items: center; justify-content: space-between; gap: var(--msp-gap); margin-bottom: .4rem; }
.msp-count { color: var(--muted); }
.msp-q { font-size: var(--msp-q); line-height: 1.25; margin: 4px 0 10px; outline: none; }
.msp-err { color: var(--err); }
.msp-foot { margin-top: 12px; }
.msp-foot > * + * { margin-top: var(--msp-gap); }
html.msp .msp-foot .btn, html.msp .msp-form.msp-at-review button[type=submit] { display: flex; width: 100%; font-size: 1.3rem; min-height: 4rem; }
.msp-answer { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; margin: 0 0 var(--msp-gap);
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; }
.msp-answer-q { color: var(--muted); }
.msp-answer-a { overflow-wrap: anywhere; }
html.msp .msp-form .msp-off { display: none !important; }
html.msp .msp-form:not(.msp-at-review) button[type=submit] { display: none; }

@media (prefers-reduced-motion: reduce) { html.msp * { transition: none !important; animation: none !important; } }

/* The Text size switch in the header (every width). */
.who { display: flex; align-items: center; gap: .5rem; }
.ts-btn { white-space: nowrap; }
.ts-menu { top: 100%; }
.ts-row { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }

/* Fixes found by the guard (test/books/msp-guard.mjs), 2026-11-07. */
html.msp [data-shabda-credit] { font-size: var(--msp-min) !important; opacity: 1 !important; }   /* the shared credit line sets 12 px inline */
html.msp header.top .brand { min-height: var(--msp-tap); align-items: center; }
html.msp summary { min-height: var(--msp-tap); display: flex; align-items: center; cursor: pointer; }
html.msp main a:not(:is(p, li, td, dd) a):not(.card):not(.btn) { display: inline-flex; align-items: center; min-height: var(--msp-tap); }
html.msp :is(.prose, .page .text.prose) { font-size: calc(var(--msp-base) * var(--scale, 1)); }
html.msp .rd-bar { flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 16px); width: max-content; }
html.msp .rd-bar button { font-size: var(--msp-min); }
html.msp .reader > * { min-width: 0; }
html.msp aside.chapters, html.msp aside.chapters * { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
html.msp .rd-head { display: flex; flex-wrap: wrap; gap: var(--msp-gap); }
html.msp .rd-head > * { min-width: 0; max-width: 100%; }
html.msp .pager { flex-wrap: wrap; gap: var(--msp-gap); }
html.msp .pager .btn { flex: 1 1 100%; white-space: normal; }
html.msp .msp-foot [hidden], html.msp .msp-top [hidden] { display: none !important; }