/* The Lexicon (/the-faith-received/lexicon/): a compact look-up list of every term, and an entry for each.
   Scale of the other TFR working surfaces (Search, Topics list, Dictionary, reader panels): 15-16px text, 24px page title, 14px
   letters, 28px list rows, 24px between blocks. Loaded after faith-tool-skin.css, which owns the tokens (light, and dark on
   html[data-sd-theme="dark"], never the OS setting alone) and the hollow terracotta button. Scoped under main.tfr-lexicon.
   Rules kept: one serif, no pills, no scroll box inside the page, 3px corners, hairlines, skeletons not spinners, 44px targets
   on controls on a touch screen. */
main.tfr-lexicon { --fr-sticky-top: calc(var(--mo-mast, 85px) + var(--tfr-rail-h, 48px)); --lx-accent: var(--accent, #a9472c); --lx-on: var(--on-accent, #fffdfa); --lx-measure: 68ch; --cols: 4; --lx-bar: 3.4rem; --rh: 28px; font-size: 15px; line-height: 1.5; }
main.tfr-lexicon *, main.tfr-lexicon *::before, main.tfr-lexicon *::after { box-sizing: border-box; }
main.tfr-lexicon [hidden] { display: none !important; }
main.tfr-lexicon .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
main.tfr-lexicon .wrap { max-width: 1180px; margin: 0 auto; padding: 20px 28px 48px; }
main.tfr-lexicon a { text-decoration: none; color: var(--fg); }
main.tfr-lexicon :is(a, button, input, summary):focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 2px; }
main.tfr-lexicon [lang="grc"] { font-family: "Source Serif Pro", "Gentium Plus", "Palatino Linotype", "Times New Roman", Georgia, serif; }
main.tfr-lexicon [lang="he"] { font-family: "Source Serif Pro", "SBL Hebrew", "Ezra SIL", "Times New Roman", Georgia, serif; }
main.tfr-lexicon [lang="la"] { font-style: italic; }
main.tfr-lexicon :is(h1, h2, h3) { font-family: var(--font-body); font-weight: 600; margin: 0; }

/* the masthead slides away on scroll: the bar and the card then sit under the rail alone */
body:has(.site-header.is-hidden) main.tfr-lexicon { --fr-sticky-top: calc(var(--tfr-rail-h, 48px) + 2px); }

/* ── The slim header ── */
main.tfr-lexicon .lx-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--border); }
main.tfr-lexicon .lx-eyebrow { flex: 0 0 100%; margin: 0; font: 600 12px/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--lx-accent); }
main.tfr-lexicon .lx-eyebrow a { color: inherit; }
main.tfr-lexicon .lx-hd h1 { font-size: 24px; line-height: 1.2; }
main.tfr-lexicon .lx-sub { margin: 0; font-size: 15px; color: var(--muted); }

