/* Hebrew & Greek interlinear and Strong's entries (interlinear.js).
   Fonts (SIL Open Font License 1.1, Google Fonts subsets): Noto Serif Hebrew; Literata Greek and Latin Extended. */
@font-face{font-family:'DCBS Hebrew';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/NotoSerifHebrew-hebrew-variable.woff2') format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}
@font-face{font-family:'DCBS Greek';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/Literata-greek-variable.woff2') format('woff2');unicode-range:U+0370-03FF;}
@font-face{font-family:'DCBS Greek';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/Literata-greek-ext-variable.woff2') format('woff2');unicode-range:U+1F00-1FFF;}
@font-face{font-family:'DCBS Greek';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/Literata-latin-ext-variable.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
:root { --heb: "DCBS Hebrew", "SBL Hebrew", "Ezra SIL", "Taamey Frank CLM", "Times New Roman", "Noto Serif Hebrew", serif; --grk: "DCBS Greek", "SBL Greek", "Gentium Plus", "Times New Roman", serif; }
[lang="he"], [lang="arc"] { font-family: var(--heb); }
[lang="grc"], [lang="grc-Latn"], [lang="he-Latn"] { font-family: var(--grk); }

.scripture.il-hidden { display: none; }

/* the switch on the translation bar */
.il-tools { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .4rem .8rem; }
.il-toggle { display: inline-flex; align-items: center; gap: .5rem; font: 600 .82rem var(--sans); color: var(--ink-soft); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 999px; padding: .4rem .8rem .4rem .5rem; min-height: 2.5rem; cursor: pointer; }
.il-toggle:hover { border-color: var(--gold); color: var(--ink); }
.il-sw { position: relative; width: 2.1rem; height: 1.2rem; border-radius: 999px; background: var(--rule); transition: background .2s; flex: none; }
.il-sw::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s; }
.il-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); }
.il-toggle[aria-pressed="true"] .il-sw { background: var(--accent); }
.il-toggle[aria-pressed="true"] .il-sw::after { transform: translateX(.9rem); }
.il-lookup { font: .82rem var(--sans); }

/* interlinear block */
.ilin { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.il-head { font-family: var(--sans); color: var(--ink-soft); margin: 0 0 .6rem; }
.il-legend { font-family: var(--sans); margin: 0 0 .8rem; padding-left: 1.1rem; color: var(--ink-soft); }
.il-verse { padding: .7rem 0 .9rem; border-top: 1px solid var(--rule); }
.il-verse:first-of-type { border-top: 0; }
.il-en { margin: 0 0 .55rem; font-size: 1.02rem; line-height: 1.7; }
.il-en .vn { display: none; }
.il-ref { font: 700 .72rem var(--sans); letter-spacing: .04em; color: var(--accent); margin-right: .25rem; white-space: nowrap; }
.il-title .il-ref { color: var(--muted); }
.il-words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.ilin.ot .il-words { flex-direction: row; } /* dir="rtl" on the list makes the first word sit on the right */
.il-words > li { display: flex; }
.il-w { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .1rem; min-width: 4.2rem; max-width: 11rem;
  padding: .45rem .55rem .4rem; border: 1px solid var(--rule); border-radius: 10px; background: color-mix(in srgb, var(--bg) 55%, var(--paper));
  color: var(--ink); font: inherit; line-height: 1.25; cursor: pointer; }
button.il-w:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.il-nonum { cursor: default; opacity: .85; }
.il-o { font-size: 1.45rem; line-height: 1.5; }
.ilin.ot .il-o { font-size: 1.6rem; direction: rtl; unicode-bidi: isolate; }
.il-t { font-size: .8rem; font-style: italic; color: var(--ink-soft); }
.il-g { font: .82rem var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.il-n { font: 700 .72rem var(--sans); color: var(--accent); letter-spacing: .03em; }
.il-m { font: .66rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); overflow-wrap: anywhere; }
.il-f { font: 700 .62rem var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); background: var(--gold); border-radius: 4px; padding: .05rem .3rem; }
.il-none { margin: 0; }
.il-src { margin: .8rem 0 0; }

/* Strong's dialog */
.sd-wrap[hidden] { display: none; }
.sd-scrim { position: fixed; inset: 0; z-index: 75; background: rgba(30, 18, 10, .38); }
.sd { position: fixed; z-index: 76; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(36rem, calc(100vw - 2rem)); max-height: min(44rem, calc(100vh - 3rem));
  display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border: 1px solid var(--gold); border-radius: 18px; box-shadow: 0 24px 60px rgba(40, 20, 10, .32); }
.sd-bar { display: flex; align-items: center; gap: .5rem; padding: .7rem .8rem .6rem 1.1rem; border-bottom: 1px solid var(--rule); }
.sd-bar h2 { flex: 1; margin: 0; font-size: 1.35rem; }
.sd-bar h2:focus { outline: none; }
.sd-page { font-family: var(--sans); white-space: nowrap; }
.sd-x, .sd-back { font-size: 1.3rem; line-height: 1; }
.sd-body { overflow-y: auto; overscroll-behavior: contain; padding: .9rem 1.2rem 1.2rem; }
html.sd-open { overflow: hidden; }
@media (max-width: 640px) {
  .sd { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; max-height: 85vh; border-radius: 20px 20px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
}
.sd-lemma { margin: 0 0 .3rem; font-size: 2rem; line-height: 1.4; }
.sd-props { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: 0 0 .8rem; font-family: var(--sans); font-size: .85rem; }
.sd-props dt { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.sd-props dd { margin: 0; }
.sd-here { background: color-mix(in srgb, var(--gold-soft) 45%, var(--paper)); border-radius: 10px; padding: .6rem .8rem; margin: 0 0 .6rem; }
.sd-here p { margin: .2rem 0; }
.sd-form { font-size: 1.3rem; }
.sd-body h3, .sd-card h3 { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 .3rem; }
.sd-body p, .sd-card p { margin: .2rem 0 .5rem; }
.sd-outline { list-style: none; padding: 0; margin: .2rem 0 .5rem; font-size: .92rem; }
.sd-outline .d2 { padding-left: 1.2rem; } .sd-outline .d3 { padding-left: 2.4rem; }
.il-xref { font: 700 .82em var(--sans); color: var(--accent); background: none; border: 0; border-bottom: 1px dotted currentColor; padding: 0 .05em; cursor: pointer; }
.sd-book { margin: .5rem 0; }
.sd-bk { font: 650 .82rem var(--sans); margin: 0 0 .2rem !important; }
.sd-refs { line-height: 2.1; }
.sd-ref { font: .8rem var(--sans); color: var(--accent); background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: .2rem .45rem; min-height: 2rem; cursor: pointer; }
.sd-ref:hover { border-color: var(--gold); }
.sd-more { margin-top: .5rem; }

/* #/strongs page */
.sd-search label { display: block; font: 650 .85rem var(--sans); margin-bottom: .3rem; }
.sd-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.sd-row input { flex: 1 1 10rem; font: 1.1rem var(--sans); padding: .6rem .8rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); color: var(--ink); text-transform: uppercase; min-height: 2.75rem; }
.sd-row .btn { margin: 0; }
.sd-err { color: var(--accent); }
.sd-pageentry { margin-top: 1.2rem; }
.sd-card h2 { margin-top: 0; }
.sd-try .chip { display: inline-block; margin: 0 .2rem .4rem 0; }

@media print { .il-tools, .sd-wrap { display: none !important; } .ilin { box-shadow: none; } .il-w { break-inside: avoid; } }
/* Phones: six links share the navigation row. */
@media (max-width: 640px) { .mainnav { gap: 0; } .mainnav a { padding: .4rem .5rem; } }
@media (max-width: 370px) { .mainnav { font-size: .8rem; } .mainnav a { padding: .4rem .38rem; } }
/* Tablets: the header (already too wide here before the sixth link) puts the links on their own row, as on phones. */
@media (min-width: 641px) and (max-width: 900px) { .topbar { flex-wrap: wrap; } .mainnav { order: 3; width: 100%; margin: 0; justify-content: space-around; } .tools { margin-left: auto; } }
@media (min-width: 901px) and (max-width: 980px) { .mainnav { gap: 0; } .mainnav a { padding: .4rem .55rem; } }
@media (max-width: 340px) { .mainnav { font-size: .74rem; } .mainnav a { padding: .4rem .28rem; } }