/* Bible Browser styles -- biblehub-style interlinear */
:root {
    --fg:        #1f2937;
    --muted:     #6b7280;
    --accent:    #1e40af;   /* Strong's blue */
    --accent-bg: #eff6ff;
    --bg:        #fafafa;
    --card:      #ffffff;
    --border:    #e5e7eb;
    --orange:    #c2410c;   /* English / translation orange */
    --gold:      #b45309;   /* transliteration */
    --grammar:   #6366f1;   /* grammar code */
    --gematria:  #1e40af;   /* gematria blue (matches accent) */
    --variant:   #b45309;
    --variant-bg:#fffbeb;
    --hebrew:    "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
    --greek:     "SBL Greek", "Gentium Plus", "Times New Roman", serif;
    /* font sizes — overridden at runtime by display options JS */
    --fsz-verse-orig-heb: 22px;
    --fsz-verse-orig-grk: 18px;
    --fsz-verse-eng:      16px;
    --fsz-word-orig-heb: 26px;
    --fsz-word-orig-grk: 18px;
    --fsz-translit:      13px;
    --fsz-word-eng:      13px;
    --fsz-strongs:       12px;
    --fsz-grammar:       11px;
    --fsz-gematria:      12px;
}
* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0; background: var(--bg); color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
}
header {
    background: var(--card); border-bottom: 1px solid var(--border);
    padding: 12px 24px;
}
header h1 { margin: 0; font-size: 18px; color: var(--accent); }
header .sub { color: var(--muted); font-size: 13px; }

main { max-width: 1280px; margin: 0 auto; padding: 16px 24px; }
body.full-width main,
body.full-width .options-panel,
body.full-width .gematria-panel { max-width: none; }

.selector {
    background: var(--card); border: 1px solid var(--border); border-radius: 6px;
    padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.selector form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.selector label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.selector select, .selector input[type=text] {
    padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px;
    background: white; font-size: 14px;
}
.selector input[type=text] { width: 160px; }
.selector button {
    padding: 6px 14px; background: var(--accent); color: white;
    border: 0; border-radius: 4px; cursor: pointer; font-size: 14px;
}

.verse-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 6px;
    margin-top: 16px; padding: 16px 20px;
}
.verse-card .ref-line {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 12px;
}
.verse-card .ref-line h2 { margin: 0; font-size: 22px; color: var(--accent); }
.verse-card .ref-line .meta { color: var(--muted); font-size: 13px; }
.verse-card .ref-line .nav {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}
.verse-card .ref-line .nav a {
    padding: 4px 10px; background: var(--accent-bg);
    color: var(--accent); text-decoration: none; border-radius: 4px; font-size: 13px;
}
.verse-card .ref-line .nav a:hover { background: var(--accent); color: white; }
.verse-card .ref-line .nav .word-search-bar {
    display: inline-flex; align-items: center; gap: 4px;
    margin-right: 8px;
}
.verse-card .ref-line .nav .word-search-bar input,
.verse-card .ref-line .nav .word-search-bar button {
    font-size: 13px; padding: 3px 8px;
    border: 1px solid var(--border); border-radius: 4px;
    background: white; color: var(--fg);
}
.verse-card .ref-line .nav .word-search-bar button {
    background: var(--accent-bg); color: var(--accent); cursor: pointer;
}
.verse-card .ref-line .nav .word-search-bar button:hover {
    background: var(--accent); color: white;
}
.verse-card .ref-line .nav .word-search-bar .search-clear {
    width: 18px; height: 18px; padding: 0;
    border-radius: 50%;
    background: var(--muted); color: white;
    font-size: 11px; line-height: 18px; text-align: center;
    flex-shrink: 0; cursor: pointer;
    border: none;
}
.verse-card .ref-line .nav .word-search-bar .search-clear:hover {
    background: var(--accent); color: white;
}
.verse-card .ref-line .nav .word-search-bar .search-phrase-label {
    font-size: 12px; color: var(--muted);
    display: inline-flex; align-items: center; gap: 3px;
    white-space: nowrap; cursor: pointer; user-select: none;
}
.verse-card .ref-line .nav .word-search-bar .search-phrase-label[hidden] {
    display: none;
}
.verse-card .ref-line .nav .word-search-bar .search-phrase-label input[type="checkbox"] {
    margin: 0; cursor: pointer;
}

