/* Resources (resources.php): the home, search, a work's A–Z, an article. As the lexicon's pages. */
.rs { max-width: 46rem; margin: 0 auto; padding: 1rem 1rem 3rem; line-height: 1.55; }
.rs-search { display: flex; gap: .5rem; margin-bottom: 1.2rem; }
.rs-search input { flex: 1; min-width: 0; font: inherit; padding: .55rem .75rem; border: 1px solid var(--field-edge); border-radius: 10px; background: var(--bg); color: inherit; }
.rs-search button { flex: none; align-self: center; padding: .35rem .85rem; font-size: .92rem; line-height: 1.3; }   /* (not the box's full height: Larry, 2026-10-06) */
.rs-within { margin: .6rem 0 .8rem; }
.rs-h { font-size: 1.3rem; margin: 0 0 .8rem; }
.rs-h2 { font-size: 1.05rem; margin: 1.4rem 0 .5rem; }
.rs-dim { color: var(--muted); font-weight: 400; font-size: .9em; }
.rs-card { margin: 0 0 1rem; padding: .9rem 1rem; border: 1px solid var(--divider); border-radius: var(--radius); }
.rs-card h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.rs-card p { margin: .3rem 0; }
.rs-card a, .rs-list a, .rs-more a, .rs-steps a, .rs-work a { color: var(--link); text-decoration: none; }
.rs-card a:hover, .rs-list a:hover, .rs-more a:hover, .rs-steps a:hover { text-decoration: underline; }
.rs-results { list-style: none; padding: 0; margin: 0; }
.rs-results li a { display: flex; align-items: baseline; gap: .2rem .6rem; padding: .55rem .6rem; border-radius: 8px; color: inherit; text-decoration: none; flex-wrap: wrap; }
.rs-results li a:hover { background: var(--halo); }
.rs-t { font-weight: 600; }
.rs-tag { font-size: .75rem; padding: .05rem .4rem; border: 1px solid var(--divider); border-radius: 5px; color: var(--muted); }
/* A result row (R13): the heading, then its works' small names, each its own link. */
.rs-row { padding: .45rem .6rem .55rem; border-radius: 8px; }
.rs-row:hover { background: var(--halo); }
.rs-results li a.rs-row-main { padding: 0; display: flex; flex-wrap: wrap; gap: .1rem .6rem; }
.rs-results li a.rs-row-main:hover { background: none; }
.rs-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
a.rs-tag, .rs-results li a.rs-tag { display: inline-block; color: var(--link); text-decoration: none; border-radius: 4px; padding: .12rem .45rem; font-size: .78rem; line-height: 1.4; }
a.rs-tag:hover, .rs-results li a.rs-tag:hover { background: var(--halo); }
a.rs-tag[aria-current], .rs-results li a.rs-tag[aria-current] { background: var(--selected); border-color: var(--selected); color: var(--selected-ink); }
/* A heading's page (R8, R12): its kinds as tabs, the kind's works as tags with ‹ › together on their
   line (DESIGN.md §5a), the article beneath. */
