/* Christian Atlas host adapter for the Scripture Library.
   Loaded after scripture.css on the Atlas page /scripture/ only. It maps the Library's --sl-* roles onto the
   Atlas's real --c-* tokens (src/styles/tokens.css), so Light (Bordeaux & gold) and Dark (Charcoal & Parchment)
   apply — live — without the Library knowing which is active. Everything is scoped under
   .sl.sl--host; nothing here can restyle the rest of the Atlas.
   Specificity: :is(:root, :root[data-theme]) .sl.sl--host is (0,4,0), above the Library's own dark rules (0,3,0). */

:is(:root, :root[data-theme]) .sl.sl--host {
  --sl-page: var(--c-parchment);
  --sl-surface: var(--c-ivory);            /* opaque raised surfaces: panels, sheets, drawers */
  --sl-sunk: var(--c-parchment-deep);
  --sl-ink: var(--c-ink);
  --sl-ink-soft: var(--c-ink-soft);
  --sl-ink-faint: var(--c-ink-muted);      /* metadata: 5.3:1 on light parchment (the Library's own token was 3.8:1) */
  --sl-rubric: var(--c-burgundy);          /* verse numbers, initials, references */
  --sl-gold: var(--c-gold-ink);            /* gold for small text */
  --sl-verdigris: var(--c-green);          /* original-language and lexical material */
  --sl-rule: var(--c-rule-strong);
  --sl-focus: var(--c-focus);
  --sl-text-differs: #7a3e8c;              /* textual variation: no Atlas equivalent; 6.4:1 on parchment */
  --sl-translation: var(--c-green);
  --sl-interpret: var(--c-burgundy);
  --sl-shadow: var(--shadow-card);
  --sl-font: var(--f-text);
  background: transparent;                 /* the Atlas page ground (and its paper grain) shows through */
  color: var(--c-ink);
}
/* Dark (chosen in Settings): the same roles from the palette primitives. */
:root[data-theme='dark'] .sl.sl--host {
  --sl-surface: var(--c-surface);
  --sl-rubric: color-mix(in srgb, var(--dk-tone-burgundy) 70%, white);
  --sl-interpret: color-mix(in srgb, var(--dk-tone-burgundy) 70%, white);
  --sl-text-differs: #c9a0da;
}

/* Atlas type: Source Serif for reading, Cormorant for headings, Source Sans for controls.
   Greek keeps EB Garamond (polytonic coverage); Hebrew keeps Noto Serif Hebrew. */
.sl.sl--host :is(h1, h2, h3) { font-family: var(--f-display); font-weight: 600; color: var(--c-ink); }
.sl.sl--host [lang='grc'] { font-family: 'SL Garamond', var(--f-text); }
.sl.sl--host :is(.sl-btn, .sl-tool, .sl-iconbtn, .sl-seg, .sl-badge, .sl-edition-chip, .sl-table, .sl-filter, .sl-search-inline input, .sl-verif, .sl-notice, .sl-toast, .sl-rel, .sl-status, .sl-sheet__panel label) { font-family: var(--f-ui); }
/* Links take the Atlas accent; structural links keep their own colour. (:where keeps these at low specificity
   so the button rules below always win.) */
:where(.sl.sl--host) a { color: var(--c-accent); }
:where(.sl.sl--host) a:hover { color: var(--c-accent-hover); }
.sl.sl--host :where(.sl-vn, .sl-vnum, .sl-occ a, .sl-tok, .sl-demo, .sl-booklist a, .sl-chapters a, .sl-btn, .sl-hostbar__home) { color: inherit; }
.sl.sl--host .sl-btn.sl-btn--solid { background: var(--c-accent-fill); color: var(--c-on-accent); }
.sl.sl--host .sl-btn.sl-btn--solid:hover { background: var(--c-accent-fill-hover); color: var(--c-on-accent); }
.sl.sl--host .sl-table td:nth-child(2) { white-space: nowrap; }

/* Keep passage choice reachable while reading; opaque so text cannot show through it. */
.sl--host .sl-hostbar {
  position: sticky; top: calc(var(--sl-header-h, 6.5rem) - var(--sl-toolbar-hide, 0px)); z-index: 19; background: var(--c-ivory);
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
  max-width: var(--wide, 64rem); margin: 0 auto; padding: .75rem var(--gutter, 1rem) .6rem;
  border-bottom: 1px solid var(--c-rule); font-family: var(--f-ui); font-size: .9rem;
}
/* rc.13: short screens (a phone held sideways): the Atlas header scrolls away, and so does this bar, so the passage has
   the screen; the reader's own controls (Previous/Next, the Highlight bar) remain. */
