:root {
  --fg: #1b2427; --muted: #5a6a6e; --italic: #6f7a7d; --accent: #0d6670; --mark: #b7791f; --mark-soft: #fbf1dc;
  --bg: #fafaf7; --card: #fff; --line: #dfe3e2; --link-soft: #e3f1f2; --link: #1d5fb4; --note: #8a5a2b;
  --serif: Georgia, "Times New Roman", "Noto Serif", serif;
  --sans: Calibri, "Segoe UI", "Nirmala UI", "Noto Sans", "Noto Sans Devanagari", "Noto Sans Telugu", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --fg: #e6ecec; --muted: #9db0b3; --italic: #8fa0a3; --accent: #5cc0c9; --mark: #e0a84a; --mark-soft: #3a2f17;
          --bg: #121819; --card: #1a2223; --line: #2c3a3c; --link-soft: #17383b; --link: #8ab8f5; --note: #d9a56b; }
}
* { box-sizing: border-box; }
html { font-size: 17px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); line-height: 1.55; }
a { color: var(--accent); }
.top { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; background: var(--accent); color: #fff; position: sticky; top: 0; z-index: 5; }
.top a, .top select { color: #fff; }
.brand { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--serif); font-weight: 700; font-size: 1.2rem; text-decoration: none; letter-spacing: .04em; }
.brand img { display: block; }
.hero { display: flex; align-items: center; gap: .7rem; margin: .2rem 0 .8rem; }
.hero h1 { margin: 0 0 0 .3rem; font-size: 2.1rem; letter-spacing: .02em; }
.hero .tile { width: 64px; height: 64px; border-radius: 14px; flex: none; }
.tile.bee { background: #ef2e3d; display: flex; align-items: center; justify-content: center; border-radius: 14px; flex: none; }
.tile.bee img { width: 70%; height: 70%; }
.app-note { display: flex; gap: .8rem; align-items: flex-start; }
.app-note .tile.bee { width: 52px; height: 52px; margin-top: .1rem; }
.app-note p { flex: 1; }
.contact { color: #fff; text-decoration: none; font-size: .9rem; border: 1px solid rgba(255,255,255,.4); border-radius: 6px; padding: .25rem .7rem; white-space: nowrap; }
.contact:hover, .contact:focus-visible { background: rgba(255,255,255,.18); }
.tagline { font-family: var(--serif); font-size: 1.15rem; color: var(--muted); margin: 0 0 1.4rem; }
.tagline p { margin: 0 0 .25rem; }
.tagline strong { color: var(--fg); }
.tagline .hl-red { color: var(--note); }                              /* the brown of text that has a BEN note */
.tagline .hl-blue, .tagline strong.hl-blue { color: var(--link); }   /* the blue of key terms */
.about { margin-top: 2rem; padding-top: .8rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; line-height: 1.5; max-width: 52rem; }
.about p { margin: 0 0 .6rem; }
#crumbs { flex: 1; font-size: .9rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#crumbs a { text-decoration: none; opacity: .9; } #crumbs a:hover { text-decoration: underline; }
#langpick { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4); border-radius: 6px; padding: .25rem .4rem; font: inherit; }
#langpick option { color: #000; }
main { max-width: 1100px; margin: 0 auto; padding: 1.2rem 1rem 4rem; outline: none; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.25; }
h1 { font-size: 1.7rem; margin: .2rem 0 1rem; }
.muted { color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.cards a { display: block; padding: .85rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--fg); }
.cards a:hover, .cards a:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px var(--link-soft); }
.cards small { display: block; color: var(--muted); }
.testament { font-family: var(--serif); color: var(--accent); margin: 1.4rem 0 .5rem; font-size: 1.1rem; border-bottom: 2px solid var(--link-soft); padding-bottom: .2rem; }
.chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.chapters a { display: block; padding: .4rem .7rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--fg); font-size: .95rem; }
.chapters a:hover, .chapters a:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px var(--link-soft); }