/* ── Search, tabs and the running count on one row ── */
main.tfr-lexicon .lx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0 0 10px; }
main.tfr-lexicon .lx-find { flex: 1 1 18rem; max-width: 26rem; margin: 0; }
main.tfr-lexicon .lx-find input { display: block; width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 3px; background: var(--card-bg); color: var(--fg); font: 16px/1.3 var(--font-body); -webkit-appearance: none; appearance: none; }
main.tfr-lexicon .lx-find input::placeholder { color: var(--muted); }
main.tfr-lexicon .lx-find input:focus-visible { outline-offset: 0; border-color: var(--lx-accent); }
main.tfr-lexicon .lx-tabs { display: flex; gap: 0 16px; }
main.tfr-lexicon .lx-tabs button { appearance: none; border: 0; border-bottom: 2px solid transparent; background: none; padding: 0 0 2px; height: 28px; font: 600 14px/1.2 var(--font-body); color: var(--muted); cursor: pointer; }
main.tfr-lexicon .lx-tabs button:hover { color: var(--fg); }
main.tfr-lexicon .lx-tabs button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--lx-accent); }
main.tfr-lexicon .lx-count { margin: 0 0 0 auto; font: 13px/1.3 var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── The letter bar: small, inline, sticky under the pinned rail; the letter on screen is marked ── */
main.tfr-lexicon .lx-bar { position: sticky; top: var(--fr-sticky-top); z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0 0 4px; padding: 3px 0; background: var(--bg); border-bottom: 1px solid var(--border); font: 600 14px/1 var(--font-body); }
main.tfr-lexicon .lx-bg { display: inline-flex; flex-wrap: wrap; }
main.tfr-lexicon .lx-bg + .lx-bg { padding-left: 10px; border-left: 1px solid var(--border); }
main.tfr-lexicon .lx-bar a { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 26px; color: var(--muted); }
main.tfr-lexicon .lx-bar a[lang]:not([lang="en"]) { font-size: 16px; }
main.tfr-lexicon .lx-bar a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
main.tfr-lexicon .lx-bar a[aria-current] { color: var(--lx-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ── The whole list: a section a letter, chunks of 200 rows in columns; offscreen chunks are not laid out ── */
main.tfr-lexicon .lx-sec { scroll-margin-top: calc(var(--fr-sticky-top) + var(--lx-bar)); margin: 0 0 8px; }
main.tfr-lexicon .lx-lh { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 2px; padding: 0 0 3px; border-bottom: 1px solid var(--fg); font-size: 18px; line-height: 1.3; }
main.tfr-lexicon .lx-lh small { font: 13px/1 var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }
main.tfr-lexicon .lx-sec.is-pending .lx-chunks { min-height: calc(var(--n, 0) * var(--rh) / var(--cols)); background: repeating-linear-gradient(to bottom, transparent 0 9px, var(--highlight) 9px 19px, transparent 19px var(--rh)); opacity: .6; }
main.tfr-lexicon .lx-chunk { column-count: var(--cols); column-gap: 28px; content-visibility: auto; contain-intrinsic-size: auto calc(var(--r) * var(--rh) / var(--cols)); }
main.tfr-lexicon .lx-r { display: flex; align-items: baseline; gap: 8px; height: var(--rh); padding: 0 2px; border-bottom: 1px solid var(--border); break-inside: avoid; overflow: hidden; white-space: nowrap; font: 600 16px/calc(var(--rh) - 1px) var(--font-body); color: var(--fg); }
main.tfr-lexicon .lx-r:focus-visible { outline-offset: -2px; }
main.tfr-lexicon .lx-r small { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 13px/calc(var(--rh) - 1px) var(--font-body); color: var(--muted); }
main.tfr-lexicon .lx-r:hover { color: var(--lx-accent); }
main.tfr-lexicon .lx-empty, main.tfr-lexicon .lx-note { margin: 16px 0; max-width: 60ch; color: var(--muted); }

/* ── Buttons: hollow, 3px, terracotta ink, filled on hover ── */
main.tfr-lexicon .lx-btn { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 10px; border: 1px solid var(--lx-accent); border-radius: 3px; background: transparent; color: var(--lx-accent); font: 600 13px/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; }
main.tfr-lexicon .lx-btn:hover, main.tfr-lexicon a.lx-btn:hover { background: var(--lx-accent); color: var(--lx-on); }
main.tfr-lexicon a.lx-btn { color: var(--lx-accent); }
main.tfr-lexicon .lx-link { position: relative; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
main.tfr-lexicon .lx-link::after { content: ""; position: absolute; inset: -12px -6px; }
main.tfr-lexicon .lx-link:hover { color: var(--fg); }

/* ── An entry ── */
main.tfr-lexicon .lx-crumb { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
main.tfr-lexicon .lx-crumb a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
main.tfr-lexicon .lx-ent { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; grid-template-areas: "head facts" "body facts"; gap: 0 32px; align-items: start; }
main.tfr-lexicon .lx-eh { grid-area: head; min-width: 0; }
main.tfr-lexicon .lx-body { grid-area: body; min-width: 0; }
main.tfr-lexicon .lx-eh h1 { margin: 0 0 8px; font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
main.tfr-lexicon .lx-eh h1:focus { outline: none; }
main.tfr-lexicon .lx-forms { display: grid; gap: 4px; margin: 0 0 8px; max-width: var(--lx-measure); }
main.tfr-lexicon .lx-forms > div { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 10px; align-items: baseline; }
main.tfr-lexicon .lx-forms dt { font: 600 12px/1.5 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
main.tfr-lexicon .lx-forms dd { margin: 0; font-size: 15px; line-height: 1.5; }
main.tfr-lexicon .lx-also { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
main.tfr-lexicon .lx-also a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
main.tfr-lexicon .lx-via { font-size: 13px; color: var(--muted); }
main.tfr-lexicon .lx-facts { grid-area: facts; position: sticky; top: calc(var(--fr-sticky-top) + 8px); margin: 0; padding: 10px 14px 12px; border: 1px solid var(--border); border-top: 3px solid var(--lx-accent); border-radius: 3px; background: var(--card-bg); }
main.tfr-lexicon .lx-facts h2 { margin: 0 0 4px; font: 600 12px/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--lx-accent); }
main.tfr-lexicon .lx-facts dl { margin: 0 0 8px; }
main.tfr-lexicon .lx-facts dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-height: 36px; padding: 6px 0; border-top: 1px solid var(--border); }
main.tfr-lexicon .lx-facts dl > div:first-child { border-top: 0; }
main.tfr-lexicon .lx-facts dt { margin: 0; font: 600 12px/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
main.tfr-lexicon .lx-facts dd { margin: 0; font-size: 15px; line-height: 1.3; text-align: right; overflow-wrap: anywhere; }
main.tfr-lexicon .lx-body h2 { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 0; padding-bottom: 4px; border-bottom: 1px solid var(--fg); font-size: 17px; line-height: 1.3; }
main.tfr-lexicon .lx-body h2 small { font: 13px/1 var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }
main.tfr-lexicon .lx-sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--fg); }
main.tfr-lexicon .lx-sh h2 { border: 0; }
main.tfr-lexicon .lx-lane { display: flex; gap: 14px; padding-bottom: 4px; }
main.tfr-lexicon .lx-lane button { appearance: none; border: 0; border-bottom: 2px solid transparent; background: none; padding: 0 0 1px; font: 600 13px/1.3 var(--font-body); color: var(--muted); cursor: pointer; }
main.tfr-lexicon .lx-lane button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--lx-accent); }
main.tfr-lexicon .lx-senses { list-style: none; margin: 0; padding: 0; }
main.tfr-lexicon .lx-sense { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 6px; padding: 10px 0 12px; border-bottom: 1px solid var(--border); scroll-margin-top: calc(var(--fr-sticky-top) + 8px); }
main.tfr-lexicon .lx-sense.is-target { background: var(--highlight); box-shadow: -6px 0 0 var(--highlight), 6px 0 0 var(--highlight); }
main.tfr-lexicon .lx-sn { align-self: start; font: 600 15px/1.5 var(--font-body); color: var(--lx-accent); font-variant-numeric: tabular-nums; }
main.tfr-lexicon .lx-sn:hover { text-decoration: underline; text-underline-offset: 3px; }
main.tfr-lexicon .lx-gloss { margin: 0; max-width: var(--lx-measure); font: 16px/1.5 var(--font-body); text-wrap: pretty; }
main.tfr-lexicon .lx-def { margin: 8px 0 2px; font: 600 12px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
main.tfr-lexicon .lx-src { list-style: none; margin: 0; padding: 0; max-width: var(--lx-measure); }
main.tfr-lexicon .lx-src > li { padding: 6px 0 8px; border-top: 1px solid var(--border); }
main.tfr-lexicon .lx-src > li:first-child { border-top: 0; }
main.tfr-lexicon .lx-sr { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
main.tfr-lexicon .lx-who { display: block; min-width: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
main.tfr-lexicon .lx-au { font-weight: 600; }
main.tfr-lexicon .lx-au::after { content: ", "; font-weight: 400; }
main.tfr-lexicon .lx-wk { color: var(--muted); }
main.tfr-lexicon .lx-open { flex: none; }

/* ── The quote: the words on the page, with the term marked quietly ── */
main.tfr-lexicon .lx-qs { margin: 6px 0 0; }
main.tfr-lexicon .lx-qpend .lx-sk { height: 44px; }
main.tfr-lexicon .lx-qf { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
main.tfr-lexicon .lx-q { margin: 0 0 6px; padding: 2px 0 2px 12px; border-left: 2px solid var(--border); }
main.tfr-lexicon .lx-q p { margin: 0; font: 15px/1.55 var(--font-body); text-wrap: pretty; overflow-wrap: anywhere; }
main.tfr-lexicon .lx-q p[lang]:not([lang="en"]) { font-style: normal; }
main.tfr-lexicon .lx-q mark { background: color-mix(in srgb, var(--lx-accent) 14%, transparent); color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--lx-accent) 60%, transparent); text-underline-offset: 3px; padding: 0 1px; }
main.tfr-lexicon .lx-q footer { display: flex; align-items: baseline; gap: 12px; margin-top: 2px; font-size: 13px; color: var(--muted); }
main.tfr-lexicon .lx-ql { font: 600 12px/1.4 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }

/* ── Every work that defines it runs down the page ── */
main.tfr-lexicon .lx-hnote { max-width: var(--lx-measure); margin: 6px 0 0; font-size: 14px; color: var(--muted); }
main.tfr-lexicon .lx-hlist { list-style: none; margin: 4px 0 0; padding: 0; }
main.tfr-lexicon .lx-hc { position: sticky; top: calc(var(--fr-sticky-top) - 8px); z-index: 1; padding: 6px 0 3px; background: var(--bg); border-bottom: 1px solid var(--border); font: 600 12px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--lx-accent); }
main.tfr-lexicon .lx-hr { padding: 6px 0 8px; border-bottom: 1px solid var(--border); }
main.tfr-lexicon .lx-hr p { margin: 2px 0 0; max-width: var(--lx-measure); font-size: 15px; text-wrap: pretty; }
main.tfr-lexicon .lx-hr .lx-hw2 { margin: 0; font-size: 14px; color: var(--muted); }
main.tfr-lexicon .lx-hr .lx-hw2 a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
main.tfr-lexicon .lx-sentinel { height: 1px; }
main.tfr-lexicon .lx-pnav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0 0; padding-top: 10px; border-top: 1px solid var(--fg); }
main.tfr-lexicon .lx-pn { display: grid; gap: 2px; min-height: 36px; }
main.tfr-lexicon .lx-pn span { font: 600 12px/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
main.tfr-lexicon .lx-pn b { font: 600 16px/1.3 var(--font-body); overflow-wrap: anywhere; }
main.tfr-lexicon .lx-pn-next { text-align: right; }
main.tfr-lexicon .lx-pn:hover b { color: var(--lx-accent); }

/* ── Skeletons, not spinners ── */
main.tfr-lexicon .lx-sk { display: block; height: 14px; border-radius: 3px; background: var(--hl, var(--highlight)); }
main.tfr-lexicon .lx-sk-entry { display: grid; gap: 12px; padding-top: 8px; max-width: 40rem; }
main.tfr-lexicon .lx-sk-h { height: 28px; width: 30%; }
@media (prefers-reduced-motion: no-preference) {
  main.tfr-lexicon :is(.lx-sk, .lx-sec.is-pending .lx-chunks) { animation: lx-pulse 1.4s ease-in-out infinite; }
  @keyframes lx-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
}
@media print { main.tfr-lexicon .lx-facts, main.tfr-lexicon .lx-bar { position: static; } }

/* ── Columns by width ── */
@media (max-width: 1100px) { main.tfr-lexicon { --cols: 3; } }
@media (max-width: 900px) {
  main.tfr-lexicon { --cols: 2; }
  main.tfr-lexicon .lx-ent { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "facts" "body"; }
  main.tfr-lexicon .lx-facts { position: static; margin: 0 0 4px; }
  main.tfr-lexicon .lx-facts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  main.tfr-lexicon .lx-facts dl > div:nth-child(2) { border-top: 0; }
}
/* ── Phone: one column, 15px text, rows 40px, 44px on controls ── */
@media (max-width: 640px) {
  main.tfr-lexicon { --cols: 1; }
  main.tfr-lexicon .wrap { padding: 14px 16px 40px; }
  main.tfr-lexicon .lx-find { flex-basis: 100%; max-width: none; }
  main.tfr-lexicon .lx-count { margin-left: 0; }
  main.tfr-lexicon .lx-bar { position: static; gap: 0 6px; }
  main.tfr-lexicon .lx-bar a { min-width: 28px; height: 32px; }
  main.tfr-lexicon { --rh: 40px; }
  main.tfr-lexicon .lx-bg + .lx-bg { display: none; }
  main.tfr-lexicon .lx-ent { grid-template-areas: "head" "body" "facts"; }
  main.tfr-lexicon .lx-facts { margin: 16px 0 0; }
  main.tfr-lexicon .lx-facts dl { display: block; }
  main.tfr-lexicon .lx-sec { scroll-margin-top: 8px; }
  main.tfr-lexicon .lx-tabs button { height: 44px; }
  main.tfr-lexicon .lx-sr { flex-wrap: wrap; }
  main.tfr-lexicon .lx-btn { height: 44px; }
  main.tfr-lexicon .lx-sense { grid-template-columns: 24px minmax(0, 1fr); }
  main.tfr-lexicon .lx-forms > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  main.tfr-lexicon .lx-lane button { height: 44px; }
}
@media (pointer: coarse) {
  main.tfr-lexicon { --rh: 40px; }
  main.tfr-lexicon .lx-sn { min-height: 44px; min-width: 32px; }
  main.tfr-lexicon .lx-btn, main.tfr-lexicon .lx-tabs button, main.tfr-lexicon .lx-lane button { min-height: 44px; }
  main.tfr-lexicon .lx-bar a { min-width: 40px; min-height: 40px; }
}
@media (hover: hover) { main.tfr-lexicon .lx-r:hover { background: var(--highlight); } }