.assembled .label {
    color: var(--muted); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.05em; margin-top: 8px;
}
.assembled .original {
     line-height: 1.7; padding: 6px 0;
}
.assembled .original.heb { font-family: var(--hebrew); direction: rtl; text-align: right; font-size: var(--fsz-verse-orig-heb);}
.assembled .original.grk { font-family: var(--greek); font-size: var(--fsz-verse-orig-grk);}
.assembled .english { font-size: var(--fsz-verse-eng); line-height: 1.6; padding: 6px 0; color: #111827; }
/* KJV inline-tag display in the english verse text */
.assembled .english .kjv-tag {
    cursor: help;
    border-bottom: 1px dotted var(--accent);
    text-decoration: none;
    color: inherit;
}
.assembled .english .kjv-tag:hover {
    color: var(--accent);
    background: var(--accent-bg);
}
.assembled .english .kjv-supplied {
    font-style: italic;
    color: var(--muted);
}
.assembled .verse-eng-label .english-source {
    color: var(--muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}

.sig-banner {
    background: var(--variant-bg); border-left: 4px solid var(--variant);
    padding: 6px 12px; margin-top: 8px; font-size: 13px; color: var(--variant);
}

/* ---------- gematria analysis panel ---------- */
.gematria-panel {
    max-width: 1280px; margin: 8px auto 0;
    background: var(--card); border: 1px solid var(--border); border-radius: 6px;
    padding: 10px 16px;
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.gematria-panel[hidden] { display: none; }
.gem-panel-label {
    color: var(--muted); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.05em; white-space: nowrap; flex-shrink: 0;
}
.gem-rows { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; }

/* Word/Letter count row at the top of the gematria panel */
.gem-row.gem-counts {
    color: var(--muted);
    padding-right: 8px;
    border-right: 1px dashed var(--border);
    margin-right: 4px;
}
.gem-row.gem-counts .gem-row-value { color: var(--gematria); }
.gem-row .gem-row-sep { color: var(--border); padding: 0 4px; }

.gem-row {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 14px;
}
.gem-row-type {
    color: var(--fg); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.05em; font-weight: 600;
}
.gem-row-value   { font-weight: 700; color: var(--gematria); font-size: var(--fsz-gematria); line-height: 1; }
.gem-row-factors { font-weight: 700; color: var(--gematria); font-size: var(--fsz-gematria); line-height: 1; }
/* Superscripts in factor expressions (e.g. 2³) must not push the line taller */
.gem-row-factors sup { font-size: 0.75em; line-height: 0; vertical-align: super; }
/* Gematria search hyperlinks — specificity raised to beat bw.css A:link {color:#dddddd} */
a.gem-link,
a.gem-link:link,
a.gem-link:visited {
    color: var(--gematria); font-weight: 700; text-decoration: none;
    border-bottom: 1px dashed var(--gematria);
}
a.gem-link:hover { border-bottom-style: solid; }
/* Word-cell standard gematria — click to search */
.gem-value {
    cursor: pointer;
    color: var(--gematria); font-weight: 700;
    border-bottom: 1px dashed var(--gematria);
}
.gem-value:hover { border-bottom-style: solid; }
a.gem-factor-link,
a.gem-factor-link:link,
a.gem-factor-link:visited {
    color: var(--gematria); font-weight: 700; text-decoration: none;
    border-bottom: 1px dashed currentColor;
}
a.gem-factor-link:hover { border-bottom-style: solid; }
.gem-row-factors.is-prime {
    color: var(--gematria); font-style: italic;
}
/* ---------- gematria / search results shared table styles ------------------ */
.back-link { color: var(--accent); text-decoration: none; font-size: 14px; margin-right: 12px; }
.back-link:hover { text-decoration: underline; }
.gr-article-link {
    margin-left: auto;
    color: var(--accent); text-decoration: none; font-size: 14px; font-weight: 600;
    border: 1px solid var(--accent); border-radius: 4px; padding: 2px 10px;
}
.gr-article-link:hover { background: var(--accent); color: white; }
.search-summary { font-size: 14px; color: var(--muted); }
.search-summary strong { color: var(--fg); }
.search-testament { font-weight: 700; font-size: 15px; color: var(--fg); margin: 12px 0 4px; }
.search-table {
    border-collapse: collapse; width: 100%; margin-top: 12px; font-size: 14px;
}
.search-table th {
    text-align: left; padding: 6px 8px;
    border-bottom: 2px solid var(--border); color: var(--muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    background-color: transparent; font-weight: normal;
}
.search-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.search-book { white-space: nowrap; font-weight: 600; color: var(--fg); }
.search-verses a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.search-verses a:hover { text-decoration: underline; }
/* gematria results table */
.gem-word-cell { white-space: nowrap; }
.gem-tlit  { color: var(--gold); font-size: 12px; font-style: italic; }
.gem-eng   { color: var(--orange); font-size: 12px; }
.gem-strongs { font-family: monospace; color: var(--accent); white-space: nowrap; }
.gem-count-col { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.gem-clear {
    margin-left: auto; padding: 2px 8px;
    background: none; border: 1px solid var(--border); border-radius: 4px;
    color: var(--muted); font-size: 12px; cursor: pointer;
}
.gem-clear:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- biblehub-style interlinear grid ---------- */
.interlinear {
    margin: 16px 0 4px 0;
    display: flex; flex-wrap: wrap;
    gap: 14px 14px;
    align-items: flex-start;
    user-select: none;
}
.interlinear.heb { direction: rtl; }
.interlinear.heb .word-cell { text-align: center; }
.interlinear.heb .verse-num { margin-left: 8px; margin-right: 0; }

.verse-num {
    font-size: 22px; font-weight: 700; color: var(--fg);
    line-height: 1; padding-top: 36px;
    min-width: 18px; margin-right: 8px;
    user-select: none;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.verse-num-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.verse-order { font-size: 10px; font-weight: 400; color: var(--muted); line-height: 1; }

.word-cell {
    text-align: center;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    /* Width is content-driven (no min-width): the cell hugs its widest
       child -- usually the English gloss or transliteration. Uniform
       4px/6px padding makes all cells look consistent regardless. */
    user-select: none;
}
.word-cell:hover { background: #f3f4f6; }
.word-cell.selected { background: var(--accent-bg); outline: 2px solid var(--accent); }
.word-cell.kjv-hl  { background: #fef3c7; outline: 2px solid #f59e0b; }
.variant-btn {
    display: block; width: 100%; height: 3px; margin-top: 3px;
    background: var(--variant); border: none; padding: 0;
    border-radius: 0 0 3px 3px; cursor: pointer; opacity: 0.6;
    transition: height 0.1s, opacity 0.1s;
}
.variant-btn:hover { height: 5px; opacity: 1; }

/* absent-variant state: word toggled off (not in critical text) */
.word-cell.cell-absent { background: #f9f9f9; opacity: 0.45; outline: 1px dashed var(--border); }
.word-cell.cell-absent .variant-btn { background: #9ca3af; }

/* variant context menu */
.variant-menu {
    position: fixed; z-index: 1000;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    min-width: 190px; padding: 4px 0; font-size: 13px;
}
.variant-menu-item {
    padding: 7px 12px; cursor: pointer;
    display: flex; flex-direction: column; gap: 2px;
    border-left: 3px solid transparent;
}
.variant-menu-item:hover  { background: var(--accent-bg); }
.variant-menu-item.active { border-left-color: var(--accent); }
.vm-kind {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
    font-weight: 600; color: var(--variant);
}
.vm-text  { color: var(--fg); }
.vm-meta  { font-size: 10px; color: var(--muted); }

.word-cell .gematria {
    color: var(--gematria); font-size: var(--fsz-gematria); font-family: monospace; font-weight: 700;
    margin-bottom: 2px; white-space: nowrap; min-height: 1em;
    direction: ltr;
}
.word-cell .strongs {
    color: var(--accent); font-size: var(--fsz-strongs); font-family: monospace;
    margin-bottom: 2px; white-space: nowrap;
}
.word-cell .translit {
    color: var(--gold); font-size: var(--fsz-translit); font-style: italic;
    margin-bottom: 2px;
}
.word-cell .original {
    line-height: 1.3; color: #111827; margin-bottom: 2px;
}
.word-cell .original.heb { font-family: var(--hebrew); font-size: var(--fsz-word-orig-heb); }
.word-cell .original.grk { font-family: var(--greek); font-size: var(--fsz-word-orig-grk); }
.word-cell .english {
    color: var(--orange); font-size: var(--fsz-word-eng); margin-bottom: 2px; white-space: nowrap;
}
.word-cell .grammar {
    color: var(--grammar); font-size: var(--fsz-grammar); font-family: monospace;
    white-space: nowrap;
}
.word-cell .chunk-badge {
    display: block; color: var(--muted); font-size: 9px;
    text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px;
}

/* ---------- word detail panel (revealed on click) ---------- */
.word-detail {
    background: #fafbff; border: 1px solid var(--border); border-radius: 6px;
    margin-top: 12px; padding: 12px 16px;
    display: none;
}
.word-detail.shown { display: block; }
.word-detail .wd-head {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 8px;
}
.word-detail .wd-head h3 {
    margin: 0; font-size: 16px;
}
.word-detail .wd-close {
    background: transparent; border: 0; color: var(--muted); font-size: 16px;
    cursor: pointer;
}
.word-detail .wd-row { margin: 6px 0; font-size: 13px; }
.word-detail .wd-row .k {
    display: inline-block; min-width: 100px; color: var(--muted);
    text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em;
    vertical-align: top;
}
.word-detail .ed-pill {
    display: inline-block; background: #e5e7eb; color: #374151;
    padding: 1px 6px; margin: 0 2px 2px 0; border-radius: 3px;
    font-size: 11px; font-family: monospace;
}
.word-detail .ed-pill.minor { opacity: 0.55; }
.word-detail .variant {
    background: var(--variant-bg); border-left: 3px solid var(--variant);
    padding: 6px 10px; margin: 6px 0;
}
.word-detail .variant .vk {
    color: var(--variant); font-weight: 600; text-transform: uppercase;
    font-size: 10px; letter-spacing: 0.05em; margin-right: 6px;
}
.word-detail .morpheme {
    display: inline-block; margin: 3px 6px 3px 0; padding: 3px 8px;
    background: #f3f4f6; border-radius: 3px; font-size: 12px;
}
.word-detail .morpheme .role { color: var(--muted); font-size: 9.5px; text-transform: uppercase; margin-right: 4px; }
.word-detail .morpheme .heb { font-family: var(--hebrew); font-size: 13px; }
.word-detail .morpheme .gloss { color: var(--muted); font-size: 11px; margin-left: 4px; }
.word-detail .link-list .link {
    display: inline-block; margin: 2px 6px 2px 0; padding: 2px 8px;
    background: #eef2ff; color: var(--accent); border-radius: 3px;
    font-size: 12px;
}

/* ---------- summary blocks ---------- */
.summary-verse-label {
    margin: 10px 0 4px 0; color: var(--accent); font-weight: 600;
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
}
.summary-block {
    background: #f9fafb; border: 1px solid var(--border); border-radius: 4px;
    padding: 6px 10px; margin: 4px 0; font-size: 12px;
}
.summary-block .lbl {
    display: inline-block; min-width: 90px; color: var(--muted);
    text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em;
    margin-right: 6px;
}

/* ---------- gear button + options panel ---------- */
.selector .gear {
    /* Pushes the gear to the right edge of the selector row */
    margin-left: auto;
    background: var(--accent); color: white; border: 0; border-radius: 4px;
    padding: 6px 10px; cursor: pointer; display: inline-flex; align-items: center;
    line-height: 0;
}
.selector .gear:hover { filter: brightness(1.1); }
.selector .gear.active { background: var(--accent); outline: 2px solid var(--accent-bg); }

.options-panel {
    max-width: 1280px; margin: 8px auto 0;
    background: var(--card); border: 1px solid var(--border); border-radius: 6px;
    padding: 12px 16px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
}
.options-panel[hidden] { display: none; }
.options-title {
    width: 100%;
    color: var(--muted); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.05em; margin-bottom: 4px;
}
.options-panel label {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; color: #111827; white-space: nowrap;
}
.options-panel label input[type=checkbox] { margin: 0; }
.options-group {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 2px 0;
}
.options-grouplabel {
    color: var(--muted); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.05em; margin-right: 4px;
}
.options-divider {
    width: 1px; align-self: stretch; background: var(--border); margin: 0 4px;
}
.options-size-section {
    width: 100%; margin-top: 8px; padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
}
.options-size-section .options-grouplabel { width: 100%; margin-bottom: 4px; }
.options-size-section .options-divider {
    width: 100%; height: 1px; align-self: auto; margin: 4px 0;
    background: var(--border);
}
.size-ctrl {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--muted);
}
.size-ctrl input[type=number] {
    width: 50px; padding: 2px 4px; border: 1px solid var(--border);
    border-radius: 3px; font-size: 12px; text-align: center;
}
.size-ctrl input[type=color] {
    width: 40px; height: 22px; padding: 1px 2px; border: 1px solid var(--border);
    border-radius: 3px; cursor: pointer;
}

/* ---------- hide-class rules: instant client-side toggle ----------
   Uses display:none (not visibility:hidden) so the hidden text doesn't
   contribute to the cell's width. Otherwise long grammar codes like
   'V-Qal-ConsecImperf-3ms' would silently stretch the cell even when
   the Grammar checkbox is off. */
.interlinear.hide-strongs  .word-cell .strongs  { display: none; }
.interlinear.hide-translit .word-cell .translit { display: none; }
.interlinear.hide-english  .word-cell .english  { display: none; }
.interlinear.hide-grammar  .word-cell .grammar  { display: none; }

.assembled.hide-verse-original .verse-orig-label,
.assembled.hide-verse-original .original { display: none; }
.assembled.hide-verse-english .verse-eng-label,
.assembled.hide-verse-english .english { display: none; }


/* ---------- Strong's tooltip (hover over a cell's Strong's number) ---------- */
.strongs-link { cursor: pointer; }
.strongs-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.strongs-tooltip {
    position: absolute;
    z-index: 9999;
    max-width: 360px;
    background: var(--card);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
    /* pointer-events: auto so the tooltip itself can receive mouseenter
       and the user can hover over it to copy text. */
    pointer-events: auto;
    user-select: text;
    cursor: default;
}
.strongs-tooltip[hidden] { display: none; }

.strongs-tooltip .st-head {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.strongs-tooltip .st-code {
    color: var(--accent);
    font-family: monospace; font-weight: 700; font-size: 14px;
}
.strongs-tooltip .st-lemma {
    font-family: var(--hebrew), var(--greek), serif;
    font-size: 18px;
}
.strongs-tooltip .st-translit {
    color: var(--muted); font-size: 12px; margin-bottom: 4px;
}
.strongs-tooltip .st-xlit { font-style: italic; color: var(--gold); }
.strongs-tooltip .st-pron { font-family: monospace; }
.strongs-tooltip .st-desc { color: var(--fg); }
.strongs-tooltip .st-miss,
.strongs-tooltip .st-loading {
    color: var(--muted); font-style: italic; font-size: 12px;
}
/* Multi-entry tooltip (e.g. a KJV word followed by `<NNNN> <0853>` shows
   both Strong's entries stacked). */
.strongs-tooltip .st-entry + .st-entry {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* ── Verse preview tooltip ─────────────────────────────────────────────────── */
.verse-tooltip {
    position: absolute;
    z-index: 9998;
    max-width: 420px;
    background: var(--card);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.5;
    pointer-events: auto;
    user-select: text;
    cursor: default;
}
.verse-tooltip[hidden] { display: none; }
.verse-tooltip .vt-ref {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}
.verse-tooltip .vt-loading,
.verse-tooltip .vt-miss { color: var(--muted); font-style: italic; font-size: 12px; }

/* ── Grammar expansion tooltip ─────────────────────────────────────────────── */
.word-cell .grammar { cursor: help; }

.grammar-tooltip {
    position: absolute;
    z-index: 9997;
    min-width: 120px;
    background: var(--card);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.4;
    pointer-events: auto;
    user-select: text;
    cursor: default;
}
.grammar-tooltip[hidden] { display: none; }
.grammar-tooltip .gt-pos {
    font-weight: 700;
    color: var(--accent);
    font-size: 13px;
}
.grammar-tooltip .gt-details {
    margin-top: 3px;
    color: var(--fg);
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}
.grammar-tooltip .gt-sep {
    color: var(--muted);
    padding: 0 3px;
    font-size: 11px;
}
.grammar-tooltip .gt-divider {
    margin: 6px 0;
    border-top: 1px solid var(--border);
}
.grammar-tooltip .gt-compound-label {
    font-size: 10px;
    font-family: monospace;
    color: var(--muted);
    margin-bottom: 2px;
    letter-spacing: 0.04em;
}

/* ============================================================
   Site-layout overrides — Bible browser is full-width
   bwBanner.php wraps content in .centerdiv (950px) + a <table>.
   Override all of that so the Bible browser fills the viewport.
   ============================================================ */
body { background: var(--bg) !important; }
p.breadcrumb { display: none; }
.centerdiv { width: 100% !important; max-width: none !important; position: static !important; }
main h2 { background-image: none; margin: 0; padding: 0; }
.appbanner  { display: none; }
/* The two-column table opened by bwBanner — full-width, no separator */
.centerdiv > table              { width: 100%; border-spacing: 0; }
.centerdiv > table > tbody > tr > td { border: none !important; padding: 0; }