@media (max-height: 32rem) {
  .sl--host .sl-hostbar { position: relative; top: auto; }
}
.sl--host .sl-hostbar__home {
  display: inline-flex; align-items: center; min-height: var(--tap); margin-right: auto;
  font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; color: var(--c-gold-ink); text-decoration: none; white-space: nowrap;
}
/* rc.14 (UI-06): at 200% text on a 320px phone the title may wrap rather than run off the screen */
.sl--host .sl-hostbar__home { min-width: 0; max-width: 100%; }
@media (max-width: 24rem) { .sl--host .sl-hostbar__home { white-space: normal; overflow-wrap: anywhere; } }
.sl--host .sl-hostbar__home[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.sl--host .sl-hostbar__tools { display: flex; flex-wrap: wrap; gap: .3rem; }
.sl--host .sl-tool {
  display: inline-flex; align-items: center; gap: .35em; min-height: var(--tap); padding: 0 .75rem;
  border: 1px solid var(--c-rule-strong); border-radius: 999px; background: var(--c-surface);
  color: var(--c-ink-soft); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.sl--host .sl-tool:hover { color: var(--c-accent); background: var(--c-hover-tint); }
.sl--host .sl-tool--passage { color: var(--c-on-accent); background: var(--c-accent-fill); border-color: var(--c-accent-fill); }
.sl--host .sl-tool--passage:hover { color: var(--c-on-accent); background: var(--c-accent-fill-hover); }
.sl--host .sl-tool[aria-current='page'] { color: var(--c-accent); border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.sl--host .sl-hostbar .sl-search-inline { flex: 1 1 100%; max-width: none; }
.sl--host .sl-hostbar .sl-search-inline input { min-height: var(--tap); background: var(--c-ivory); border-color: var(--c-rule-strong); }
@media (min-width: 52rem) { .sl--host .sl-hostbar .sl-search-inline { flex: 1 1 15rem; order: 0; } .sl--host .sl-hostbar__home { margin-right: .5rem; } }
/* rc.4: narrow screens put the button row last, so it is the part that stays pinned. */
@media (max-width: 51.99rem) { .sl--host .sl-hostbar .sl-search-inline { order: 1; } .sl--host .sl-hostbar__tools { order: 2; } }
/* v0.4.0: the pen keeps its icon on the narrowest phones; without it (its word is visually hidden on phones) the button read only "Off". */
@media (max-width: 23rem) { .sl--host .sl-tool { padding: 0 .4rem; font-size: .8rem; } .sl--host .sl-tool .sl-svg:not(.sl-pen) { display: none; } }

/* Version notices (retained offline copy, available update). */
.sl--host .sl-notice { max-width: var(--wide, 64rem); margin: .75rem auto 0; padding: .55rem .9rem; border: 1px solid var(--c-rule-strong); border-left: 3px solid var(--c-gold); border-radius: var(--radius); background: var(--c-surface); font-size: .9rem; }
.sl .sl-notice { margin: .75rem 1rem 0; }
.sl .sl-linkbtn { border: 0; background: none; padding: 0; color: var(--c-accent, inherit); text-decoration: underline; cursor: pointer; font: inherit; }

/* The marginal word study sits below the Atlas's sticky header (its height is published as --sl-header-h). */
@media (min-width: 62.01rem) {
  /* rc.14 (UI-06): --sl-footer-clip (the footer's height in view) keeps the pane above the footer at a chapter's end */
  .sl--host .sl-gloss { top: calc(var(--sl-header-h, 6.5rem) + var(--sl-toolbar-h, 0px) + .75rem); max-height: calc(100vh - var(--sl-header-h, 6.5rem) - var(--sl-toolbar-h, 0px) - 1.5rem - var(--sl-footer-clip, 0px)); }
}

/* Source status, kept distinct from claim review. */
.sl .sl-verif--partial { background: color-mix(in srgb, var(--sl-gold) 18%, transparent); color: var(--sl-gold); }
.sl .sl-pos-sources { margin: .6rem 0 0; }
.sl .sl-record { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
.sl .sl-record dt { color: var(--sl-ink-faint); }
.sl .sl-record dd { margin: 0; }
@media (max-width: 30rem) { .sl .sl-record { grid-template-columns: 1fr; } .sl .sl-record dd { margin-bottom: .4rem; } }

/* Tradition associations and their honest Atlas relationship. */
.sl .sl-trad__label { font-weight: 600; }
.sl .sl-trad__atlas { display: block; font-size: .85em; margin-top: .15rem; }
.sl .sl-rel { display: inline-block; font-size: .72em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-gold); margin-right: .2em; }
.sl .sl-rel-note summary { cursor: pointer; color: var(--sl-ink-soft); font-size: .92em; min-height: 2rem; display: inline-flex; align-items: center; }
.sl .sl-rel-note p { margin: .2rem 0 .3rem; max-width: 34rem; color: var(--sl-ink-soft); }
.sl--host .sl-trad { border-color: var(--c-rule-strong); background: var(--c-surface); max-width: 100%; }
.sl--host .sl-trads { flex-direction: column; align-items: stretch; }

/* Offline page */
.sl .sl-versionbox { margin: 1rem 0 .5rem; }
.sl .sl-offline-tools { display: flex; flex-wrap: wrap; gap: .5rem; }
.sl .sl-offline-tools [hidden] { display: none; }
/* rc.7 (U01–U02): Choose passage · More · Search. More is one disclosure holding Topics, Sources and Offline reading.
   The panel drops below the toolbar (over the page, never over the passage or search controls) and is opaque. */
.sl--host .sl-hostbar__tools { flex-wrap: nowrap; }
.sl--host .sl-more { position: relative; }
.sl--host .sl-more__btn[aria-expanded='true'] { color: var(--c-accent); border-color: var(--c-accent); }
.sl--host .sl-more__btn.is-current { color: var(--c-accent); border-color: var(--c-accent); }
.sl--host .sl-more__current { font-weight: 600; }
.sl--host .sl-more__caret { display: inline-block; width: .45em; height: .45em; margin-left: .15em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); }
.sl--host .sl-more__btn[aria-expanded='true'] .sl-more__caret { transform: translateY(.1em) rotate(-135deg); }
.sl--host .sl-more__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; min-width: 13.5rem; max-width: calc(100vw - 1.5rem);
  margin: 0; padding: .35rem; list-style: none; background: var(--c-ivory);
  border: 1px solid var(--c-rule-strong); border-radius: var(--radius-lg, 10px); box-shadow: 0 12px 28px -12px rgba(30, 20, 10, .45);
}
.sl--host .sl-more__panel[hidden] { display: none; }
.sl--host .sl-more__panel a {
  display: flex; align-items: center; gap: .55rem; min-height: var(--tap); padding: 0 .7rem; border-radius: var(--radius, 6px);
  color: var(--c-ink); text-decoration: none; font-weight: 600;
}
.sl--host .sl-more__panel a:hover { background: var(--c-hover-tint); color: var(--c-accent); }
.sl--host .sl-more__panel a[aria-current='page'] { color: var(--c-accent); box-shadow: inset 3px 0 0 var(--c-accent); }
.sl--host .sl-more__panel .sl-svg { width: 1.15em; height: 1.15em; }
@media (max-width: 23rem) { .sl--host .sl-more__current { display: none; } }

/* rc.10 (C/E): the pinned row is Highlight · Choose passage · Read/Study · More. Phones say "Passage" (the accessible name
   stays "Choose passage"); the pen shows On/Off in words as well as state. */
.sl--host .sl-hostbar__slot { display: contents; }
.sl--host .sl-tool__short { display: none; }
.sl--host .sl-hostbar__tools { align-items: center; gap: .3rem; }
.sl--host .sl-hostbar__tools .sl-reader__mode { flex: none; }
.sl--host .sl-hostbar__tools .sl-reader__mode button { min-height: var(--tap); padding: 0 .75rem; font: inherit; font-weight: 600; }
.sl--host .sl-hlmode-toggle { padding: 0 .65rem; gap: .3rem; }
.sl--host .sl-hlmode-toggle__state { font-weight: 500; font-size: .85em; opacity: .85; }
.sl--host .sl-hlmode-toggle[aria-pressed='true'] { background: var(--c-ink); color: var(--c-parchment); border-color: var(--c-ink); }
.sl--host .sl-hlmode-toggle[aria-pressed='true'] .sl-hlmode-toggle__state { opacity: 1; font-weight: 700; }
@media (max-width: 34rem) {
  .sl--host .sl-hostbar__tools.has-page-tools .sl-tool__long { display: none; }
  .sl--host .sl-hostbar__tools.has-page-tools .sl-tool__short { display: inline; }
  .sl--host .sl-hostbar__tools.has-page-tools .sl-tool { padding: 0 .55rem; }
  .sl--host .sl-hostbar__tools .sl-reader__mode button { padding: 0 .55rem; }
  .sl--host .sl-hlmode-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sl--host .sl-hostbar__tools .sl-more__current { display: none; }
}
@media (max-width: 23.5rem) {
  .sl--host .sl-hostbar__tools.has-page-tools .sl-tool .sl-svg:not(.sl-pen) { display: none; }
  .sl--host .sl-hostbar__tools .sl-reader__mode button { padding: 0 .45rem; font-size: .82rem; }
  .sl--host .sl-hostbar__tools.has-page-tools .sl-tool { padding: 0 .4rem; font-size: .82rem; }
}

/* rc.13: with very large text (browser text-size settings) the pinned row wraps instead of running off the screen. */
.sl--host .sl-hostbar__tools { flex-wrap: wrap; }

/* rc.14 (UI-06): on Library pages the Atlas header is opaque. Its 92% parchment let the Library bar's "Scripture Library"
   title show faintly through it once the bar slid underneath on scroll. Other Atlas pages keep the translucent header. */
.site-header.site-header.site-header { background: var(--c-parchment); }