.app[data-theme="day"]{--page:#FFFFFF;--chrome:#EAEBE6;--chrome-edge:#C6C8C1;--tlline:#1F4E79;--law:#1F4E79;--hist:#2F7A5A;--proph:#6B7FA8;--poet:#8E6BA8;--gosp:#A3541D;--letr:#2F6B7A;--wj:#A31D1D;--ctx:#2F5185;--paper:#F6F6F4;--sheet:#FFFFFF;--ink:#111317;--muted:#4A4E54;--faint:#6A6E74;
    --rule:#CFD0CB;--rubric:#8E2222;--rubric-wash:#8E22221A;--chip:#00000010;--scrim:rgba(17,19,23,.30);--bar:#F6F6F4F2}
  .app[data-theme="sepia"]{--page:#F3EBDC;--chrome:#E9DFC9;--chrome-edge:#CDBF9F;--tlline:#1D4468;--law:#1D4468;--hist:#2B6E51;--proph:#5F7296;--poet:#7F5F96;--gosp:#94491A;--letr:#2A6070;--wj:#9C2A18;--ctx:#2C4A75;--paper:#F3EBDC;--sheet:#FAF4E8;--ink:#231D13;--muted:#544C3C;--faint:#736A58;
    --rule:#D9CEB9;--rubric:#8A2A1E;--rubric-wash:#8A2A1E1A;--chip:#00000010;--scrim:rgba(35,29,19,.30);--bar:#F3EBDCF2}
  .app[data-theme="night"]{--page:#121418;--chrome:#1C2027;--chrome-edge:#3A3F4A;--tlline:#8FB6E8;--law:#8FB6E8;--hist:#7FC9A6;--proph:#A7B5D8;--poet:#C3A6DC;--gosp:#E0A277;--letr:#8DC3D0;--wj:#F0938C;--ctx:#8FB6E8;--paper:#121418;--sheet:#1B1E24;--ink:#EDEEEB;--muted:#B3B8BE;--faint:#8E949B;
    --rule:#31353E;--rubric:#E88C86;--rubric-wash:#E88C861F;--chip:#FFFFFF14;--scrim:rgba(0,0,0,.55);--bar:#121418F2}
  .app[data-bold="true"]{--wt:500}
  .app[data-bold="true"][data-theme="day"]{--muted:#2E3237;--faint:#4A4E54;--rule:#B9BAB5}
  .app[data-bold="true"][data-theme="sepia"]{--muted:#3A3327;--faint:#544C3C;--rule:#C6B99F}
  .app[data-bold="true"][data-theme="night"]{--muted:#DADDE0;--faint:#B3B8BE;--rule:#454B55}

  :root{--scripture:"Literata",Georgia,serif;--greek:"Literata","EB Garamond",Georgia,serif;
    --ui:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
    --top:env(safe-area-inset-top,0px);--bot:env(safe-area-inset-bottom,0px);
    --size:21px;--lh:1.75;--wt:400}
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  /* any element-level display rule beats [hidden] unless this exists */
  [hidden]{display:none !important}
  html{-webkit-text-size-adjust:100%}
  html,body{margin:0;padding:0;height:100%;overscroll-behavior:none}
  html{overflow:hidden;position:relative}
  body{height:100dvh;overflow:hidden;display:flex;justify-content:center;
    background:#DDDEDA;font-family:var(--ui)}
  .app{width:100%;max-width:460px;height:100dvh;position:relative;overflow:hidden;
    display:flex;flex-direction:column;background:var(--page);color:var(--ink)}
  @media (min-width:461px){.app{border-left:1px solid var(--rule);border-right:1px solid var(--rule)}}

  .appbar{position:absolute;top:0;left:0;right:0;z-index:6;padding:calc(var(--top) + 10px) 6px 10px;
    display:flex;align-items:center;gap:2px;background:var(--bar);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid transparent;transition:transform .24s ease,border-color .18s ease}
  .appbar[data-hidden="true"]{transform:translateY(-100%)}
  .appbar[data-scrolled="true"]{border-bottom-color:var(--rule)}
  .bar-btn{background:none;border:0;cursor:pointer;padding:11px 12px;border-radius:9px;min-height:44px;
    font:500 15px/1 var(--ui);color:var(--muted);display:flex;align-items:center;gap:6px}
  .bar-title{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;
    cursor:pointer;padding:4px;min-height:44px;justify-content:center}
  .bar-title b{font:600 17px/1 var(--ui);color:var(--ink)}
  .bar-title span{font:450 12px/1 var(--ui);color:var(--faint)}
  /* Hamburger that folds into a Latin cross when the menu opens.
     Bars sit at -7, 0 and +7 from centre. Open: the top bar swings upright to form the
     stem, the middle shortens into the crossbar and rises to sit a third of the way
     down, and the bottom bar fades out. */
  .burger{flex:none;width:46px;height:44px;border:0;background:none;cursor:pointer;
    padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;color:var(--muted)}
  .burger s{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;
    text-decoration:none;
    transition:transform .3s cubic-bezier(.2,.75,.3,1),opacity .18s ease,width .3s ease}
  /* The bars keep their colour and their 2px thickness throughout. Length changes use
     width, not scaleX, because scaling a bar horizontally also thins the rounded caps
     and makes the stem look lighter than the crossbar. */
  /* stem: drop to centre and stand upright, same 20px length */
  .burger[aria-expanded="true"] s:nth-child(1){transform:translateY(7px) rotate(90deg)}
  /* crossbar: sit above centre, shortened by width so the stroke stays identical */
  .burger[aria-expanded="true"] s:nth-child(2){transform:translateY(-3px);width:13px}
  .burger[aria-expanded="true"] s:nth-child(3){opacity:0;transform:translateY(-7px)}

  .menu{position:absolute;top:calc(var(--top) + 58px);right:10px;z-index:7;width:min(310px,86%);
    background:var(--sheet);border:1px solid var(--rule);border-radius:16px;
    box-shadow:0 16px 40px -14px rgba(0,0,0,.42);padding:8px;
    transform-origin:top right;transform:scale(.94) translateY(-6px);opacity:0;
    visibility:hidden;transition:transform .2s cubic-bezier(.2,.7,.3,1),opacity .16s ease,
      visibility 0s linear .2s}
  .menu[data-open="true"]{transform:none;opacity:1;visibility:visible;
    transition:transform .2s cubic-bezier(.2,.7,.3,1),opacity .16s ease,visibility 0s linear 0s}
  .menu-item{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;
    cursor:pointer;text-align:left;padding:12px 10px;border-radius:11px;min-height:56px}
  .menu-item:active{background:var(--chip)}
  .menu-item:disabled{opacity:.45;cursor:default}
  .menu-ico{flex:none;width:34px;height:34px;border-radius:10px;background:var(--chip);
    display:flex;align-items:center;justify-content:center;color:var(--muted)}
  .menu-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .menu-mid{flex:1;min-width:0}
  .menu-mid b{display:block;font:600 15px/1.25 var(--ui);color:var(--ink)}
  .menu-mid em{display:block;font:450 12px/1.4 var(--ui);color:var(--faint);
    font-style:normal;margin-top:3px}
  .menu-item i{flex:none;width:7px;height:7px;border-right:2px solid var(--faint);
    border-bottom:2px solid var(--faint);transform:rotate(-45deg);display:block}
  .menu-head{font:600 10.5px/1 var(--ui);color:var(--faint);text-transform:uppercase;
    letter-spacing:.08em;margin:12px 0 4px;padding:0 10px}
  .menu-foot{font:450 11.5px/1.5 var(--ui);color:var(--faint);margin:8px 0 2px;
    padding:10px 10px 0;border-top:1px solid var(--rule)}

  /* Chronological header. Shown only in that mode; the canonical spine is untouched. */
  /* The navigation reads as a distinct surface rather than more of the page, so the
     eye separates "where am I" from "what am I reading" without extra rules. */
  .chrono{position:absolute;left:0;right:0;top:0;z-index:5;padding:0 16px 10px;
    background:var(--chrome);
    border-bottom:1px solid var(--chrome-edge);
    transition:transform .24s ease;display:none}
  .app[data-rmode="chrono"] .appbar{background:var(--chrome);border-bottom:0}
  .app[data-rmode="chrono"] .appbar[data-scrolled="true"]{box-shadow:none}
  /* Scrolling hides the timeline but keeps the book, chapter and years pinned at the
     top, so you never lose your place in history while reading. */
  .chrono[data-hidden="true"]{transform:translateY(calc(var(--chrono-collapse, 0px) * -1));
    padding-bottom:0;border-bottom:0}
  .chrono[data-hidden="true"] .chrono-crumb{background:var(--chrome)}
  .chrono{touch-action:pan-y}
  .app[data-rmode="chrono"] .chrono{display:block}
  .app[data-rmode="chrono"] .spine{display:none}
  .chrono-top{display:flex;align-items:center;gap:6px;padding:8px 0 7px}
  .chrono-top b{flex:1;text-align:center;font:600 14px/1.2 var(--ui);color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chrono-step{flex:none;width:34px;height:34px;border:1.5px solid var(--chrome-edge);
    border-radius:10px;background:none;cursor:pointer;display:flex;align-items:center;
    justify-content:center;color:var(--muted)}
  .chrono-step s{display:block;width:8px;height:8px;border-left:2.2px solid currentColor;
    border-bottom:2.2px solid currentColor;transform:rotate(45deg);margin-left:3px;
    text-decoration:none}
  .chrono-step.next s{transform:rotate(-135deg);margin-left:0;margin-right:3px}
  .chrono-step:disabled{opacity:.3}

  .chrono-note{font:450 12px/1.5 var(--ui);color:var(--faint);margin:0 0 12px;
    max-width:44ch}
  .chrono-note b{font-weight:500;color:var(--faint);opacity:.75;white-space:nowrap;
    font-size:11px;letter-spacing:.03em}
  .chrono-gap{font:450 12.5px/1.5 var(--ui);color:var(--faint);margin:0;padding:4px 0 6px}

  /* In chronological mode the book title moves down here, beside the years it covers,
     so the bar above belongs entirely to the timeline. */
  .chrono-crumb{display:flex;align-items:center;gap:8px;margin-top:10px;
    padding:10px 16px 0;margin-left:-16px;margin-right:-16px;
    border-top:1px solid var(--chrome-edge)}
  /* once the timeline has slid away this bar is the whole header, so it carries the
     background and a bottom edge of its own */
  .chrono[data-hidden="true"] .chrono-crumb{padding-bottom:9px;
    border-bottom:1px solid var(--chrome-edge)}
  .chrono-crumb .bar-btn{padding:6px 0;font-size:13px;flex:none}
  .chrono-crumb .bar-title{flex:1;min-width:0;padding:0 4px}
  .chrono-crumb .bar-title b{font-size:14px}
  .chrono-crumb .bar-title span{font-size:11px;opacity:.8}
  .chrono-span{flex:none;font:500 11.5px/1.2 var(--ui);color:var(--rubric);
    white-space:nowrap}
  /* the app bar keeps only the chronology name while that mode is on */
  .app[data-rmode="chrono"] #aboutBtn{visibility:hidden}

  /* The dated line, as on a printed Bible timeline: labels above, a filled dot on the
     line at each date. */
  .chrono-line{position:relative;height:24px;margin-bottom:7px}
  .chrono-line hr{position:absolute;left:2px;right:2px;top:19px;margin:0;border:0;
    border-top:1px solid var(--tlline);opacity:.45}
  .chrono-tick{position:absolute;top:0;transform:translateX(-50%);text-align:center;
    font:500 9.5px/1.2 var(--ui);color:var(--faint);white-space:nowrap;
    letter-spacing:.02em}
  .chrono-tick i{display:block;width:5px;height:5px;border-radius:50%;
    background:var(--tlline);margin:5px auto 0;opacity:.55}
  .chrono-tick:first-of-type{transform:none;text-align:left}
  .chrono-tick:first-of-type i{margin-left:0}
  .chrono-tick:last-of-type{transform:translateX(-100%);text-align:right}
  .chrono-tick:last-of-type i{margin-right:0}

  /* one lane per row of non-overlapping books */
  .chrono-lanes{position:relative}
  .chrono-lane{position:relative;height:22px;margin-bottom:3px}
  /* Outlined boxes coloured by kind of book, as on the chart. */
  .chrono-bk{position:absolute;top:0;height:22px;border:1.5px solid var(--bkc);
    border-radius:4px;padding:0 4px;cursor:pointer;background:none;color:var(--bkc);
    font:600 10.5px/1 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chrono-bk[data-on="true"]{background:var(--bkc);color:var(--paper)}

  .spine{position:absolute;left:0;right:0;top:0;z-index:5;padding:0 16px 11px;background:var(--bar);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule);
    transition:transform .24s ease}
  .spine[data-hidden="true"]{transform:translateY(-180%)}
  .spine-rail{position:relative;height:24px;cursor:pointer;
    display:flex;align-items:center}
  /* One continuous bar, divided at every chapter by a hairline. The chapter you are
     reading is filled. No gaps, no rounded pills, no third colour: a row of separate
     shapes reads as clutter rather than as a measure of the book. */
  /* overflow stays visible so the active chapter can stand proud of the bar */
  .rail-track{flex:1;display:flex;align-items:center;height:10px;border-radius:5px;
    background:var(--rule)}
  .rail-ch{flex:1 1 0;min-width:0;height:10px;
    border-right:1px solid var(--bar);
    transition:background .18s ease,height .18s ease}
  .rail-ch:first-child{border-radius:5px 0 0 5px}
  .rail-ch:last-child{border-right:0;border-radius:0 5px 5px 0}
  .rail-ch[data-on="true"]{background:var(--rubric);height:16px;border-radius:4px;
    border-right:0;box-shadow:0 0 0 2px var(--bar);position:relative;z-index:1}
  /* long books cannot carry a hairline per chapter without becoming a grid */
  .rail-track[data-dense="high"] .rail-ch{border-right:0}


  .spine-now{display:flex;justify-content:space-between;align-items:baseline;margin-top:9px;gap:10px}
  .spine-now b{font:600 13px/1.25 var(--ui);color:var(--ink)}
  .spine-now span{font:450 12px/1.25 var(--ui);color:var(--faint);text-align:right;flex:none}
  .spine-cross{display:block;font:500 11.5px/1.4 var(--ui);color:var(--rubric);margin-top:5px}

  .reader{flex:1;overflow-y:auto;touch-action:pan-y;
    padding:0 20px calc(var(--bot) + 130px)}
  .reader::-webkit-scrollbar{width:0}
  .spacer{height:var(--headroom,calc(var(--top) + 128px))}
  .errbox{border:1.5px solid var(--rubric);border-radius:13px;padding:18px;
    background:var(--rubric-wash);margin:8px 0 24px}
  .errbox h3{font:600 15px/1.3 var(--ui);margin:0 0 10px;color:var(--rubric)}
  .errbox p{font-size:14.5px;line-height:1.65;color:var(--ink);margin:0 0 11px}
  .errbox p:last-of-type{margin-bottom:0}
  .errbox code{background:var(--chip);padding:2px 6px;border-radius:4px;font-size:13px}
  .errbox button{margin-top:14px;border:1.5px solid var(--rubric);border-radius:10px;
    background:none;color:var(--rubric);font:600 14px/1 var(--ui);padding:13px 16px;
    cursor:pointer;min-height:46px}
  .loading{padding:20px 0}
  .skel{height:14px;border-radius:7px;background:var(--rule);opacity:.5;margin-bottom:11px;
    animation:skelpulse 1.4s ease-in-out infinite}
  @keyframes skelpulse{0%,100%{opacity:.32}50%{opacity:.6}}
  .chap-open{margin:0 0 22px}
  .chap-num{font-family:var(--scripture);font-size:40px;font-weight:500;line-height:1;margin:0 0 6px}
  .chap-sub{font:450 13px/1.4 var(--ui);color:var(--faint);margin:0}

  .orient{border:1px solid var(--rule);border-radius:13px;background:var(--sheet);margin:0 0 26px;overflow:hidden}
  .orient-head{display:flex;align-items:center;gap:10px;padding:16px;cursor:pointer;min-height:52px}
  .orient-head h3{font:600 14px/1.3 var(--ui);margin:0}
  .orient-head em{font:450 12px/1 var(--ui);color:var(--faint);font-style:normal;margin-left:auto;margin-right:10px}
  .orient-toggle{width:9px;height:9px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
    transform:rotate(45deg);transition:transform .2s ease;flex:none;margin-bottom:3px}
  .orient[data-open="false"] .orient-toggle{transform:rotate(-135deg);margin-bottom:-2px}
  .orient-body{padding:0 16px 16px}
  .orient[data-open="false"] .orient-body{display:none}
  .oriseg{display:flex;gap:4px;margin-bottom:16px}
  .oriseg button{flex:1;border:1px solid var(--rule);background:none;border-radius:9px;cursor:pointer;
    font:500 13px/1 var(--ui);color:var(--muted);padding:12px 6px;min-height:44px}
  .oriseg button[data-on="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .beat{display:flex;gap:12px;padding:0 0 14px}
  .beat:last-of-type{padding-bottom:0}
  .beat-ref{font:600 12px/1.6 var(--ui);color:var(--rubric);flex:none;width:62px}
  .beat-text{font-size:15px;line-height:1.6;color:var(--muted);margin:0}
  .beat-text b{color:var(--ink);font-weight:600}
  .hinge{margin-top:15px;padding:14px;border-radius:10px;background:var(--rubric-wash);
    border-left:3px solid var(--rubric);font-size:15px;line-height:1.6;color:var(--ink)}
  .hinge b{display:block;font:600 12px/1 var(--ui);color:var(--rubric);margin-bottom:7px}
  .crossnote{margin:0 0 16px;padding:13px 14px;border:1.5px dashed var(--rubric);border-radius:10px;
    font-size:14px;line-height:1.6;color:var(--ink);background:var(--rubric-wash)}
  .crossnote b{font-weight:600;color:var(--ink)}
  .crossnote>b:first-child{display:block;font:600 11.5px/1 var(--ui);color:var(--rubric);
    margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}

  .verse{position:relative;padding:0 0 0 15px;margin:0;font-family:var(--scripture);font-size:var(--size);
    line-height:var(--lh);font-weight:var(--wt);color:var(--ink);border-radius:4px;
    -webkit-user-select:text;user-select:text;text-wrap:pretty;transition:background-color .18s ease}
  .verse::before{content:"";position:absolute;left:0;top:.34em;bottom:.34em;width:3px;background:transparent;
    border-radius:3px;transition:background-color .18s ease}
  .verse[data-active="true"]::before{background:var(--rubric)}
  .verse[data-active="true"],.verse[data-flash="true"]{background:var(--rubric-wash)}
  .vnum{font-family:var(--ui);font-size:.62em;font-weight:600;color:var(--faint);vertical-align:.5em;
    margin-right:.3em;font-feature-settings:"tnum";-webkit-user-select:none;user-select:none;
    cursor:pointer;padding:.35em .3em .35em .1em;margin-left:-.1em;border-radius:4px}
  .vnum:active{background:var(--chip);color:var(--rubric)}
  /* Words of Jesus. Off by default in the sense that it is a switch, because
     where a speech ends is the translation's editorial judgement, not the text's. */
  .app[data-wj="true"] .wj{color:var(--wj)}
  .anchor{border-bottom:2px dotted var(--rubric);padding-bottom:1px}
  /* assumed-knowledge marker: dashed, in the context accent, distinct from the
     dotted rubric underline used for word study */
  .ctx{border-bottom:1.5px dashed var(--ctx);padding-bottom:1px;cursor:pointer}
  .ctx[data-on="1"]{background:var(--rubric-wash);border-bottom-style:solid}
  .ctx sup{color:var(--ctx);font-family:var(--ui);font-size:.52em;font-weight:700;
    margin-left:2px;vertical-align:.62em;-webkit-user-select:none;user-select:none}
  .reader[data-density="1"] .ctx{border-bottom-color:transparent}
  .reader[data-density="1"] .ctx sup{display:none}
  .anchor sup{color:var(--rubric);font-family:var(--ui);font-size:.5em;font-weight:700;margin-left:2px;
    vertical-align:.7em;-webkit-user-select:none;user-select:none}

  /* ---------- marks: colour = label, forms = combinable ---------- */
  .mark{-webkit-box-decoration-break:clone;box-decoration-break:clone;color:var(--ink);cursor:pointer;
    border-radius:4px;padding:.06em .12em;-webkit-touch-callout:none}
  .mark[data-fill="1"]{background:var(--mk-wash)}
  .mark[data-box="1"]{box-shadow:inset 0 0 0 2px var(--mk-ink);padding:.08em .2em}
  .mark[data-underline="1"]{text-decoration-line:underline;text-decoration-style:solid;
    text-decoration-color:var(--mk-ink);text-decoration-thickness:2.5px;text-underline-offset:4px}
  .mark[data-menu="1"]{outline:2px dashed var(--mk-ink);outline-offset:2px}
  .mark .brk{color:var(--mk-ink);font-weight:600;-webkit-user-select:none;user-select:none;
    padding:0 .04em;font-family:var(--ui);font-size:.94em}
  .mark .tag{display:none;font-family:var(--ui);font-size:.42em;font-weight:700;letter-spacing:.05em;
    vertical-align:.85em;margin-left:2px;color:var(--mk-ink);-webkit-user-select:none;user-select:none}
  .mark[data-note="1"]::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
    background:var(--mk-ink);vertical-align:.45em;margin-left:3px}
  .app[data-markstyle="label"] .mark .tag,.app[data-markstyle="pattern"] .mark .tag{display:inline}
  .app[data-markstyle="pattern"] .mark[data-fill="1"]{background:transparent}
  .app[data-markstyle="pattern"] .mark{text-decoration-line:underline;text-decoration-color:var(--mk-ink);
    text-decoration-thickness:2.5px;text-underline-offset:5px}
  .app[data-markstyle="pattern"] .mark[data-pat="0"]{text-decoration-style:solid}
  .app[data-markstyle="pattern"] .mark[data-pat="1"]{text-decoration-style:dotted;text-decoration-thickness:3px}
  .app[data-markstyle="pattern"] .mark[data-pat="2"]{text-decoration-style:dashed;text-decoration-thickness:3px}
  .app[data-markstyle="pattern"] .mark[data-pat="3"]{text-decoration-style:double}
  .app[data-markstyle="pattern"] .mark[data-pat="4"]{text-decoration-style:wavy}
  .app[data-markstyle="pattern"] .mark[data-pat="5"]{text-decoration-style:solid;text-decoration-thickness:5px}

  /* sized against the reading text, so it keeps its proportion at every step */
  .parah{font-family:var(--scripture);font-size:calc(var(--size) * 0.82);font-style:italic;
    color:var(--muted);margin:30px 0 13px;padding-left:15px;line-height:1.4}
  .parah s{text-decoration:none;font-family:var(--ui);font-style:normal;
    font-size:calc(var(--size) * 0.52);font-weight:600;
    color:var(--faint);letter-spacing:.07em;text-transform:uppercase;display:block;margin-bottom:5px}
  .secbreak{margin:34px 0 20px;padding:14px 15px;border-radius:11px;background:var(--chip);
    border-left:3px solid var(--rubric)}
  .secbreak b{display:block;font-family:var(--ui);font-weight:600;line-height:1;
    font-size:calc(var(--size) * 0.54);color:var(--rubric);margin-bottom:7px;
    text-transform:uppercase;letter-spacing:.07em}
  .secbreak p{margin:0;font-size:calc(var(--size) * 0.72);line-height:1.6;color:var(--ink)}
  .apparatus{display:none;margin:6px 0 0 15px;padding-left:11px;border-left:2px solid var(--rule);
    font-family:var(--ui);font-size:calc(var(--size) * 0.62);line-height:1.65;color:var(--muted)}
  .apparatus b{font-weight:500;color:var(--rubric);font-family:var(--greek);
    font-size:calc(var(--size) * 0.72)}
  .apparatus .refs{color:var(--faint)}
  .reader[data-density="1"] .verse{line-height:calc(var(--lh) + .14)}
  .reader[data-density="1"] .vnum{display:none}
  .reader[data-density="1"] .anchor{border-bottom-color:transparent}
  .reader[data-density="1"] .anchor sup{display:none}
  .reader[data-density="3"] .apparatus{display:block}
  .endnote{margin:36px 0 0;padding-top:18px;border-top:1px solid var(--rule);
    font:450 12.5px/1.75 var(--ui);color:var(--faint)}

  /* Progress, above the navigation bar and sliding with it. Three cells, each with a
     hairline track that fills. Percentages only. */
  .bars{position:absolute;left:0;right:0;bottom:var(--navh,74px);z-index:5;
    display:none;background:var(--bar);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--rule);
    transition:transform .24s ease}
  .bars[data-on="true"]{display:flex}
  /* it sits directly on top of the nav bar, so it has to travel its own height plus
     the nav bar's to clear the screen with it */
  .bars[data-hidden="true"]{transform:translateY(calc(100% + var(--navh, 74px)))}
  .bar{flex:1;min-width:0;padding:9px 14px 11px;position:relative}
  .bar + .bar::before{content:"";position:absolute;left:0;top:11px;bottom:11px;
    width:1px;background:var(--rule)}
  .bar-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px;
    margin-bottom:7px}
  .bar-label{font:500 10px/1.2 var(--ui);color:var(--faint);letter-spacing:.02em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bar-pct{font:600 14px/1 var(--ui);color:var(--ink);
    font-variant-numeric:tabular-nums;flex:none}
  .bar-pct i{font-style:normal;font-size:9.5px;font-weight:500;color:var(--faint);
    margin-left:1px}
  .bar-track{display:block;height:3px;border-radius:2px;background:var(--rule);
    overflow:hidden}
  .bar-track i{display:block;height:100%;background:var(--rubric);border-radius:2px;
    transform-origin:left center;
    transition:transform .55s cubic-bezier(.22,.75,.25,1)}

  /* The read control: one tap, always reversible. */
  .readmark{display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;margin:34px 0 0;padding:15px 16px;min-height:52px;cursor:pointer;
    border:1.5px solid var(--rule);border-radius:13px;background:none;
    font:600 14px/1.2 var(--ui);color:var(--muted);
    transition:border-color .18s ease,color .18s ease,background .18s ease}
  .readmark s{flex:none;width:20px;height:20px;border-radius:50%;text-decoration:none;
    border:1.5px solid var(--rule);position:relative;
    transition:background .18s ease,border-color .18s ease}
  .readmark[data-done="true"]{border-color:var(--rubric);color:var(--rubric);
    background:var(--rubric-wash)}
  .readmark[data-done="true"] s{background:var(--rubric);border-color:var(--rubric)}
  .readmark[data-done="true"] s::after{content:"";position:absolute;left:6.5px;top:3px;
    width:4px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;
    transform:rotate(45deg)}

  .navbar{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:11px 12px calc(var(--bot) + 12px);
    background:var(--bar);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--rule);display:flex;gap:8px;align-items:center;transition:transform .24s ease}
  .navbar[data-hidden="true"]{transform:translateY(100%)}
  .navstep{flex:none;width:50px;height:50px;border:1.5px solid var(--rule);border-radius:13px;background:none;
    cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted)}
  .navstep s{display:block;width:11px;height:11px;border-left:2.5px solid currentColor;
    border-bottom:2.5px solid currentColor;text-decoration:none}
  .navstep.prev s{transform:rotate(45deg);margin-left:4px}
  .navstep.next s{transform:rotate(-135deg);margin-right:4px}
  .navgo{flex:1;height:50px;border:0;border-radius:13px;background:var(--chip);cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:8px;color:var(--ink);font:600 16px/1 var(--ui)}
  .navgo i{width:7px;height:7px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
    transform:rotate(45deg) translate(-1px,-1px);display:block}
  .navmarks{flex:none;height:50px;padding:0 15px;border:1.5px solid var(--rule);border-radius:13px;
    background:none;cursor:pointer;font:500 13px/1 var(--ui);color:var(--muted);position:relative}
  .navmarks b{position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--rubric)}

  .toast{position:absolute;left:50%;bottom:calc(var(--bot) + 90px);transform:translate(-50%,10px);
    background:#111317;color:#fff;font:500 14px/1.4 var(--ui);padding:13px 18px;border-radius:12px;z-index:12;
    opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;max-width:82%;text-align:center}
  .toast[data-on="true"]{opacity:1;transform:translate(-50%,0)}

  /* ---------- floating panels ---------- */
  .pop{position:absolute;z-index:6;background:#111317;border-radius:15px;padding:10px;display:none;
    flex-direction:column;gap:10px;box-shadow:0 12px 30px -8px rgba(0,0,0,.6);left:16px;right:16px}
  .pop[data-open="true"]{display:flex}
  .forms{display:flex;gap:5px}
  .form-btn{flex:1;background:#FFFFFF10;border:1.5px solid transparent;border-radius:10px;cursor:pointer;
    color:#fff;font-family:var(--scripture);font-size:14px;padding:8px 2px;min-height:44px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
  .form-btn[data-on="true"]{border-color:#fff;background:#FFFFFF26}
  .form-btn u{font-size:7.5px;font-family:var(--ui);font-weight:600;letter-spacing:.04em;
    text-decoration:none;color:#FFFFFFA8}
  .form-btn[data-on="true"] u{color:#fff}
  .form-btn .fx{padding:1px 3px;display:inline-block}
  .form-btn[data-f="fill"] .fx{background:#FFE95C;color:#111317;border-radius:3px}
  .form-btn[data-f="underline"] .fx{text-decoration:underline;text-decoration-color:#FFE95C;
    text-decoration-thickness:2.5px;text-underline-offset:3px}
  .form-btn[data-f="box"] .fx{box-shadow:inset 0 0 0 2px #FFE95C;border-radius:4px;padding:1px 4px}
  .form-btn[data-f="bracket"] em{color:#FFE95C;font-style:normal;font-weight:700;font-family:var(--ui)}
  .swatches{display:flex;gap:6px}
  .swatch{flex:1;height:42px;border-radius:10px;border:2px solid transparent;cursor:pointer;
    display:flex;align-items:center;justify-content:center;font:700 11px/1 var(--ui);color:#111317}
  .swatch[data-on="true"]{border-color:#fff}
  .seltool-names{display:flex;gap:6px}
  .seltool-names span{flex:1;font:500 8.5px/1.15 var(--ui);color:#FFFFFFC4;text-align:center;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pop-actions{display:flex;gap:6px;border-top:1px solid #FFFFFF24;padding-top:9px}
  .pop-actions button{flex:1;background:#FFFFFF1C;border:0;color:#fff;font:500 13.5px/1 var(--ui);
    padding:13px 6px;border-radius:10px;cursor:pointer;min-height:48px}
  .pop-actions button:disabled{opacity:.35}
  .pop-actions button#selApply{background:#FFFFFF3D;font-weight:600}
  .pop-actions button.danger{background:#7A2020;color:#FFD9D5;flex:0 0 auto;padding:12px 14px}
  .pop-quote{font-family:var(--scripture);font-size:14px;line-height:1.4;color:#FFFFFFC4;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
  .pop-quote b{color:#fff;font-weight:600;font-family:var(--ui);font-size:10.5px;
    text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:4px}
  .pop-hint{font:450 11px/1.45 var(--ui);color:#FFFFFF8F;padding:0 2px;margin:-2px 0 0}

  /* Reference drawer: slides in from the lower right, stacks, and unwinds.
     Following a reference is never navigation, so the reader keeps its place. */
  .ref-scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;pointer-events:none;
    transition:opacity .22s ease;z-index:9}
  .ref-scrim[data-open="true"]{opacity:1;pointer-events:auto}
  .refpanel{position:absolute;right:0;bottom:0;top:26%;z-index:10;width:94%;max-width:440px;
    background:var(--sheet);border-radius:20px 0 0 0;border-left:1px solid var(--rule);
    border-top:1px solid var(--rule);box-shadow:-14px 0 34px -16px rgba(0,0,0,.4);
    display:flex;flex-direction:column;overflow:hidden;
    transform:translateX(101%);visibility:hidden;
    transition:transform .28s cubic-bezier(.22,.75,.3,1),visibility 0s linear .28s}
  .refpanel[data-open="true"]{transform:translateX(0);visibility:visible;
    transition:transform .28s cubic-bezier(.22,.75,.3,1),visibility 0s linear 0s}
  @media (min-width:760px){
    .refpanel{top:0;border-radius:0;width:400px;max-width:46%}
  }
  .ref-head{flex:none;display:flex;align-items:center;gap:6px;padding:14px 12px 12px 8px;
    border-bottom:1px solid var(--rule)}
  .ref-back{flex:none;width:44px;height:44px;border:0;background:none;cursor:pointer;
    display:none;align-items:center;justify-content:center;color:var(--muted)}
  .refpanel[data-stack="deep"] .ref-back{display:flex}
  .ref-back s{display:block;width:11px;height:11px;border-left:2.4px solid currentColor;
    border-bottom:2.4px solid currentColor;transform:rotate(45deg);margin-left:4px;text-decoration:none}
  .ref-titles{flex:1;min-width:0;padding-left:8px}
  .ref-title{font:600 16.5px/1.25 var(--ui);color:var(--ink);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .ref-trail{font:450 11.5px/1.35 var(--ui);color:var(--faint);margin-top:3px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ref-body{flex:1;overflow-y:auto;padding:16px 18px calc(var(--bot) + 20px)}
  .ref-body::-webkit-scrollbar{width:0}
  .ref-kicker{font:600 10.5px/1.3 var(--ui);color:var(--ctx);text-transform:uppercase;
    letter-spacing:.08em;margin:0 0 10px}
  .ref-one{font-family:var(--scripture);font-size:18px;line-height:1.5;margin:0 0 12px;color:var(--ink)}
  .ref-more{font:450 15px/1.7 var(--ui);color:var(--muted);margin:0}
  .ref-quote{margin:0 0 14px;padding:12px 14px;border-left:3px solid var(--ctx);
    background:var(--paper);border-radius:0 9px 9px 0;font-family:var(--scripture);
    font-size:16px;line-height:1.6;color:var(--muted)}
  .ref-state[data-s="shared-wording"]{color:#2F5185}
  .ref-cites{display:flex;flex-direction:column;gap:8px;margin-top:18px}
  .ref-cites button{border:1.5px solid var(--ctx);background:none;border-radius:11px;
    font:600 14px/1 var(--ui);color:var(--ctx);padding:14px 15px;min-height:48px;cursor:pointer;
    text-align:left;display:flex;align-items:center;gap:9px}
  .ref-cites button s{margin-left:auto;text-decoration:none;width:8px;height:8px;
    border-right:2px solid currentColor;border-top:2px solid currentColor;
    transform:rotate(45deg);display:block;flex:none}
  .ref-src{margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--rule)}
  .ref-src-head{font-family:var(--scripture);font-size:18px;font-style:italic;
    color:var(--ink);margin:0 0 4px}
  .ref-src-title{font:450 13px/1.6 var(--ui);color:var(--muted);margin:0 0 14px}
  .ref-comm{padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--rule)}
  .ref-comm:last-of-type{border-bottom:0}
  .ref-comm-who{font-family:var(--scripture);font-size:16px;font-weight:600;margin:0 0 6px;color:var(--ink)}
  .ref-comm-who span{display:block;font:450 11px/1.4 var(--ui);color:var(--faint);
    font-family:var(--ui);font-weight:400;margin-top:3px}
  .ref-comm-body{font:450 14.5px/1.7 var(--ui);color:var(--muted);margin:0;white-space:pre-wrap}
  .ref-comm-body.clamped{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
  .ref-prov{margin-top:20px;padding-top:14px;border-top:1px solid var(--rule);
    font:450 12px/1.6 var(--ui);color:var(--faint)}
  .ref-state{display:block;font:600 10px/1.4 var(--ui);letter-spacing:.05em;
    text-transform:uppercase;margin-top:5px}
  .ref-state[data-s="cross-ref"]{color:#3F7F14}
  .ref-state[data-s="unverified"],.ref-state[data-s="needs-greek"]{color:#BC5700}
  .ref-state[data-s="thematic"]{color:var(--faint)}
  .ref-v{font-family:var(--scripture);font-size:calc(var(--size) - 1px);line-height:var(--lh);
    font-weight:var(--wt);color:var(--ink);margin:0;padding:2px 6px;border-radius:5px}
  .ref-v[data-cited="1"]{background:var(--rubric-wash);
    box-shadow:-6px 0 0 var(--rubric-wash),-9px 0 0 var(--rubric)}
  .ref-h{font-family:var(--scripture);font-size:14.5px;font-style:italic;color:var(--muted);
    margin:20px 0 9px;padding:0 6px}
  .ref-load{font:450 14px/1.7 var(--ui);color:var(--faint);padding:6px}
  .ref-foot{flex:none;display:none;align-items:center;gap:10px;
    padding:9px 12px calc(var(--bot) + 10px);border-top:1px solid var(--rule)}
  .refpanel[data-mode="pass"] .ref-foot{display:flex}
  .ref-step{flex:none;width:44px;height:44px;border:1.5px solid var(--rule);border-radius:11px;
    background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted)}
  .ref-step s{display:block;width:10px;height:10px;border-left:2.4px solid currentColor;
    border-bottom:2.4px solid currentColor;transform:rotate(45deg);margin-left:3px;text-decoration:none}
  .ref-step.next s{transform:rotate(-135deg);margin-left:0;margin-right:3px}
  .ref-step:disabled{opacity:.3}
  .ref-note{flex:1;text-align:center;font:450 12px/1.4 var(--ui);color:var(--faint)}
  .scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;pointer-events:none;
    transition:opacity .22s ease;z-index:7}
  .scrim[data-open="true"]{opacity:1;pointer-events:auto}
  .sheet-base{position:absolute;left:0;right:0;bottom:0;background:var(--sheet);border-radius:22px 22px 0 0;
    box-shadow:0 -10px 34px -14px rgba(0,0,0,.45);transform:translateY(101%);visibility:hidden;
    transition:transform .28s cubic-bezier(.22,.75,.3,1),height .26s cubic-bezier(.22,.75,.3,1),
      visibility 0s linear .28s;
    z-index:8;display:flex;flex-direction:column}
  .sheet-base[data-open="true"]{transform:translateY(0);visibility:visible;
    transition:transform .28s cubic-bezier(.22,.75,.3,1),height .26s cubic-bezier(.22,.75,.3,1),
      visibility 0s linear 0s}
  .sheet-base[data-dragging="true"]{transition:none}
  .grabber{flex:none;height:30px;display:flex;align-items:center;justify-content:center;cursor:grab;
    touch-action:none;padding-top:10px}
  .grabber s{display:block;width:44px;height:5px;border-radius:5px;background:var(--rule);text-decoration:none}
  .sheet-head{padding:6px 12px 4px 18px;flex:none;display:flex;align-items:flex-start;gap:6px}
  .sheet-head .titles{flex:1;min-width:0}
  .drawer-ref{font:600 12.5px/1 var(--ui);color:var(--rubric)}
  .drawer-quote{font-family:var(--scripture);font-size:16px;line-height:1.5;color:var(--muted);margin:7px 0 12px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .round{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--chip);cursor:pointer;
    display:flex;align-items:center;justify-content:center;color:var(--muted);position:relative}
  .round.close::before,.round.close::after{content:"";position:absolute;width:16px;height:2px;border-radius:2px;
    background:currentColor}
  .round.close::before{transform:rotate(45deg)}
  .round.close::after{transform:rotate(-45deg)}
  .round.grow s{display:block;width:11px;height:11px;border-left:2.2px solid currentColor;
    border-top:2.2px solid currentColor;transform:rotate(45deg) translate(1px,1px);text-decoration:none}
  .drawer[data-tall="true"] .round.grow s{transform:rotate(-135deg) translate(1px,1px)}
  .drawer{height:66%}
  .drawer[data-tall="true"]{height:93%}
  .tabs{display:flex;gap:18px;border-bottom:1px solid var(--rule);padding:0 18px;flex:none;overflow-x:auto}
  .tabs::-webkit-scrollbar{height:0}
  .tabs button{background:none;border:0;font:500 14px/1 var(--ui);color:var(--muted);padding:2px 0 13px;
    cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap}
  .tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--rubric);font-weight:600}
  .panel{padding:17px 18px calc(var(--bot) + 26px);overflow-y:auto;flex:1}
  .panel::-webkit-scrollbar{width:0}
  /* one attribution block, at the foot of whatever you are reading */
  .sources{margin:40px 0 0;border-top:1px solid var(--rule)}
  .sources-head{display:flex;align-items:center;gap:10px;padding:16px 0 15px;
    cursor:pointer}
  .sources-head h3{flex:1;margin:0;font:600 11px/1.2 var(--ui);color:var(--faint);
    text-transform:uppercase;letter-spacing:.09em}
  .sources-head em{font-style:normal;font:600 11px/1 var(--ui);color:var(--faint);
    opacity:.7;font-variant-numeric:tabular-nums}
  .sources-toggle{flex:none;width:9px;height:9px;
    border-right:1.8px solid var(--faint);border-bottom:1.8px solid var(--faint);
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .2s ease}
  .sources[data-open="true"] .sources-toggle{transform:rotate(-135deg) translate(-2px,-2px)}
  .sources-body{display:none;padding-bottom:18px}
  .sources[data-open="true"] .sources-body{display:block}
  .sources-item{font:450 11.5px/1.65 var(--ui);color:var(--faint);margin:0 0 9px}
  .sources-item:last-child{margin-bottom:0}
  .sources-item b{font-weight:600;color:var(--muted)}
  /* Progress picker: an ordered list you can drag, and a list you can add from. */
  .barpick{display:flex;flex-direction:column;gap:6px}
  .barrow{display:flex;align-items:center;gap:11px;padding:11px 12px;
    border:1.5px solid var(--rule);border-radius:11px;background:var(--paper);
    min-height:54px;position:relative;
    transition:transform .16s ease,border-color .16s ease,opacity .16s ease}
  .barpick[data-dragging="true"] .barrow{transition:none}
  .barrow[data-drag="true"]{border-color:var(--rubric);z-index:2;
    box-shadow:0 6px 18px rgba(0,0,0,.13)}
  .barrow-grip{flex:none;width:26px;height:34px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;cursor:grab;
    touch-action:none;margin:-6px 0 -6px -4px}
  .barrow-grip i{display:block;width:14px;height:1.5px;border-radius:1px;
    background:var(--faint);opacity:.55}
  .barrow-name{flex:1;min-width:0}
  .barrow-name b{display:block;font:600 14px/1.25 var(--ui);color:var(--ink)}
  .barrow-name span{display:block;font:450 11.5px/1.45 var(--ui);color:var(--faint);
    margin-top:2px}
  .barrow-x,.barrow-plus{flex:none;width:26px;height:26px;border-radius:50%;
    border:1.5px solid var(--rule);background:none;position:relative;cursor:pointer}
  .barrow-x::before,.barrow-x::after,
  .barrow-plus::before,.barrow-plus::after{content:"";position:absolute;
    left:50%;top:50%;background:var(--faint);border-radius:1px}
  .barrow-x::before,.barrow-x::after{width:11px;height:1.6px;margin:-.8px 0 0 -5.5px}
  .barrow-x::before{transform:rotate(45deg)}
  .barrow-x::after{transform:rotate(-45deg)}
  .barrow-plus::before{width:11px;height:1.6px;margin:-.8px 0 0 -5.5px}
  .barrow-plus::after{width:1.6px;height:11px;margin:-5.5px 0 0 -.8px}
  .barrow.add{cursor:pointer;background:none;border-style:dashed}
  .barrow.add .barrow-name b{font-weight:500;color:var(--muted)}
  .prov{display:flex;align-items:flex-start;gap:9px;margin:20px -18px 0;
    padding:14px 18px calc(var(--bot) + 22px);border-top:1px solid var(--rule);background:var(--paper);
    font-size:12px;line-height:1.62;color:var(--faint)}
  .prov b{font-weight:600;color:var(--muted)}
  .prov-dot{width:7px;height:7px;border-radius:50%;flex:none;margin-top:5px}

  .full{height:94%}
  /* shown only when a sheet was opened from another one */
  .sheet-back{display:none;flex:none;width:40px;height:40px;border:0;background:var(--chip);
    border-radius:50%;cursor:pointer;align-items:center;justify-content:center;
    color:var(--muted);margin-right:2px}
  .sheet-base[data-back="true"] .sheet-back{display:flex}
  .sheet-back s{display:block;width:10px;height:10px;border-left:2.3px solid currentColor;
    border-bottom:2.3px solid currentColor;transform:rotate(45deg);margin-left:3px;
    text-decoration:none}
  .sheet-base[data-back="true"] .full-head{padding-left:10px}
  .full-head{padding:4px 12px 14px 20px;flex:none;display:flex;justify-content:space-between;align-items:center;gap:8px}
  .full-title{font-family:var(--scripture);font-size:24px;font-weight:600;flex:1}
  .full-body{flex:1;overflow-y:auto;padding:0 20px calc(var(--bot) + 30px)}
  .full-body::-webkit-scrollbar{width:0}
  .mini{background:none;border:0;font:500 13px/1 var(--ui);color:var(--muted);cursor:pointer;
    padding:10px 11px;border-radius:8px;flex:none;min-height:44px}

  #mapCanvas{flex:none;height:38%;min-height:200px;background:var(--chip);
    border-bottom:1px solid var(--rule)}
  .leaflet-container{font-family:var(--ui);background:var(--chip)}
  /* our own labels, since the basemap has none */
  .leaflet-tooltip.map-label{background:var(--rubric);color:#fff;border:0;
    border-radius:7px;box-shadow:0 2px 8px rgba(0,0,0,.28);
    font:600 12px/1.2 var(--ui);padding:5px 9px;white-space:nowrap}
  .leaflet-tooltip.map-label:before{border-top-color:var(--rubric)}
  .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.78)}
  .app[data-theme="night"] .leaflet-tile{filter:brightness(.82) contrast(1.05)}
  .app[data-theme="night"] .leaflet-control-attribution{background:rgba(20,22,26,.8);color:#B3B8BE}
  .place-card{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--rule);
    cursor:pointer;align-items:flex-start}
  .place-card:last-child{border-bottom:0}
  .place-thumb{flex:none;width:66px;height:66px;border-radius:10px;object-fit:cover;
    background:var(--chip);display:block}
  .place-mid{flex:1;min-width:0}
  .place-name{font-family:var(--scripture);font-size:17px;font-weight:500;margin:0;line-height:1.3}
  .place-meta{font:450 12.5px/1.5 var(--ui);color:var(--faint);margin:4px 0 0}
  .place-conf{display:inline-block;font:600 10px/1 var(--ui);text-transform:uppercase;
    letter-spacing:.06em;padding:4px 7px;border-radius:20px;margin-top:6px}
  .place-conf[data-c="identified"]{background:#3F7F1420;color:#3F7F14}
  .place-conf[data-c="likely"]{background:#B0800020;color:#B08000}
  .place-conf[data-c="possible"],.place-conf[data-c="uncertain"]{background:var(--chip);color:var(--muted)}
  .place-note{font:450 12px/1.65 var(--ui);color:var(--faint);margin:16px 0 0;
    padding-top:14px;border-top:1px solid var(--rule)}
  .vplace{padding:0 0 22px;margin:0 0 22px;border-bottom:1px solid var(--rule)}
  .vplace:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:0}
  .vplace-map{height:170px;border-radius:12px;overflow:hidden;background:var(--chip);
    margin:0 0 13px;border:1px solid var(--rule)}
  .vplace-name{font-family:var(--scripture);font-size:21px;font-weight:500;margin:0}
  .vplace-meta{font:450 13px/1.55 var(--ui);color:var(--faint);margin:5px 0 0}
  .vplace-photo{width:100%;border-radius:12px;display:block;margin:14px 0 0;
    background:var(--chip)}
  .vplace-cap{font:450 12.5px/1.6 var(--ui);color:var(--muted);margin:8px 0 0}
  .vplace-cap b{color:var(--faint);font-weight:400}
  .vplace-coords{font:450 12px/1.5 ui-monospace,Menlo,monospace;color:var(--faint);margin:8px 0 0}
  .places-card{display:flex;align-items:center;gap:12px;border:1px solid var(--rule);
    border-radius:13px;background:var(--sheet);padding:15px 16px;margin:0 0 26px;
    cursor:pointer;min-height:56px}
  .places-card b{font:600 14px/1.3 var(--ui);color:var(--ink)}
  .places-card span{font:450 12.5px/1.4 var(--ui);color:var(--faint);display:block;margin-top:3px}
  .places-card i{margin-left:auto;flex:none;width:8px;height:8px;border-right:2px solid var(--faint);
    border-bottom:2px solid var(--faint);transform:rotate(-45deg);display:block}
  .help-h{font:600 11.5px/1 var(--ui);color:var(--rubric);text-transform:uppercase;
    letter-spacing:.07em;margin:24px 0 12px}
  .help-h:first-child{margin-top:4px}
  .help-row{display:flex;gap:14px;padding:0 0 15px;align-items:baseline}
  .help-key{flex:none;width:116px;font:600 13px/1.5 var(--ui);color:var(--ink)}
  .help-val{font:450 14px/1.65 var(--ui);color:var(--muted);margin:0;flex:1}
  .help-swatch{display:inline-block;vertical-align:-2px;margin-right:4px}
  .src-row{display:flex;align-items:center;gap:12px;padding:15px 0;
    border-bottom:1px solid var(--rule);cursor:pointer;min-height:60px}
  .src-mid{flex:1;min-width:0}
  .src-name{font-family:var(--scripture);font-size:17px;font-weight:500;margin:0}
  .src-meta{font:450 12.5px/1.5 var(--ui);color:var(--faint);margin:4px 0 0}
  .src-check{flex:none;width:26px;height:26px;border-radius:8px;border:1.5px solid var(--rule);position:relative}
  .src-row[data-on="true"] .src-check{background:var(--rubric);border-color:var(--rubric)}
  .src-row[data-on="true"] .src-check::after{content:"";position:absolute;left:8px;top:4px;
    width:6px;height:12px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;
    transform:rotate(45deg)}
  .src-intro{font:450 14px/1.6 var(--ui);color:var(--muted);margin:0 0 16px}
  .lab-intro{font:450 14px/1.6 var(--ui);color:var(--muted);margin:0 0 18px}
  .lab-presets{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:20px}
  .lab-presets::-webkit-scrollbar{height:0}
  .lab-presets button{flex:none;border:1.5px solid var(--rule);background:none;border-radius:22px;cursor:pointer;
    font:500 12.5px/1 var(--ui);color:var(--muted);padding:11px 14px;white-space:nowrap;min-height:42px}
  .lab-row{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--rule)}
  .lab-swatch{flex:none;width:46px;height:46px;border-radius:12px;border:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--ui);color:#111317;
    box-shadow:0 0 0 1.5px rgba(0,0,0,.10) inset}
  .lab-mid{flex:1;min-width:0}
  .lab-name{width:100%;border:1.5px solid transparent;border-radius:8px;background:var(--chip);
    padding:11px 12px;font:500 16px/1 var(--ui);color:var(--ink);min-width:0}
  .lab-name:focus{outline:0;border-color:var(--ink);background:var(--sheet)}
  .lab-count{display:block;font:450 12px/1 var(--ui);color:var(--faint);margin-top:7px;padding-left:2px}
  .lab-eye{flex:none;width:46px;height:46px;border-radius:12px;border:1.5px solid var(--rule);background:none;
    cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--faint);
    font:600 10px/1.1 var(--ui);text-align:center;padding:4px}
  .lab-eye[data-on="true"]{border-color:var(--ink);color:var(--ink);background:var(--chip)}
  .lab-palette{display:none;grid-template-columns:repeat(5,1fr);gap:9px;padding:6px 0 16px}
  .lab-palette[data-open="true"]{display:grid}
  .lab-palette button{height:50px;border-radius:12px;border:0;cursor:pointer;position:relative;
    box-shadow:0 0 0 1.5px rgba(0,0,0,.10) inset}
  .lab-palette button[data-used="true"]::after{content:"";position:absolute;top:6px;right:6px;
    width:9px;height:9px;border-radius:50%;background:#11131755}
  .lab-palette button[data-mine="true"]{box-shadow:0 0 0 3px var(--ink)}
  .lab-foot{margin-top:20px;padding:15px;border-radius:11px;background:var(--paper);border:1px solid var(--rule);
    font:450 13.5px/1.6 var(--ui);color:var(--muted)}
  .lab-foot b{color:var(--ink);font-weight:600}
  .lab-reset{margin-top:14px;width:100%;border:1.5px solid var(--rule);border-radius:10px;background:none;
    padding:14px;font:500 14px/1 var(--ui);color:var(--muted);cursor:pointer;min-height:48px}

  .nav-sheet{height:92%}
  .nav-head{padding:2px 12px 12px 16px;flex:none;display:flex;align-items:center;gap:8px}
  .nav-back{background:none;border:0;cursor:pointer;padding:10px;border-radius:9px;color:var(--muted);
    display:none;align-items:center;gap:6px;font:500 15px/1 var(--ui);min-height:44px}
  .nav-sheet[data-view="chapters"] .nav-back{display:flex}
  .nav-back s{display:block;width:9px;height:9px;border-left:2.2px solid currentColor;
    border-bottom:2.2px solid currentColor;transform:rotate(45deg);text-decoration:none}
  .nav-title{flex:1;font-family:var(--scripture);font-size:22px;font-weight:600;padding-left:4px}
  .nav-tabs{display:flex;gap:4px;background:var(--chip);border-radius:12px;padding:3px;margin:0 16px 12px;flex:none}
  .nav-sheet[data-view="chapters"] .nav-tabs{display:none}
  .nav-tabs button{flex:1;background:none;border:0;border-radius:10px;cursor:pointer;font:500 14px/1 var(--ui);
    color:var(--muted);padding:13px 4px;min-height:46px}
  .nav-tabs button[data-on="true"]{background:var(--sheet);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.14)}
  .nav-jump{display:flex;gap:6px;overflow-x:auto;padding:0 16px 12px;flex:none}
  .nav-jump::-webkit-scrollbar{height:0}
  .nav-sheet[data-view="chapters"] .nav-jump{display:none}
  .nav-jump button{flex:none;border:1.5px solid var(--rule);background:none;border-radius:22px;cursor:pointer;
    font:500 12.5px/1 var(--ui);color:var(--muted);padding:10px 14px;white-space:nowrap;min-height:40px}
  .nav-body{flex:1;overflow-y:auto;padding:0 0 16px}
  .nav-body::-webkit-scrollbar{width:0}
  .nav-recent{padding:0 16px 8px}
  .nav-recent h5{font:600 11.5px/1 var(--ui);color:var(--faint);margin:0 0 10px;text-transform:uppercase;letter-spacing:.07em}
  .recent-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
  .recent-row::-webkit-scrollbar{height:0}
  .recent-row button{flex:none;border:1.5px solid var(--rule);background:none;border-radius:12px;cursor:pointer;
    padding:12px 15px;text-align:left;min-height:56px}
  .recent-row button[data-primary="true"]{border-color:var(--rubric);background:var(--rubric-wash)}
  .recent-row strong{display:block;font:600 15px/1.2 var(--ui);color:var(--ink)}
  .recent-row em{display:block;font:450 11.5px/1.2 var(--ui);color:var(--faint);font-style:normal;margin-top:4px}
  .sec-head{position:sticky;top:0;z-index:2;background:var(--sheet);padding:14px 16px 8px;
    font:600 11.5px/1 var(--ui);color:var(--rubric);text-transform:uppercase;letter-spacing:.07em;
    border-bottom:1px solid var(--rule)}
  .book-row{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;
    border-bottom:1px solid var(--rule);min-height:64px}
  .book-row[data-here="true"]{background:var(--rubric-wash)}
  .book-name{font-family:var(--scripture);font-size:18px;font-weight:500;margin:0;line-height:1.25}
  .book-desc{font:450 13px/1.45 var(--ui);color:var(--faint);margin:3px 0 0}
  .book-ch{font:500 12.5px/1 var(--ui);color:var(--faint);flex:none;margin-left:auto;padding-left:10px}
  .chapgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:4px 16px 16px}
  .chapgrid button{height:58px;border:1.5px solid var(--rule);border-radius:12px;background:none;cursor:pointer;
    font-family:var(--scripture);font-size:19px;font-weight:500;color:var(--ink)}
  .chapgrid button[data-here="true"]{background:var(--rubric);border-color:var(--rubric);color:#fff}
  .chapgrid button[data-loaded="true"]{border-color:var(--ink);font-weight:600}
  .nav-search{flex:none;padding:10px 16px calc(var(--bot) + 12px);border-top:1px solid var(--rule);
    background:var(--sheet);display:flex;gap:8px;align-items:center}
  .nav-search input{flex:1;height:50px;border:1.5px solid var(--rule);border-radius:13px;background:var(--paper);
    padding:0 15px;font:400 16px/1 var(--ui);color:var(--ink);min-width:0}
  .nav-search input:focus{outline:0;border-color:var(--ink);background:var(--sheet)}
  .nav-search button{flex:none;height:50px;padding:0 16px;border:0;border-radius:13px;background:var(--ink);
    color:var(--paper);font:600 15px/1 var(--ui);cursor:pointer}
  .nav-search button:disabled{opacity:.3}
  .hint{padding:6px 16px 0;font:450 12.5px/1.5 var(--ui);color:var(--faint)}

  .scheme,.taketabs{display:flex;gap:5px;margin-bottom:16px;flex-wrap:wrap}
  .scheme button,.taketabs button{border:1.5px solid var(--rule);background:none;border-radius:22px;cursor:pointer;
    font:500 12.5px/1 var(--ui);color:var(--muted);padding:11px 14px;min-height:42px}
  .scheme button[data-on="true"],.taketabs button[data-on="true"]{border-color:var(--ink);color:var(--ink);background:var(--chip)}
  .lemma{padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid var(--rule)}
  .lemma:last-of-type{border:0;margin-bottom:0;padding-bottom:0}
  .lemma-top{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
  .lemma-orig{font-family:var(--greek);font-size:29px;font-weight:500}
  .lemma-tag{font:500 12px/1 var(--ui);color:var(--muted);background:var(--chip);padding:8px 10px;border-radius:6px}
  .lemma-gloss{font-size:15px;line-height:1.66;color:var(--muted);margin:13px 0 0}
  .lemma-gloss em{color:var(--ink);font-style:normal;font-weight:600}
  .here{margin:14px 0 0;padding:14px;border-radius:10px;background:var(--rubric-wash);
    border-left:3px solid var(--rubric);font-size:15px;line-height:1.64;color:var(--ink)}
  .here b{display:block;font:600 12px/1 var(--ui);color:var(--rubric);margin-bottom:7px}
  /* Original language words. Greek and Hebrew need a face that carries accents and
     vowel points; the system serif stacks do, so no webfont is loaded. */
  .wordlist{margin-top:4px}
  .wordlist-h{font:600 11.5px/1 var(--ui);color:var(--faint);text-transform:uppercase;
    letter-spacing:.07em;margin:0 0 12px}
  .wordlist-shift{font:450 12px/1.6 var(--ui);color:var(--ctx);margin:-6px 0 12px;
    padding:9px 11px;background:var(--paper);border-left:3px solid var(--ctx);
    border-radius:0 8px 8px 0}
  .wrow{padding:13px 12px;margin:0 -12px;border-radius:11px;cursor:pointer;
    border-bottom:1px solid var(--rule)}
  .wrow:last-of-type{border-bottom:0}
  .wrow[data-open="true"]{background:var(--chip)}
  .wrow-top{display:flex;align-items:baseline;gap:12px}
  .wrow-word{font-family:"SBL Hebrew","Times New Roman",Georgia,serif;font-size:23px;
    line-height:1.5;color:var(--ink);flex:none}
  .wrow-word[dir="rtl"]{font-size:25px}
  .wrow-e{font-family:var(--scripture);font-size:16px;color:var(--muted);
    flex:1;text-align:right;line-height:1.4}
  /* Circular play button on a word row. Sizes are pinned on every axis because the row
     is a flex container and would otherwise stretch it into an oval. */
  .wsay{flex:0 0 34px;width:34px;height:34px;min-width:34px;max-width:34px;
    min-height:34px;max-height:34px;align-self:center;
    border:1.5px solid var(--rule);border-radius:50%;box-sizing:border-box;
    background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
    color:var(--muted);margin-left:10px;padding:0;line-height:0}
  .wsay s{display:block;width:0;height:0;text-decoration:none;
    border-left:9px solid currentColor;border-top:6px solid transparent;
    border-bottom:6px solid transparent;margin-left:3px}
  .wsay[data-speaking="true"]{border-color:var(--rubric);color:var(--rubric)}
  /* the labelled variant becomes a pill so the two buttons cannot be confused */
  .wsay-labelled{flex:0 0 auto;width:auto;max-width:none;min-width:0;border-radius:19px;
    padding:0 13px 0 11px;gap:7px;height:34px;margin-left:10px;
    vertical-align:middle;display:inline-flex}
  .wsay-labelled em{font:500 11.5px/1 var(--ui);font-style:normal;color:var(--faint);
    white-space:nowrap}
  .wsay-labelled s{border-left-width:8px;border-top-width:5px;border-bottom-width:5px;
    margin-left:0}
  /* Back to a circle inside a word row. A triangle's mass sits toward its base, so
     centring its bounding box reads as left of centre; nudge it right to correct. */
  .wrow-top .wsay-labelled em{display:none}
  .wrow-top .wsay-labelled{width:34px;min-width:34px;max-width:34px;padding:0;
    border-radius:50%;justify-content:center}
  .wrow-top .wsay-labelled s{margin-left:3px}
  .wrow-meta{font:450 11.5px/1.6 var(--ui);color:var(--faint);margin:5px 0 0}
  .wrow-def{margin:0}
  .wrow[data-open="true"] .wrow-def{margin-top:11px;padding-top:11px;
    border-top:1px solid var(--rule)}
  .wrow-lemma{font-family:"SBL Hebrew","Times New Roman",Georgia,serif;font-size:20px;
    color:var(--ink);margin:0 0 4px}
  .wrow-lemma span{font-family:var(--ui);font-size:12.5px;color:var(--faint)}
  .wrow-gloss{font:600 14px/1.5 var(--ui);color:var(--ink);margin:0 0 7px}
  .wrow-full{font:450 13px/1.7 var(--ui);color:var(--muted);margin:10px 0 0;
    padding:11px 12px;background:var(--paper);border-radius:9px}
  .wrow-ref{font:450 11px/1.5 ui-monospace,Menlo,monospace;color:var(--faint);margin:6px 0 0}
  .wrow-more{margin-top:4px}
  /* the smaller words are still here, just not competing for attention */
  .wrow-quiet .wrow-word{font-size:19px;color:var(--muted)}
  .wrow-quiet .wrow-e{font-size:14.5px}
  .wordlist-minor{margin-top:2px}
  .wrow-loading{font:450 13px/1.6 var(--ui);color:var(--faint);margin:0}
  /* Markdown rendered from the Translation Notes */
  .md{font:450 15px/1.7 var(--ui);color:var(--muted)}
  .md p{margin:0 0 12px}
  .md p:last-child{margin-bottom:0}
  .md b{color:var(--ink);font-weight:600}
  .md code{background:var(--chip);padding:1px 5px;border-radius:4px;font-size:13px}
  .md-h{font-family:var(--scripture);color:var(--ink);margin:18px 0 9px}
  .md-h:first-child{margin-top:0}
  .md-h1{font-size:19px;font-weight:600}
  .md-h2{font-size:16.5px;font-weight:600}
  .md-h3{font-size:15px;font-weight:600;font-family:var(--ui);
    text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
  .md-list{margin:0 0 12px;padding-left:20px}
  .md-list li{margin-bottom:6px;line-height:1.6}
  .src-label{font:600 11px/1 var(--ui);color:var(--rubric);text-transform:uppercase;
    letter-spacing:.08em;margin:22px 0 12px}
  .tnote{padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid var(--rule)}
  .tnote:last-of-type{border-bottom:0}
  .tnote-q{font-family:"SBL Hebrew","Times New Roman",Georgia,serif;font-size:17px;
    color:var(--ink);margin:0 0 7px}
  .comm{padding:0 0 18px;margin:0 0 18px;border-bottom:1px solid var(--rule)}
  .comm:last-of-type{border:0}
  .comm-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
  .comm-who{font-family:var(--scripture);font-size:18px;font-weight:600}
  .comm-when{font:500 12px/1 var(--ui);color:var(--faint);flex:none}
  .comm-body{font-size:15px;line-height:1.68;color:var(--muted);margin:0}
  .comm-body em{color:var(--ink);font-style:italic;font-weight:500}
  .related h4{font:600 12px/1 var(--ui);color:var(--faint);margin:4px 0 13px;text-transform:uppercase;letter-spacing:.06em}
  .xref{display:flex;gap:12px;align-items:baseline;padding:0 0 13px;margin:0 0 13px;
    border-bottom:1px solid var(--rule);cursor:pointer}
  .xref:last-child{border:0;margin-bottom:0;padding-bottom:0}
  .xref-ref{font:600 12.5px/1.5 var(--ui);color:var(--rubric);flex:none;width:74px}
  .xref-text{font-family:var(--scripture);font-size:16px;line-height:1.55;color:var(--muted)}
  .voice{display:flex;gap:5px;margin-bottom:16px;overflow-x:auto;padding-bottom:3px}
  .voice::-webkit-scrollbar{height:0}
  .voice button{border:1.5px solid var(--rule);background:none;border-radius:22px;cursor:pointer;white-space:nowrap;
    font:500 12.5px/1 var(--ui);color:var(--muted);padding:11px 14px;flex:none;min-height:42px}
  .voice button[data-on="true"]{border-color:var(--ink);color:var(--ink);background:var(--chip)}
  .obs{display:flex;gap:13px;padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--rule)}
  .obs:last-of-type{border:0;margin-bottom:0;padding-bottom:0}
  .obs-mark{font-family:var(--scripture);font-size:17px;font-weight:600;color:var(--rubric);flex:none;width:16px;line-height:1.5}
  .obs-text{font-size:15px;line-height:1.68;color:var(--ink);margin:0}
  .obs-text em{font-style:italic;font-weight:500}
  .ask{padding:16px;border:1.5px solid var(--rule);border-radius:11px;margin-bottom:11px;
    font-family:var(--scripture);font-size:17px;line-height:1.55}
  .ask button{display:block;background:none;border:0;padding:12px 0 0;cursor:pointer;font:600 13px/1 var(--ui);color:var(--rubric)}
  .markchip{display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;margin-bottom:11px;
    cursor:pointer;border:1.5px solid var(--rule);background:var(--paper);min-height:48px}
  .markchip[data-sel="true"]{border-color:var(--ink)}
  .markdot{width:20px;height:20px;border-radius:6px;flex:none;display:flex;align-items:center;
    justify-content:center;font:700 9px/1 var(--ui);color:#111317}
  .markchip-text{font-family:var(--scripture);font-size:15px;color:var(--muted);flex:1;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .markchip-label{font:500 11.5px/1 var(--ui);color:var(--faint);flex:none}

  .editor{position:absolute;inset:0;z-index:9;background:var(--sheet);display:flex;flex-direction:column;
    transform:translateY(100%);visibility:hidden;
    transition:transform .26s cubic-bezier(.22,.75,.3,1),visibility 0s linear .26s}
  .editor[data-open="true"]{transform:translateY(0);visibility:visible;
    transition:transform .26s cubic-bezier(.22,.75,.3,1),visibility 0s linear 0s}
  .ed-head{flex:none;padding:calc(var(--top) + 10px) 12px 10px 18px;display:flex;align-items:center;gap:10px;
    border-bottom:1px solid var(--rule)}
  .ed-ref{flex:1;font:600 13px/1.35 var(--ui);color:var(--rubric);min-width:0}
  .ed-done{border:0;border-radius:11px;background:var(--ink);color:var(--paper);font:600 15px/1 var(--ui);
    padding:13px 20px;min-height:46px;cursor:pointer;flex:none}
  .ed-quote{flex:none;padding:13px 18px 0;font-family:var(--scripture);font-size:17px;line-height:1.5}
  .ed-meta{flex:none;padding:7px 18px 10px;font:500 11.5px/1.4 var(--ui);color:var(--faint);
    display:flex;align-items:center;gap:7px}
  .ed-meta i{width:13px;height:13px;border-radius:4px;display:block;flex:none}
  .ed-tools{flex:none;display:flex;gap:4px;padding:0 18px 10px;flex-wrap:wrap;align-items:center}
  .ed-tools button{background:none;border:1.5px solid var(--rule);border-radius:8px;cursor:pointer;
    font:500 12.5px/1 var(--ui);color:var(--muted);padding:10px 11px;min-width:40px;min-height:40px}
  .ed-tools .del{border:0;color:var(--rubric);font-weight:600;margin-left:auto}
  .ed-body{flex:1;display:flex;min-height:0;padding:0 18px calc(var(--bot) + 14px)}
  .ed-body textarea{flex:1;width:100%;border:1.5px solid var(--rule);border-radius:12px;padding:14px;
    font:400 16px/1.65 var(--ui);color:var(--ink);background:var(--paper);resize:none}
  .ed-body textarea:focus{outline:0;border-color:var(--ink)}
  .mnote-body{border:1.5px solid var(--rule);border-radius:10px;padding:12px;min-height:58px;
    font:400 15px/1.6 var(--ui);color:var(--ink);cursor:pointer;white-space:pre-wrap;background:var(--sheet)}
  .mnote-body[data-empty="1"]{color:var(--faint)}
  .mnote{border:1.5px solid var(--rule);border-radius:12px;padding:13px;margin-bottom:14px;
    background:var(--paper)}
  .mnote[data-active="true"]{border-color:var(--ink);background:var(--sheet)}
  .mnote-q{font-family:var(--scripture);font-size:16.5px;line-height:1.55;margin:0 0 7px;color:var(--ink)}
  .mnote-meta{font:500 11.5px/1.4 var(--ui);color:var(--faint);margin:0 0 11px;
    display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .mnote-meta i{width:13px;height:13px;border-radius:4px;display:block;flex:none}
  .mnote textarea{width:100%;min-height:82px;border:1.5px solid var(--rule);border-radius:10px;padding:12px;
    font:400 16px/1.6 var(--ui);color:var(--ink);background:var(--sheet);resize:vertical;display:block}
  .mnote textarea:focus{outline:0;border-color:var(--ink)}
  .mnote[data-active="true"] textarea{min-height:132px}
  .mnote .preview{min-height:82px;font-size:16px}
  .mnote-tools{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-top:10px}
  .mnote-tools button{background:none;border:1.5px solid var(--rule);border-radius:8px;cursor:pointer;
    font:500 12.5px/1 var(--ui);color:var(--muted);padding:10px 11px;min-width:40px;min-height:40px}
  .mnote-tools button[data-on="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .mnote-tools .del{border:0;color:var(--rubric);font-weight:600;margin-left:auto;padding:10px 2px}
  .formrow{margin-bottom:15px}
  .formrow h5{font:600 11.5px/1 var(--ui);color:var(--faint);margin:0 0 9px;text-transform:uppercase;letter-spacing:.07em}
  .formpick{display:flex;gap:5px}
  .formpick button{flex:1;border:1.5px solid var(--rule);border-radius:10px;background:none;cursor:pointer;
    font-family:var(--scripture);font-size:15px;color:var(--ink);min-height:50px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
  .formpick button[data-on="true"]{border-color:var(--ink);background:var(--chip)}
  .formpick u{font-size:8px;font-family:var(--ui);font-weight:600;letter-spacing:.04em;
    text-decoration:none;color:var(--faint)}
  .formpick button[data-on="true"] u{color:var(--ink)}
  .formpick .fx{padding:1px 4px;display:inline-block}
  .formpick button[data-f="fill"] .fx{background:var(--fp);border-radius:3px;color:#111317}
  .formpick button[data-f="underline"] .fx{text-decoration:underline;text-decoration-color:var(--fpi);
    text-decoration-thickness:2.5px;text-underline-offset:3px}
  .formpick button[data-f="box"] .fx{box-shadow:inset 0 0 0 2px var(--fpi);border-radius:4px;padding:1px 4px}
  .formpick button[data-f="bracket"] em{color:var(--fpi);font-style:normal;font-weight:700;font-family:var(--ui)}

  .fmtbar{display:flex;gap:4px;margin-bottom:11px;flex-wrap:wrap;align-items:center}
  .fmtbar button{background:none;border:1.5px solid var(--rule);border-radius:8px;cursor:pointer;
    font:500 13px/1 var(--ui);color:var(--muted);padding:11px 12px;min-width:42px;min-height:42px}
  .fmtbar button[data-on="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  #noteBody{width:100%;min-height:150px;border:1.5px solid var(--rule);border-radius:11px;padding:14px;
    font:400 16px/1.7 var(--ui);color:var(--ink);background:var(--paper);resize:vertical}
  #noteBody:focus{outline:0;border-color:var(--ink);background:var(--sheet)}
  .preview{border:1.5px solid var(--rule);border-radius:11px;padding:14px;font-size:16px;line-height:1.7;
    background:var(--paper);min-height:150px}
  .preview h3{font:600 17px/1.4 var(--ui);margin:14px 0 6px}
  .preview h3:first-child{margin-top:0}
  .preview p{margin:0 0 11px}
  .preview ul{margin:0 0 11px;padding-left:21px}
  .preview blockquote{margin:0 0 11px;padding-left:13px;border-left:3px solid var(--rubric);
    font-family:var(--scripture);font-size:16px;color:var(--muted)}
  .preview a{color:var(--rubric);text-decoration:none;border-bottom:1.5px dotted var(--rubric)}
  .note-meta{display:flex;justify-content:space-between;align-items:center;margin-top:13px;font-size:12.5px;color:var(--faint)}
  .note-meta button{background:none;border:0;font:600 13px/1 var(--ui);color:var(--rubric);cursor:pointer;padding:8px 0}
  .empty{font-size:15px;line-height:1.68;color:var(--muted);margin:0}
  .empty b{color:var(--ink);font-weight:600}
  .ghost{border:1.5px solid var(--rule);border-radius:10px;background:none;padding:14px 16px;
    font:500 14px/1 var(--ui);color:var(--ink);cursor:pointer;margin-top:15px;min-height:48px}

  /* Provisional banner: this content is a stand-in, and says so. */
  .provisional{border:1.5px dashed var(--ctx);border-radius:11px;padding:13px 14px;
    margin:0 0 18px;font:450 13.5px/1.6 var(--ui);color:var(--muted);background:var(--paper)}
  .provisional b{display:block;font:600 10.5px/1 var(--ui);color:var(--ctx);
    text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
  .prov-line{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule);
    font:450 12px/1.65 var(--ui);color:var(--faint)}
  .intro-load{font:450 14px/1.7 var(--ui);color:var(--faint);margin:0}
  .intro-body{font-size:15.5px;line-height:1.72;color:var(--muted)}
  .intro-body p{margin:0 0 13px}
  .bookmeta{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 20px}
  .bookmeta span{font:500 12.5px/1 var(--ui);color:var(--muted);background:var(--chip);padding:9px 12px;border-radius:22px}
  .bookq{margin:0 0 19px}
  .bookq h4{font:600 12px/1 var(--ui);color:var(--rubric);margin:0 0 8px;text-transform:uppercase;letter-spacing:.06em}
  .bookq p{font-size:16px;line-height:1.68;color:var(--muted);margin:0}
  .bookq p b{color:var(--ink);font-weight:600}
  .watch{padding:16px;border-radius:11px;background:var(--paper);border:1px solid var(--rule);margin-top:6px}
  .watch h4{font:600 12px/1 var(--ui);color:var(--rubric);margin:0 0 11px;text-transform:uppercase;letter-spacing:.06em}
  .watch ul{margin:0;padding-left:19px}
  .watch li{font-size:15px;line-height:1.66;color:var(--muted);margin-bottom:11px}
  .watch li:last-child{margin-bottom:0}
  .book-foot{padding:14px 20px calc(var(--bot) + 20px);flex:none;border-top:1px solid var(--rule);display:flex;gap:9px}
  .book-foot button{border:0;border-radius:11px;cursor:pointer;font:600 15px/1 var(--ui);padding:17px;min-height:52px}
  .book-foot .primary{background:var(--ink);color:var(--paper);flex:1}
  .book-foot .secondary{background:none;border:1.5px solid var(--rule);color:var(--muted);flex:0 0 auto;padding:17px 19px}
  /* a sub-point sits under its section rather than beside it */
  .out-item[data-sub="true"]{padding-left:22px;background:var(--paper)}
  .out-item[data-sub="true"] .out-name{font-size:15px;color:var(--muted)}
  .out-item[data-sub="true"] .out-ref{font-size:11px}
  .out-item{display:flex;gap:13px;padding:16px 0;border-bottom:1px solid var(--rule);cursor:pointer}
  .out-item:last-child{border:0}
  .out-ref{font:600 12.5px/1.5 var(--ui);color:var(--rubric);flex:none;width:80px}
  .out-name{font-family:var(--scripture);font-size:18px;font-weight:500;line-height:1.35;margin:0}
  .out-desc{font-size:14px;line-height:1.6;color:var(--faint);margin:5px 0 0}
  .out-item[data-here="true"] .out-name{color:var(--rubric);font-weight:600}
  .out-item[data-here="true"]::after{content:"here";font:600 11px/1 var(--ui);color:var(--rubric);
    align-self:center;margin-left:auto;flex:none;border:1.5px solid var(--rubric);padding:5px 8px;border-radius:20px}
  .filt{padding:0 20px 10px;flex:none}
  .filt-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px}
  .filt-row::-webkit-scrollbar{height:0}
  .filt-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 20px 10px;flex:none}
  .filt-head b{font:600 11.5px/1 var(--ui);color:var(--faint);text-transform:uppercase;letter-spacing:.07em}
  .filt-head button{background:none;border:0;font:600 12.5px/1 var(--ui);color:var(--rubric);
    cursor:pointer;padding:8px 0}
  .filt-head button:disabled{color:var(--faint);opacity:.6}
  .lib-count{padding:0 20px 12px;font:450 12.5px/1.5 var(--ui);color:var(--faint);flex:none}
  .lib-list{flex:1;overflow-y:auto;padding:0 20px calc(var(--bot) + 28px)}
  .chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 20px 16px;flex:none}
  .chip{border:1.5px solid var(--rule);background:none;border-radius:22px;cursor:pointer;font:500 12.5px/1 var(--ui);
    color:var(--muted);padding:11px 14px;display:flex;align-items:center;gap:7px;min-height:42px}
  .chip[data-on="true"]{border-color:var(--ink);color:var(--ink);background:var(--chip)}
  .chip i{width:16px;height:16px;border-radius:5px;display:flex;align-items:center;justify-content:center;
    font:700 8px/1 var(--ui);color:#111317;font-style:normal}
  .lib-item{padding:16px 0;border-bottom:1px solid var(--rule);cursor:pointer}
  .lib-item-top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
  .lib-ref{font:600 12.5px/1 var(--ui);color:var(--rubric)}
  .lib-label{font:500 11.5px/1 var(--ui);color:var(--faint)}
  .lib-quote{font-family:var(--scripture);font-size:17px;line-height:1.7;margin:0 0 6px}
  .lib-note{font-size:14px;line-height:1.6;color:var(--muted);margin:0;display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  .disp{height:auto;max-height:92%}
  /* Settings.
     One spacing scale throughout: 10 between a label and its control, 18 between rows,
     26 before a new section. Sections are separated by a filled bar rather than a rule,
     so the eye can find them while scrolling. */
  .disp-body{padding:0 0 calc(var(--bot) + 24px);overflow-y:auto}
  .disp .full-head{padding:4px 12px 12px 20px}
  .disp-body::-webkit-scrollbar{width:0}

  .disp-group{display:block;margin:26px 0 0;padding:11px 20px;
    background:var(--ink);color:var(--paper);
    font:600 11px/1.35 var(--ui);text-transform:uppercase;letter-spacing:.1em}
  .disp-group:first-of-type{margin-top:18px}

  .disp-row{margin:0;padding:18px 20px;border-bottom:1px solid var(--rule)}
  .disp-row h4{font:600 12px/1 var(--ui);color:var(--faint);margin:0 0 10px;
    text-transform:uppercase;letter-spacing:.07em}
  .disp-note{font:450 12.5px/1.55 var(--ui);color:var(--faint);margin:10px 0 0}
  /* a section bar carries its own edge, so the row above it needs no rule */
  .disp-row:has(+ .disp-group),.switch-row:has(+ .disp-group){border-bottom:0}
  .disp-row:last-child,.switch-row:last-child{border-bottom:0}
  /* where :has is unavailable the bar's own top border keeps the seam clean */
  .disp-group{border-top:1px solid var(--rule)}
  .link-btn{background:none;border:0;padding:12px 0 0;cursor:pointer;
    font:600 13.5px/1.3 var(--ui);color:var(--rubric);text-align:left}
  .trans-btn{width:100%;display:flex;align-items:center;gap:10px;border:1.5px solid var(--rule);
    border-radius:12px;background:none;cursor:pointer;padding:15px 16px;min-height:52px;
    font:500 16px/1.25 var(--ui);color:var(--ink);text-align:left}
  .trans-btn i{margin-left:auto;flex:none;width:8px;height:8px;border-right:2px solid var(--faint);
    border-bottom:2px solid var(--faint);transform:rotate(45deg) translateY(-2px);display:block;
    transition:transform .2s ease}
  .trans-btn[aria-expanded="true"] i{transform:rotate(-135deg) translateY(-2px)}
  .trans-btn[aria-expanded="true"]{border-color:var(--ink)}
  .trans-list{display:none;margin-top:10px;border:1.5px solid var(--rule);border-radius:12px;
    max-height:300px;overflow-y:auto;background:var(--paper)}
  .trans-list[data-open="true"]{display:block}
  .trans-list::-webkit-scrollbar{width:0}
  .trans-row{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;
    border-bottom:1px solid var(--rule);min-height:56px}
  .trans-row:last-child{border-bottom:0}
  .trans-row[data-on="true"]{background:var(--chip)}
  .voice-group{font:600 10.5px/1 var(--ui);color:var(--faint);text-transform:uppercase;
    letter-spacing:.07em;margin:0;padding:13px 16px 7px;border-bottom:1px solid var(--rule)}
  .trans-row b{font:500 15.5px/1.3 var(--ui);color:var(--ink);display:block}
  .trans-row span{font:450 12px/1.3 var(--ui);color:var(--faint);display:block;margin-top:3px}
  .trans-row[data-red="1"] span{color:var(--wj)}
  .trans-row s{margin-left:auto;flex:none;text-decoration:none;font:600 11px/1 var(--ui);color:var(--rubric)}
  .sizer{display:flex;align-items:center;gap:12px}
  .sizer button{flex:none;width:56px;height:52px;border:1.5px solid var(--rule);border-radius:11px;background:none;
    color:var(--ink);cursor:pointer;font-family:var(--scripture);font-weight:600}
  .sizer button:disabled{opacity:.35}
  .sizer .small{font-size:16px}.sizer .big{font-size:26px}
  .sizer-track{flex:1;display:flex;gap:4px;align-items:center}
  .sizer-track i{flex:1;height:4px;border-radius:3px;background:var(--rule)}
  .sizer-track i[data-on="true"]{background:var(--rubric)}
  .seg3{display:flex;gap:4px;background:var(--chip);border-radius:12px;padding:3px}
  .seg3 button{flex:1;background:none;border:0;border-radius:10px;cursor:pointer;font:500 13.5px/1.25 var(--ui);
    color:var(--muted);padding:13px 4px;min-height:48px}
  .seg3 button[data-on="true"]{background:var(--sheet);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.14)}
  .switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:16px 20px;
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .switch-row p{margin:0;font:500 15px/1.4 var(--ui);color:var(--ink)}
  .switch-row span{display:block;font:450 12.5px/1.5 var(--ui);color:var(--faint);margin-top:4px}
  .switch-row p{padding-right:4px}
  .switch{width:54px;height:32px;border-radius:20px;border:0;background:var(--rule);position:relative;
    cursor:pointer;flex:none;transition:background-color .2s ease}
  .switch[data-on="true"]{background:var(--rubric)}
  .switch i{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;
    transition:transform .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.3)}
  .switch[data-on="true"] i{transform:translateX(22px)}
  .sample{border:1px solid var(--rule);border-radius:11px;padding:16px;
    background:var(--paper);margin:0}
  .sample p{font-family:var(--scripture);font-size:var(--size);line-height:calc(var(--lh) + .15);
    font-weight:var(--wt);margin:0;color:var(--ink)}

  .export{position:absolute;inset:0;background:#111317;z-index:11;transform:translateY(100%);
    pointer-events:none;visibility:hidden;
    transition:transform .28s cubic-bezier(.22,.75,.3,1),visibility 0s linear .28s;
    display:flex;flex-direction:column}
  .export[data-open="true"]{transform:translateY(0);pointer-events:auto;visibility:visible;
    transition:transform .28s cubic-bezier(.22,.75,.3,1),visibility 0s linear 0s}
  .exp-head{padding:calc(var(--top) + 20px) 20px 12px;display:flex;justify-content:space-between;align-items:center;flex:none}
  .exp-title{font:600 15px/1 var(--ui);color:#fff}
  .exp-head button{background:none;border:0;color:#FFFFFFC4;font:500 14px/1 var(--ui);cursor:pointer;padding:10px}
  .exp-fmt{display:flex;gap:6px;padding:0 20px 14px;flex:none}
  .exp-fmt button{background:#FFFFFF1C;border:0;color:#FFFFFFC4;font:500 13px/1 var(--ui);padding:11px 14px;
    border-radius:9px;cursor:pointer;min-height:42px}
  .exp-fmt button[data-on="true"]{background:#FFFFFF38;color:#fff}
  .exp-body{flex:1;overflow:auto;margin:0 20px 18px;padding:16px;background:#00000047;border-radius:11px;
    font:400 12.5px/1.75 ui-monospace,Menlo,monospace;color:#EDEEEB;white-space:pre-wrap}
  .exp-foot{padding:0 20px calc(var(--bot) + 24px);flex:none}
  .exp-foot{display:flex;gap:8px}
  .exp-foot button{flex:1;background:#FFFFFF1C;border:0;color:#fff;font:600 15px/1 var(--ui);padding:17px;
    border-radius:11px;cursor:pointer}
  .exp-foot button#downloadExport{background:#FFFFFF3D}
  .exp-scope{font:500 13px/1.5 var(--ui);color:#FFFFFFD6;margin:0 0 16px;padding:0 20px}
  .exp-label{font:600 10.5px/1 var(--ui);color:#FFFFFF8A;text-transform:uppercase;letter-spacing:.08em;
    margin:0 0 8px;padding:0 20px}
  .exp-fmt button:disabled{opacity:.32}
  .exp-rule{font:450 12px/1.55 var(--ui);color:#FFD9A8;margin:0 0 14px;padding:0 20px}
  @media (hover:none){
    input,textarea,select{font-size:16px !important}
  }
  @media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}