.rs-kinds { display: flex; gap: 1.1rem; border-bottom: 1px solid var(--divider); margin: .4rem 0 .6rem; overflow-x: auto; }
.rs-kinds a { padding: .45rem 0; color: inherit; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; font-size: .95rem; }
.rs-kinds a[aria-current] { border-bottom-color: var(--selected); font-weight: 600; }
.rs-tagline { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; }
.rs-tagline .rs-tags { flex: 1; margin: 0; }
.rs-arrows { flex: none; display: flex; align-items: center; gap: .35rem; font-size: .8rem; }
.rs-arrows a, .rs-arrows > span[aria-hidden] { min-width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; font-size: 1.4rem; text-decoration: none; color: var(--link); }
.rs-arrows a:hover { background: var(--halo); }
.rs-arrows > span[aria-hidden] { color: var(--divider); }
.rs-desc { flex-basis: 100%; color: var(--muted); font-size: .9rem; }
.rs-az { display: flex; flex-wrap: wrap; gap: 4px; margin: .4rem 0 .8rem; }
.rs-az a { min-width: 1.8rem; height: 1.9rem; display: grid; place-items: center; border-radius: 6px; background: var(--halo); color: inherit; text-decoration: none; font-size: .9rem; }
.rs-az a[aria-current] { background: var(--selected); color: var(--selected-ink); }
.rs-list { list-style: none; padding: 0; margin: 0; columns: 2 14rem; column-gap: 1.5rem; }
.rs-list li { padding: .12rem 0; break-inside: avoid; }
.rs-list a.rs-stub { color: var(--muted); }
/* An article: the encyclopedia's own words, set as the reader sets the commentary. */
.rs-entry h1 { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-weight: 400; font-size: 1.9rem; margin: .1rem 0 .3rem; }
.rs-work { margin: 0; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rs-body { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-size: 1.08rem; line-height: 1.65; }
.rs-body p { margin: 0 0 .8rem; }
/* Nave's and Torrey's levels: a subject's parts, and their parts, stepped in. */
.rs-body p.r-i1, .rs-body p.r-i2, .rs-body p.r-i3 { margin: 0 0 .45rem; font-size: 1rem; }
.rs-body p.r-i2 { padding-left: 1rem; }
.rs-body p.r-i3 { padding-left: 2rem; }
.rs-body h3 { font-size: 1rem; font-weight: 600; letter-spacing: .02em; margin: 1.3rem 0 .5rem; }
.rs-body a.r-ref, .rs-body a.r-entry { color: var(--link); text-decoration: none; }
.rs-body a:hover { text-decoration: underline; }
/* A character Webster's transcription leaves out (card #346): a quiet "?" that says so when pointed at. */
.rs-body .r-unk { color: var(--muted); cursor: help; }
.rs-steps { display: flex; justify-content: space-between; gap: 1rem; margin: 1.6rem 0 0; font-size: .95rem; }
.rs-credit { margin-top: 2rem; padding-top: .7rem; border-top: 1px solid var(--divider); font-size: .75rem; color: var(--muted); line-height: 1.5; }
.rs-credit a { color: inherit; }
/* Tap targets at least 44px tall on a phone (DESIGN.md, 5): the small tags keep their look, with an
   unseen margin that takes the tap; the tabs, arrows and letters are that size outright. */
a.rs-tag { position: relative; }
a.rs-tag::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 44px; transform: translateY(-50%); }
.rs-tags { row-gap: .7rem; }
.rs-kinds a { min-height: 44px; display: flex; align-items: center; box-sizing: border-box; padding: 0; }
.rs-arrows a, .rs-arrows > span[aria-hidden] { min-width: 44px; height: 44px; }
.rs-az a { min-width: 44px; height: 44px; }
.rs-steps a { display: inline-flex; align-items: center; min-height: 44px; }
@media (pointer: coarse) {
  .rs-list li { padding: 0; }
  .rs-list li a { display: flex; align-items: center; min-height: 44px; }
  .rs-card p > a:first-child, .rs-more a, .rs-work a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Book introductions (R3): every book a small button, in the Bible's order; a book with no
   introduction of its own looks for its articles instead. */
.rs-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: 4px; }
.rs-books a { min-height: 44px; display: grid; place-items: center; border-radius: 6px; background: var(--halo); color: inherit; text-decoration: none; font-size: .82rem; }
.rs-books a.rs-book-none { color: var(--muted); }
.rs-body .r-intro-title { font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.rs-also { margin: .4rem 0 1.2rem; padding: .2rem .6rem .4rem; border: 1px solid var(--divider); border-radius: var(--radius); }
.rs-also .rs-h2 { margin: .6rem 0 .2rem; font-size: .95rem; }
/* The Apocrypha, between the Testaments as in the KJV: one button that opens to their books, inline
   in the grid (R3). */
.rs-apoc { display: contents; }
.rs-apoc summary { min-height: 44px; display: grid; place-items: center; border-radius: 6px; border: 1px dashed var(--divider); font-size: .78rem; color: var(--muted); cursor: pointer; list-style: none; grid-column: span 2; }
.rs-apoc summary::-webkit-details-marker { display: none; }
.rs-apoc[open] summary { color: inherit; border-style: solid; }
.rs-apoc-in { display: contents; }
.rs-apoc-in a { background: transparent; border: 1px solid var(--divider); }
.rs-apoc:not([open]) .rs-apoc-in { display: none; }
.rs-books-all h1 { font-size: 1.4rem; margin: .2rem 0 .8rem; }
/* The home (R14): one column on a phone; two on a wide screen (R19), the books and the index across both. */
.rs-home { display: grid; gap: 0 1rem; }
@media (min-width: 900px) {
  .rs { max-width: 54rem; }          /* (narrower: "it looks fat", Larry, 2026-10-06; was 62rem) */
  .rs-search { max-width: 36rem; margin-left: auto; margin-right: auto; }   /* (not the full width on a desktop) */
  .rs-card .rs-search { margin-left: 0; }   /* (in a card: flush with the card's text, as the others; Larry, 2026-10-06) */
  .rs-home { grid-template-columns: 1fr 1fr; align-items: start; }
  .rs-home .rs-wide { grid-column: 1 / -1; }
}
.rs-card .rs-dim a, .rs-h2-link { color: inherit; text-decoration: none; }
.rs-h2-link:hover { color: var(--link); }
.rs-card p a { color: var(--link); text-decoration: none; }
.rs-ext { margin-top: .2rem; }
.rs-index { columns: 3 12rem; }
/* The works named in a card, the index's heading and a work's "Search all the resources": 44px to the finger on a
   phone, unseen. */
.rs-card p a, a.rs-h2-link, .rs-scope a { position: relative; }
.rs-card p a::after, a.rs-h2-link::after, .rs-scope a::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 44px; transform: translateY(-50%); }
.rs-card p { line-height: 2.2; }
.rs-card p.rs-dim { line-height: 1.45; margin: .6rem 0 .45rem; }   /* (a plain line of words: no tap targets to space out) */
/* Chrome gives a details element a box for its content even when it is closed (::details-content),
   and in the books grid that box took a cell: a gap after "Apocrypha". */
