/* The Torah, verse by verse: the hub and one page per passage
   (tools/torah.mjs). Builds on guide.css; only the tokens from base.css, which
   already carry light and dark, and logical properties, so RTL needs nothing
   of its own. */

/* ---- Hub: the hero beside the app's reading screen ----------------------- */
/* The phone's width, its bezel and the space under the hero are guide.css's
   (.app-shot, .hub-top), the same on every hub. */
.torah-top .guide-hero { margin-bottom: 0; }
.torah-top .quoted { max-width: 29.5em; color: var(--ink-3); font-size: .95rem; line-height: 1.55; }
.torah-shot { margin: 0; display: grid; justify-items: center; }
.torah-shot .app-shot img { aspect-ratio: 780 / 1688; }
.torah-shot .shot-cap { text-align: center; }

.region h2 .book-alt { margin-inline-start: .4rem; font-family: var(--f-body); font-size: var(--step-1); font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.card .tag-line { margin-top: .2rem; }

/* ---- A passage ------------------------------------------------------------ */
/* The verse sections read as one run: a smaller heading than a guide's, the
   verse right under it. */
.v-sec h2 { font-size: var(--step-3); margin-bottom: .25rem; }
.v-sec .verse { margin-top: .75rem; }
.v-sec .verse-plain { font-size: var(--step-1); line-height: 1.5; }
.reg-note { margin-bottom: .25rem; font-size: .95rem; color: var(--ink-3); }
.take h3 { margin-top: 2rem; }

/* The words of a verse, a tap away. The list itself is guide.css's .gloss
   card, as on the story pages. */
.words { margin-top: 1rem; }
.words > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .5rem; padding: .35rem 0; font-weight: 700; color: var(--brand); }
.words > summary::-webkit-details-marker { display: none; }
/* The glyph is drawn, not read: its alt text is empty (details already says
   open or closed), with the plain form first for browsers without it. */
.words > summary::before { content: "+"; content: "+" / ""; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 999px; background: var(--brand-tint); font-size: .95rem; line-height: 1; }
.words[open] > summary::before { content: "−"; content: "−" / ""; }
.words > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.gloss .gl { display: grid; gap: .15rem; align-content: start; }
.gloss .tr { color: var(--ink-3); font-style: italic; font-size: .92rem; }
.gloss .mean { color: var(--ink); font-weight: 600; }
.gloss .note { color: var(--ink-2); font-size: .95rem; }
.gloss .root [lang="he"] { font-family: var(--f-display); font-size: 1rem; }

.see-all { max-width: 33.5em; }