/* reader */
.section { scroll-margin-top: 4rem; margin: 2.2rem 0 1rem; padding-bottom: .4rem; border-bottom: 2px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; }
.section h2 { font-size: 1.15rem; margin: 0; }                   /* 14 pt section title, bold */
.section .alt { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; margin: .3rem 0 0; }
.section .alt b { color: var(--accent); }
.section img { max-width: 144px; max-height: 144px; border-radius: 6px; }   /* app.js sets the exact size: longer side = 1.5 in */
.passage { scroll-margin-top: 4rem; display: grid; grid-template-columns: minmax(0, 1fr) 144px; gap: 1.2rem; padding: .6rem 0; align-items: start; }
.pagehead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.pageside { display: flex; flex-direction: column; align-items: flex-end; max-width: 22rem; }
.hint { margin: 0 0 .4rem; padding: .35rem .7rem .35rem 1.4rem; font-size: .8rem; line-height: 1.4; color: var(--muted, #666); border: 1px solid var(--line, #ddd); border-radius: 6px; background: var(--card); }
.overview { margin: 0 0 .6rem; max-width: 60rem; }
.overview p, .overview ul { margin: 0 0 .5rem; }
.overview .ovlinks { margin: .2rem 0 0; font-size: .95rem; }
.ovlink { color: var(--accent); text-decoration: underline; cursor: pointer; }
a.download { display: inline-block; margin: .3rem 0 .4rem; padding: .3rem .85rem; font-size: .9rem; text-decoration: none; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; background: var(--card); }
a.download:hover, a.download:focus-visible { background: var(--link-soft); }
.scripture p { margin: 0 0 .7rem; font-size: 1.05rem; line-height: 1.7; }
.scripture sup { color: var(--accent); font-weight: 700; font-size: .7em; margin-right: .15em; }
.scripture i, .pop i { color: var(--italic); }
.pics { display: flex; flex-direction: column; gap: .6rem; }
.pics img { width: auto; height: auto; max-width: 144px; max-height: 144px; border-radius: 6px; display: block; background: var(--line); }   /* inside a 1.5 inch square */
.note, .wl { cursor: pointer; }
.wl { color: var(--link); }
.note { color: var(--note); }
.note:focus-visible, .wl:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; border-radius: 2px; }
button.other { margin-top: .2rem; font: inherit; font-size: .9rem; color: var(--note); background: var(--mark-soft); border: 1px solid var(--note); border-radius: 999px; padding: .15rem .8rem; cursor: pointer; }
@media (max-width: 640px) {
  html { font-size: 16px; }
  .passage { grid-template-columns: 1fr; }
  .pics { flex-direction: row; flex-wrap: wrap; } .pics img { max-width: 144px; }
  .section { grid-template-columns: 1fr; }
  #crumbs { display: none; }
}

/* book navigation (in the top bar) */
.booknav { display: inline-flex; align-items: center; gap: .15rem; vertical-align: middle; }
#crumbs a.booknav-step, .booknav a, .booknav .off { font-size: 1.3rem; line-height: 1; padding: 0 .35rem; text-decoration: none; opacity: 1; }
.booknav .off { opacity: .3; }
.booknav select { max-width: 12rem; min-width: 0; font: inherit; padding: .15rem .4rem; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4); border-radius: 6px; color: #fff; }
.booknav option, .booknav optgroup { color: #000; }
@media (max-width: 640px) {
  /* The banner wraps on a phone: brand, language and Contact on the first row, the book navigation on the second. Without this the
     Contact button made the page wider than the screen, which also pushed the popups off the right edge. */
  .top { flex-wrap: wrap; gap: .4rem .6rem; padding: .5rem .75rem; }
  .brand { order: 0; font-size: 1.05rem; gap: .35rem; } .brand img { width: 28px; height: auto; }
  #langpick { order: 1; margin-left: auto; max-width: 6.5rem; min-width: 0; font-size: .85rem; }
  .contact { order: 2; font-size: .85rem; padding: .2rem .5rem; }
  #crumbs { order: 3; flex: 1 1 100%; min-width: 0; }
  #crumbs { display: block; }
  #crumbs > a, #crumbs > .sep, #crumbs > .tail { display: none; }
  .booknav select { max-width: 9rem; }
}

/* popup */
dialog { width: min(560px, calc(100vw - 2rem)); max-height: 85vh; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--fg); box-shadow: 0 12px 40px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(10, 20, 22, .55); }
.pop-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); }
.pop-bar h2 { flex: 1; margin: 0; font-size: 1.05rem; }
.pop-btn { font: inherit; background: none; border: 0; cursor: pointer; color: var(--accent); font-size: 1.3rem; line-height: 1; padding: .2rem .5rem; border-radius: 6px; }
#pop-back { font-size: .95rem; } .pop-btn:hover { background: var(--link-soft); }
#pop-body { padding: .8rem 1rem 1.2rem; overflow: auto; max-height: calc(85vh - 3.5rem); }
.pop p { margin: 0 0 .6rem; } .pop ul { margin: 0 0 .6rem; padding-left: 1.2rem; }
.pop .alt .or { color: var(--accent); }
.pop .phrase { color: var(--note); margin: 0 0 .6rem; }                 /* the repeated phrase: as in the page text */
.pop .phrase i, #pop-title.phrase i { color: inherit; }
#pop-title.phrase { color: var(--note); font-family: var(--sans); font-weight: 400; font-size: 1rem; }   /* a note's phrase is the title */
.termword { color: var(--link); font-weight: 700; margin-right: .6em; }
.alts { color: var(--fg); font-family: var(--sans); font-weight: 400; font-size: .95rem; }
.pop .term { margin: 0 0 .4rem; }
.pop .related .wl:hover { text-decoration: underline; }
.pop .extra { color: var(--muted); font-size: .92rem; }
.pop .xref { font-size: .9rem; color: var(--accent); }
.pop .pics { flex-direction: row; flex-wrap: wrap; } .pop .pics img { max-width: 144px; max-height: 144px; }
.pop hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
.pop h3 { margin: 0 0 .3rem; font-size: 1rem; }
.pop .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: .6rem 0 .15rem; }

/* previous / next chapter at the foot of a passage page */
.stepper { display: flex; justify-content: space-between; gap: .8rem; margin: 2rem 0 0; padding-top: 1rem; border-top: 2px solid var(--line); }
.step { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border: 1px solid var(--accent); border-radius: 10px; background: var(--card); color: var(--accent); text-decoration: none; }
.step.next { justify-content: flex-end; text-align: right; }
.step:hover, .step:focus-visible { background: var(--link-soft); }
.step .arrow { font-size: 1.8rem; line-height: 1; flex: none; }
.step .lab { min-width: 0; display: flex; flex-direction: column; }
.step .lab small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step.off { justify-content: center; border-color: var(--line); color: var(--muted); opacity: .45; }

/* contact window */
.mailaddr { font-weight: 700; user-select: all; word-break: break-all; }
.contact-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0; }
.cbtn { font: inherit; font-size: .95rem; padding: .4rem .9rem; border: 1px solid var(--accent); border-radius: 999px; background: var(--card); color: var(--accent); text-decoration: none; cursor: pointer; }
.cbtn:hover, .cbtn:focus-visible { background: var(--link-soft); }

.license { max-width: 1100px; margin: 0 auto; padding: 1rem 1rem 2.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; line-height: 1.5; }
.license p { margin: 0; }