.rs-apoc::details-content { display: contents; }
.rs-apoc:not([open])::details-content { display: none; }
/* The home's two columns need more than the site's page width (R19). */
@media (min-width: 900px) { .page:has(.rs-home), main:has(.rs-home) { max-width: 56rem; } }
/* Maps (R4, R5): their small pictures, a pin on the place; a map, zoomable, its places beneath. */
.rs-mlist, .rs-mthumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .8rem; margin: .4rem 0 1rem; }
.rs-mthumb { display: block; color: inherit; text-decoration: none; border-radius: 10px; }
.rs-mthumb:hover .rs-mthumb-t { color: var(--link); }
.rs-mthumb-img { position: relative; display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--divider); }
.rs-mthumb-img img { display: block; width: 100%; height: auto; }
.rs-mpin { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #e0242c; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 0 7px rgba(224,36,44,.25); /* design-ok: same-both-themes */ }
.rs-mthumb-t { display: block; font-size: .85rem; margin-top: .3rem; line-height: 1.35; }
.rs-map-wrap { position: relative; }
.rs-map-view { width: 100%; height: min(72dvh, 52rem); background: #e9e4d6; border-radius: 10px; border: 1px solid var(--divider); /* design-ok: same-both-themes */ }
.rs-map-tools { position: absolute; z-index: 2; right: .5rem; top: .5rem; display: flex; flex-direction: column; gap: 4px; }
.rs-map-tools button { display: grid; place-items: center; padding: 0; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--divider); background: var(--bg); color: var(--text); font-size: 1.3rem; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.rs-map-pin { width: 22px; height: 22px; border-radius: 50%; background: #e0242c; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 0 12px rgba(224,36,44,.25); pointer-events: none; /* design-ok: same-both-themes */ }
.rs-map-filter { width: 100%; box-sizing: border-box; font: inherit; padding: .55rem .75rem; border: 1px solid var(--field-edge); border-radius: 10px; background: var(--bg); color: inherit; margin: .3rem 0 .6rem; }
.rs-map-places a[aria-current] { font-weight: 700; background: var(--chosen); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }   /* the chosen item (card #343) */
.rs-place { margin: 0 0 1rem; }
/* A heading's kinds wrap rather than run off a phone's edge (four with the Maps). */
.rs-kinds { flex-wrap: wrap; column-gap: 1.1rem; row-gap: 0; overflow-x: visible; }
/* A kind's count, set off from its name (Larry, 2026-10-05: "the lack of padding around the #"). */
.rs-kinds a .rs-dim { margin-left: .35rem; font-size: .85em; }
/* ‹ › louder, still quiet (Larry, 2026-10-05: "so people understand how that works"): round
   buttons tinted with the accent, the count between them. */
.rs-arrows { gap: .5rem; }
.rs-arrows a, .rs-arrows > span[aria-hidden] { min-width: 44px; height: 44px; width: 44px; font-size: 1.6rem; font-weight: 600; line-height: 1;
  background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent);
  padding-bottom: 3px; box-sizing: border-box; position: relative; }
.rs-arrows a::after { content: ""; position: absolute; inset: -3px; }
.rs-arrows a:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.rs-arrows a:active { transform: scale(.94); }
.rs-arrows > span[aria-hidden] { background: none; border-color: var(--divider); color: var(--divider); }
.rs-arrows .rs-dim { min-width: 3.4rem; text-align: center; }
/* Searching the maps (R19): on a wide screen the places at the left, the chosen one's map beside them;
   on a phone the list, with each place's small maps. */
.rs-mapsearch-view { display: none; }
.rs-place-refs { font-size: .88rem; margin: -.2rem 0 .5rem; }
.rs-place-refs a, .rs-place-pick { color: var(--link); text-decoration: none; }
@media (min-width: 900px) {
  .page:has(.rs-mapsearch.rs-has-map) { max-width: 72rem; }
  .rs-mapsearch.rs-has-map { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
  .rs-has-map .rs-mapsearch-view { display: block; position: sticky; top: 1rem; }
  .rs-has-map .rs-mapsearch-view .rs-map-view { height: min(78vh, 46rem); }
  .rs-has-map .rs-place .rs-mthumbs { display: none; }
  .rs-place { padding: .4rem .7rem; border-radius: 10px; }
  .rs-place-on { background: var(--halo); }
}
/* The pager (design 1, "One bar"): one rounded bar, ‹ and › its two ends, the kind's works between;
   the current work filled with the accent. A kind with many works scrolls inside the bar. */
.rs-pager { display: flex; align-items: stretch; min-height: 46px; margin: .2rem 0 .3rem; border-radius: 23px;
  background: color-mix(in srgb, var(--accent) 7%, var(--bg)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--divider)); overflow: hidden; }
.rs-pager .rs-pg-end { flex: none; width: 52px; display: grid; place-items: center; font-size: 1.7rem; font-weight: 700; line-height: 1;
  text-decoration: none; padding-bottom: 3px; box-sizing: border-box;
  background: color-mix(in srgb, var(--accent) 15%, var(--bg)); color: var(--accent); }
.rs-pager a.rs-pg-end:hover { background: color-mix(in srgb, var(--accent) 34%, var(--bg)); /* design-ok: filled-hover */ }
.rs-pager a.rs-pg-end:active { background: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.rs-pager .rs-pg-end:first-child { border-right: 1px solid color-mix(in srgb, var(--accent) 30%, var(--divider)); }
.rs-pager .rs-pg-end:last-child { border-left: 1px solid color-mix(in srgb, var(--accent) 30%, var(--divider)); }
.rs-pager span.rs-pg-end { background: transparent; color: var(--divider); }
.rs-pager .rs-tags { flex: 1; min-width: 0; margin: 0; padding: 0 6px; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.rs-pager .rs-tags::-webkit-scrollbar { display: none; }
.rs-pager a.rs-tag { flex: none; border: 0; border-radius: 16px; padding: 7px 12px; font-size: .88rem; white-space: nowrap; color: var(--accent); background: none; }
.rs-pager a.rs-tag:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rs-pager a.rs-tag[aria-current] { background: var(--selected); color: var(--selected-ink); font-weight: 600; }
.rs-pg-count { text-align: center; font-size: .82rem; color: var(--muted); margin: 0 0 1rem; }
@media (max-width: 480px) { .rs-kinds { column-gap: .85rem; } .rs-kinds a { font-size: .9rem; } }
.rs-pager .rs-tags { gap: 2px; padding: 0 4px; }
.rs-pager a.rs-tag { padding: 7px 10px; }
@media (max-width: 480px) { .rs-pager .rs-pg-end { width: 46px; } .rs-pager a.rs-tag { padding: 7px 8px; font-size: .85rem; } }
/* The kinds' names shortened where four tabs wouldn't fit one line (a very narrow phone). */
.rs-kinds .rs-k-short { display: none; }   /* (two classes: app.css's span[data-t] would otherwise show it, card #434) */
/* Short names when the long ones don't fit one line (measured: rsFitKinds in resources.js and bible.js). */
.rs-kinds.rs-short .rs-k-long { display: none; }
.rs-kinds.rs-short .rs-k-short { display: inline-flex; }
.rs-kinds.rs-short { column-gap: .6rem; }
.rs-kinds.rs-short a { font-size: .86rem; }
.rs-kinds.rs-short a .rs-dim { margin-left: .2rem; }
/* The pager's works centered in the bar (auto margins, not justify-content, so an overflowing row still scrolls to its start). */
.rs-pager a.rs-tag:first-child { margin-left: auto; }
.rs-pager a.rs-tag:last-child { margin-right: auto; }
/* A place's maps of other periods (R20), folded under the passage's own. */
.rs-mmore { margin-top: 1.2rem; }
.rs-mmore summary { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: .4rem; border-radius: 6px; border: 1px dashed var(--divider); font-size: .9rem; color: var(--muted); cursor: pointer; list-style: none; }
.rs-mmore summary::-webkit-details-marker { display: none; }
.rs-mmore summary:hover { background: var(--halo); }
.rs-mmore[open] summary { color: inherit; border-style: solid; }
/* ✕ at the top right of a Resources page on a phone (Larry, 2026-10-05: "a close button for resources on the phone"),
   as the reader's sheet has; the first thing on the page makes room for it. */
.rs { position: relative; }
.rs-close { display: none; }
@media (max-width: 760px) {
  /* On its own line above the search, at the right, so the search box has the full width (Larry, 2026-10-06). */
  .rs-close { display: grid; place-items: center; width: max-content; margin: -.4rem -.4rem .2rem auto;
    color: var(--muted); text-decoration: none; }   /* (its size: the shared ✕ rule, app.css) */
  html .rs .rs-close { display: grid; }   /* (block, so "auto" puts it right: the shared ✕ rule makes it inline-grid) */
  .rs-close:hover { background: var(--halo); color: inherit; }
}
.rs-mplace { font-weight: 600; margin: .2rem 0 .6rem; }
.rs-mplace .rs-map-date { font-weight: 400; }
/* The pin on and off. */
.rs-map-pin.rs-pin-hidden { visibility: hidden; }
.rs-pin-toggle svg { display: block; margin: auto; }
.rs-pin-toggle .rs-pin-ring { fill: none; stroke: currentColor; stroke-width: 1.8; }
.rs-pin-toggle .rs-pin-dot { fill: #d22; /* design-ok: same-both-themes */ }
.rs-pin-toggle[aria-pressed="false"] .rs-pin-dot { fill: none; stroke: currentColor; stroke-width: 1.8; }
/* Choosing resources (R21). */
.rs-choose h2.rs-choose-k { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1.1rem 0 .3rem; font-weight: 600; }
.rs-choose-list { display: flex; flex-direction: column; }
.rs-choose-w { display: flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; border-radius: 6px; padding: 0 .3rem; }
.rs-choose-w:hover { background: var(--halo); }
.rs-choose-w input { width: 1.1rem; height: 1.1rem; flex: none; }
.rs-choose-acts { display: flex; gap: .6rem; justify-content: flex-end; margin: 1.2rem 0 .5rem; }
.rs-choose-acts button { min-height: 44px; padding: 0 1rem; }
/* The cross-reference chooser (card #280): each list's name with a line about it, then how they differ, an example,
   and the figures, whose table scrolls inside its box on a narrow phone rather than the page. */
.rs-xchoose-w { align-items: flex-start; padding: .55rem .3rem; line-height: 1.4; }
.rs-xchoose-w input { margin-top: .2rem; }
.rs-xapart { margin: .3rem 0; padding-left: 1.2rem; }
.rs-xapart li { margin: .35rem 0; line-height: 1.45; }
.rs-xverse { margin: .3rem 0 .5rem; font-style: italic; }
.rs-xex { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .3rem .8rem; }
.rs-xex dt { font-weight: 600; }
.rs-xex dd { margin: 0; }
.rs-xstats-wrap { overflow-x: auto; }
.rs-xstats { border-collapse: collapse; font-size: .85rem; width: 100%; }
.rs-xstats th, .rs-xstats td { padding: .35rem .4rem; border-bottom: 1px solid var(--divider); vertical-align: top; }
.rs-xstats thead th { font-weight: 600; text-align: right; }
.rs-xstats thead th:first-child { text-align: left; font-weight: 400; }
.rs-xstats tbody th { text-align: left; font-weight: 400; }
.rs-xstats td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* On a phone, each measure's name on a line of its own above its four figures, so all four columns fit. */
@media (max-width: 560px) {
  .rs-xstats tr { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--divider); }
  .rs-xstats th, .rs-xstats td { border-bottom: 0; }
  .rs-xstats thead th:first-child, .rs-xstats tbody th { grid-column: 1 / -1; padding-bottom: 0; }
  .rs-xstats thead th:first-child { display: none; }
}
.rs-xnote { font-size: .8rem; margin: .5rem 0 1rem; }
.rs-choose-link { margin: 1rem 0 0; font-size: .9rem; }
.rs-choose-link a { color: var(--link); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.rs-choose-link a:hover { text-decoration: underline; }
/* On a wide screen the reader's side panel (bible.css), the page moved left to make room, as the reader's text is. */
@media (min-width: 1100px) {
  body:has(.b-sheet.b-res) main { margin-right: var(--b-side); }
  html:has(.b-sheet.b-res) { scrollbar-width: none; }               /* (no page scrollbar beside the panel) */
  html:has(.b-sheet.b-res)::-webkit-scrollbar { display: none; }
}
/* The page's ✕ is for a phone only (no Back button there); on a wide screen the bar's ‹ does it. (html: over the
   shared ✕ rule's display.) */
@media (min-width: 761px) { html body .rs-close { display: none; } }
/* The ruler over a map (the scale): miles in near-black and white, kilometers in black and white (Larry, 2026-10-05:
   "darker, gray, closer to black … alternating black and white areas for the kilometers"), hatched, its ends draggable. */
.rs-ruler { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; border-radius: inherit; z-index: 1; }
.rs-ruler[hidden] { display: none; }
.rs-ruler-bar { fill: #fff; /* design-ok: same-both-themes */ }
.rs-ruler-a { fill: #2e2e2e; /* design-ok: same-both-themes */ }
.rs-ruler-b { fill: #fff; /* design-ok: same-both-themes */ }
.rs-ruler-c { fill: #000; /* design-ok: same-both-themes */ }
.rs-ruler-edge { fill: none; stroke: #111; stroke-width: 1; /* design-ok: drawing */ /* design-ok: same-both-themes */ }
.rs-ruler-tick { stroke: #111; stroke-width: 1; /* design-ok: drawing */ /* design-ok: same-both-themes */ }
/* The engraver's italic of the atlases' own scales (Larry, 2026-10-05: "that very cool old font"): IM FELL English
   Italic, Igino Marini's Fell types (SIL Open Font License), cut down to figures and letters. */
@font-face { font-family: "IM Fell English"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/IMFellEnglish-Italic.woff2") format("woff2"); }
.rs-ruler-t, .rs-ruler-n { font-family: "IM Fell English", Georgia, serif; font-style: italic; fill: #1a1a1a; paint-order: stroke; stroke: rgba(255,255,255,.92); stroke-width: 3px; stroke-linejoin: round; /* design-ok: drawing */ /* design-ok: same-both-themes */ }
.rs-ruler-t { font-size: 17px; /* design-ok: px-map */ }
.rs-ruler-n { font-size: 13px; /* design-ok: px-map */ }
.rs-ruler-grip { stroke: transparent; stroke-width: 28; pointer-events: stroke; cursor: grab; touch-action: none; /* design-ok: drawing */ }
.rs-ruler-end { fill: rgba(255,255,255,.92); stroke: #222; stroke-width: 2.5; pointer-events: all; cursor: grab; touch-action: none; /* design-ok: drawing */ /* design-ok: same-both-themes */ }
.rs-ruler-endhit { fill: transparent; stroke: none; pointer-events: all; cursor: grab; touch-action: none; }
.rs-ruler-dragging .rs-ruler-grip, .rs-ruler-dragging .rs-ruler-end, .rs-ruler-dragging .rs-ruler-endhit { cursor: grabbing; }
.rs-ruler-toggle svg { display: block; margin: auto; }
.rs-ruler-toggle .rs-rt-body { fill: none; stroke: currentColor; stroke-width: 1.8; }
.rs-ruler-toggle .rs-rt-ticks { stroke: currentColor; stroke-width: 1.8; }
.rs-ruler-toggle[aria-pressed="true"] .rs-rt-body { fill: #8c8c8c; stroke: #5a5a5a; /* design-ok: same-both-themes */ }
.rs-ruler-toggle[aria-pressed="true"] .rs-rt-ticks { stroke: #fff; /* design-ok: same-both-themes */ }
.rs-map-tools button[hidden] { display: none; }
.rs-map-tools button:hover { --ib-halo: var(--halo); }
/* Full screen (Larry, 2026-10-14): the browser's own, or, where there is none (an iPhone), the whole window. */
.rs-map-wrap:fullscreen, .rs-map-wrap.rs-full { background: #e9e4d6; /* design-ok: same-both-themes */ }
.rs-map-wrap:-webkit-full-screen { background: #e9e4d6; /* design-ok: same-both-themes */ }
.rs-map-wrap.rs-full { position: fixed; inset: 0; z-index: 50; }
.rs-map-wrap:fullscreen .rs-map-view, .rs-map-wrap.rs-full .rs-map-view { height: 100%; border: 0; border-radius: 0; }
.rs-map-wrap:-webkit-full-screen .rs-map-view { height: 100%; border: 0; border-radius: 0; }   /* (apart: a browser that doesn't know a selector drops its whole rule) */
.rs-map-wrap.rs-full .rs-map-tools { top: calc(.5rem + env(safe-area-inset-top)); right: calc(.5rem + env(safe-area-inset-right)); }
html.rs-full-on, html.rs-full-on body { overflow: hidden; }
/* A map's page: the place large, the map it's on beneath, smaller (Larry, 2026-10-05). */
.rs-map-h { font-size: 1.6rem; margin: 0 0 .15rem; }
.rs-map-h .rs-map-date { font-size: 1.05rem; font-weight: 400; }
.rs-map-src { font-size: .9rem; color: var(--muted); margin: 0 0 .8rem; }
/* North up: a compass needle, pointing to the map's north as it turns. */
.rs-north svg { display: block; margin: auto; overflow: visible; }
.rs-north .rs-n-red { fill: #c0392b; stroke: currentColor; stroke-width: .9; stroke-linejoin: round; /* design-ok: drawing */ /* design-ok: same-both-themes */ }   /* (the same outline as the white half, so the two read the same size) */
.rs-north .rs-n-white { fill: #fff; stroke: currentColor; stroke-width: .9; stroke-linejoin: round; /* design-ok: drawing */ /* design-ok: same-both-themes */ }
.rs-north .rs-n-n { font: 700 7px system-ui, sans-serif; fill: currentColor; }
/* The Jewish Encyclopedia's Hebrew, printed by its site as small gray pictures: light on a dark theme. */
img.r-heb { vertical-align: middle; max-height: 1.2em; }
:root[data-theme="dark"] img.r-heb { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) img.r-heb { filter: invert(1); } }
/* The pager's row of works: a finger anywhere in it scrolls it sideways, and only sideways: the page holds still
   and the names stay level (Larry, 2026-10-05). */
.rs-pager .rs-tags { align-self: stretch; overflow-y: hidden; touch-action: pan-x; overscroll-behavior-x: contain; }
/* The sense a verse's link points to (R10): marked, and scrolled to, clear of the sheet's head. */
.rs-body .rs-sense { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: -.6rem 0 0 color-mix(in srgb, var(--accent) 9%, transparent), .6rem 0 0 color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: 4px; scroll-margin-top: 4.5rem; }
.rs-map-note { font-size: .88rem; color: var(--muted); margin: -.4rem 0 .8rem; line-height: 1.45; }
.rs-hpage { overflow-x: hidden; }   /* (a work sliding out goes out of sight) */

/* A theme's page opened from a verse: the works whose article doesn't cite it, grayed (Larry, 2026-10-06). */
.rs-pager a.rs-tag.rs-tag-nocite:not([aria-current]) { background: var(--divider); color: var(--muted); }
.rs-pager a.rs-tag.rs-tag-nocite[aria-current] { background: var(--muted); border-color: var(--muted); }

/* ---- Reference pages: DESIGN.md §6c (Larry, 2026-10-06). The same design in light and dark; only the tones differ. ---- */
/* (dark, Larry, 2026-10-06: cards lighter, borders lighter, and the search fields much lighter, plainly fields) */
:root { --rs-card: #ffffff; --rs-edge: #c9cdd5; --rs-field: #ffffff; }
:root[data-theme="dark"] { --rs-card: #22262d; --rs-edge: #555c68; --rs-field: #373c46; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rs-card: #22262d; --rs-edge: #555c68; --rs-field: #373c46; } }
.rs-card { background: var(--rs-card); border-color: var(--rs-edge); }
.rs-card h2 { font-weight: 650; }
.rs-card h2::after { content: ""; display: block; width: 2.2rem; height: 2px; margin-top: .35rem; border-radius: 2px; background: var(--mark); }
.rs-search input { background: var(--rs-field); border-color: var(--field-edge); }   /* (the field edge is now the site's: card #343) */
.rs-search input::placeholder { color: var(--muted); opacity: 1; }
/* A search box's own history (search-history.js): under the field, its left edge on the field's. */
.sh-box { position: absolute; z-index: 20; display: flex; flex-direction: column; max-width: min(28rem, 92vw); padding: .3rem;
  background: var(--popover); border: 1px solid var(--popover-rim); border-radius: var(--radius); box-shadow: var(--popover-lift); }
.sh-item, .sh-clear { font: inherit; text-align: left; border: 0; background: none; color: inherit; padding: .45rem .7rem; border-radius: 8px;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-item:hover, .sh-item:focus, .sh-clear:hover, .sh-clear:focus { background: var(--halo); outline: none; }
.sh-clear { color: var(--muted); font-size: .88rem; border-top: 1px solid var(--rs-edge); border-radius: 0 0 8px 8px; margin-top: .2rem; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 10px .45rem; margin: .2rem 0 .3rem; }   /* (rows 10px apart: the 44px reaches, app.css, meet) */
.rs-card a.rs-chip { display: inline-flex; align-items: baseline; gap: .35rem; min-height: 0; padding: .3rem .7rem; border: 1px solid var(--rs-edge);
  border-radius: 999px; background: var(--rs-field); color: var(--link); text-decoration: none; line-height: 1.3; }
.rs-card a.rs-chip:hover { background: var(--halo); text-decoration: none; }
.rs-card a.rs-chip .rs-dim { font-size: .85em; }
.rs-scope { margin: -.6rem 0 .8rem; font-size: .9rem; text-align: right; }
.rs-scope a { color: var(--link); text-decoration: none; }
.rs-az a { background: var(--rs-field); border: 1px solid var(--rs-edge); }

/* A map's own period and passages (T2), under its title. */
.rs-map-about { margin: -.2rem 0 .6rem; font-size: .92rem; line-height: 1.6; }
.rs-map-psg a { color: var(--link); text-decoration: none; }
.rs-map-psg a:hover { text-decoration: underline; }

/* Strips a mouse can drag (drag-scroll.js): a hand, and no selecting while it moves. */
.rs-pager .rs-tags, .rs-kinds, .b-scopes, .tabs, .att-strip, .menu-reactions { cursor: grab; }
.rs-pager .rs-tags a, .rs-kinds a { cursor: pointer; }
.ds-dragging, .ds-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

/* From a verse, the works whose article cites it: underlined in the color of the link tapped, green for a name or place,
   blue for a theme (Larry, 2026-10-14), the chosen work's filled chip too ("This is confusing": white there, at first). */
.rs-pager a.rs-tag.rs-tag-cites { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--rlink); }
.rs-pager[data-links="theme"] a.rs-tag.rs-tag-cites { text-decoration-color: var(--tlink); }