/* ── Early English Books — reader + catalogue, on the PRDL shared system ── */
*{box-sizing:border-box}
html{--read-fs:18px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent2);text-decoration-thickness:.06em;text-underline-offset:.14em}
.loading,.err{padding:2rem 1rem;color:var(--muted)}
.err a{white-space:nowrap}

/* masthead */
.masthead{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.55rem clamp(.9rem,3vw,2rem);background:var(--card);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--fg)}
.brand-mark{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:var(--radius-sm);
  background:var(--accent);color:#fff;font:700 .85rem/1 var(--font-ui);letter-spacing:.02em}
.brand-name{font:600 1.05rem/1 var(--font-display);letter-spacing:.01em}
.m-left{display:flex;align-items:center;gap:.5rem;min-width:0}
.m-controls{display:flex;align-items:center;gap:.5rem}
.mc.menu{display:none}   /* Contents hamburger — mobile only (beats .mc display) */
.mc{border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:var(--radius-sm);
  height:2rem;min-width:2rem;padding:0 .5rem;font:1rem/1 var(--font-ui);cursor:pointer;
  display:inline-flex;align-items:center;gap:.3rem;transition:background var(--dur-fast),border-color var(--dur-fast),scale .12s cubic-bezier(.2,0,0,1)}
.mc:hover{border-color:var(--accent)}
.mc.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.sizer{padding:0 .6rem}.sizer span{color:var(--muted);font-size:.8rem}.sizer .big{font-size:1.05rem}
.sizer input{width:5.5rem;accent-color:var(--accent)}

/* layout */
.app{display:grid;grid-template-columns:minmax(15rem,19rem) 1fr;align-items:start}
.sidebar{position:sticky;top:3.1rem;align-self:start;height:calc(100vh - 3.1rem);overflow:auto;
  padding:1.1rem 1rem 3rem;background:var(--sidebar);border-right:1px solid var(--border);font-family:var(--font-ui)}
.back{display:inline-block;color:var(--muted);text-decoration:none;font-size:.85rem;margin-bottom:.9rem}
.back:hover{color:var(--accent2)}
.toc-head{font:700 .72rem/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin:0 0 .6rem}
.toc ul{list-style:none;margin:0;padding:0 0 0 .2rem}
.toc ul ul{padding-left:.8rem;border-left:1px solid var(--rule-soft);margin-left:.25rem}
.toc li{margin:.05rem 0}
.toc a{display:block;color:var(--fg);text-decoration:none;font-size:.84rem;line-height:1.4;
  padding:.18rem .4rem;border-radius:var(--radius-sm);opacity:.85}
.toc a:hover{background:var(--accent-tint);opacity:1}
.toc a.here{background:color-mix(in oklch,var(--accent) 16%,transparent);color:var(--accent2);opacity:1;font-weight:600}
.toc summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start}
.toc summary::-webkit-details-marker{display:none}
.toc summary::before{content:"▸";color:var(--muted);font-size:.7rem;margin:.34rem .25rem 0 -.15rem;transition:transform var(--dur-fast)}
.toc details[open]>summary::before{transform:rotate(90deg)}
.toc summary a{flex:1}

/* reading column — wide & left-aligned (column scales with the font size) */
.reader{padding:clamp(1.1rem,1.8vw,2rem) clamp(1rem,3vw,2.8rem) 6rem;min-width:0}
.work{max-width:min(53em,100%);margin:0;font-size:var(--read-fs);line-height:1.5}
.work-head{margin:0 0 2.2rem;padding-bottom:1.3rem;border-bottom:2px solid var(--accent-soft)}
.work-head h1{font:600 1.95em/1.1 var(--font-display);margin:.1em 0 .3em;color:var(--fg);text-wrap:balance;letter-spacing:-.005em}
.byline{font-family:var(--font-ui);font-size:.82em;color:var(--accent2);margin:.2em 0;font-variant-numeric:tabular-nums}
.extent,.prov{font-family:var(--font-ui);font-size:.7em;color:var(--muted);margin:.15em 0}
.prov{font-style:italic}

.dv{scroll-margin-top:4rem}
.dv-h{font-family:var(--font-display);font-weight:600;line-height:1.25;color:var(--fg);text-wrap:balance;
  margin:1.6em 0 .5em}
h2.dv-h{font-size:1.3em;margin-top:2em}h3.dv-h{font-size:1.12em}h4.dv-h{font-size:1em;letter-spacing:.01em}
h5.dv-h{font-size:.92em;color:var(--muted)}
.dv1>.dv-h{padding-top:.4em;border-top:1px solid var(--rule-soft)}
.dv-t{text-align:left;hyphens:none;text-wrap:pretty}
.dv-t p{margin:0 0 .9em;text-indent:1.3em}
.dv-t p:first-child,.dv-h+.dv-t p:first-child{text-indent:0}
.dv-t .hw{display:block;font-family:var(--font-display);font-weight:600;font-size:1.05em;text-indent:0;margin:.2em 0 .4em}
.dv-t i{font-style:italic}
.dv-t .arg{margin:.6em 0;padding:.4em 0 .4em 1em;border-left:2px solid var(--accent-soft);color:var(--muted);font-size:.92em}
/* marginal / foot notes (EEBO-TCP glosses & references) — de-emphasized, set off from the body */
/* marginal notes — collapsed to a small superscript marker (hover = preview, click = expand) */
.dv-t .note{cursor:pointer;color:var(--accent2);font-style:normal}
.dv-t .note:not(.open){font-size:0;letter-spacing:0}
.dv-t .note:not(.open)::before{content:"\00B0";font-size:.95rem;line-height:0;vertical-align:.35em;font-weight:700;letter-spacing:normal}
.dv-t .note.open{font-size:.74em;font-style:italic;color:var(--col);background:var(--accent-tint);padding:.02em .35em;border-radius:3px;margin:0 .12em}
.dv-t .note.open::before{content:"⟨";opacity:.55} .dv-t .note.open::after{content:"⟩";opacity:.55}
.dv-t .note i{font-style:normal}
/* when the Notes toggle is on, every note opens */
.notes-shown .dv-t .note{font-size:.74em;font-style:italic;color:var(--col);background:var(--accent-tint);padding:.02em .35em;border-radius:3px;margin:0 .12em}
.notes-shown .dv-t .note::before{content:"⟨";opacity:.55;font-size:inherit;vertical-align:baseline;font-weight:400} .notes-shown .dv-t .note::after{content:"⟩";opacity:.55}
.dv-t ul{margin:.5em 0 .9em 1.4em;padding:0}.dv-t li{margin:.12em 0}
/* printed-page markers: a quiet inline superscript that flows with the prose
   (display:inline, NOT inline-block — inline-block is atomic and forces a ragged
   gap when a page break lands mid-line; inline lets the text close around it) */
.pb{display:inline;font:600 .52em/0 var(--font-ui);color:var(--col);
  user-select:none;opacity:.42;vertical-align:.5em;letter-spacing:.01em;
  transition:opacity .15s ease}
.pb[data-pg]::before{content:attr(data-pg);white-space:nowrap;margin:0 .12em}
.pb:hover{opacity:.85}
.pb:not([data-pg]){display:none}

/* findbar */
.findbar{position:fixed;top:3.4rem;right:clamp(.8rem,3vw,2rem);z-index:40;display:flex;align-items:center;gap:.3rem;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:.3rem .45rem;
  box-shadow:0 6px 24px rgba(0,0,0,.14)}
.findbar input{border:0;background:none;color:var(--fg);font:.9rem var(--font-ui);min-width:11rem;outline:none}
.findbar .fc{color:var(--muted);font:.75rem var(--font-ui);font-variant-numeric:tabular-nums;min-width:3.2rem;text-align:right}
.findbar button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:.95rem;padding:.1rem .35rem;border-radius:var(--radius-sm)}
.findbar button:hover{background:var(--accent-tint);color:var(--accent2)}
mark.fh{background:var(--hl);color:inherit;border-radius:2px}
mark.fh.on{background:var(--accent);color:#fff}

/* contents filter (reader sidebar) */
.toc-search{width:100%;margin:0 0 .6rem;padding:.4rem .55rem;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);font:.82rem var(--font-ui);outline:none}
.toc-search:focus{border-color:var(--accent)}
.toc a.match{background:var(--hl);font-weight:600}

/* ── landing page ── */
.home{max-width:64rem;margin:0 auto;padding:clamp(1.5rem,5vw,3.5rem) clamp(1rem,4vw,2rem) 6rem}
.hero{text-align:center;padding:1rem 0 2rem}
.hero h1{font:600 clamp(2.2rem,6vw,3.6rem)/1 var(--font-display);margin:.2em 0 .25em;letter-spacing:.005em;text-wrap:balance}
.lede{max-width:40rem;margin:.4rem auto 1.6rem;color:var(--muted);font-size:1.04rem;line-height:1.55;text-wrap:balance}
.lede b{color:var(--accent2);font-variant-numeric:tabular-nums}
.searchwrap{position:relative;max-width:34rem;margin:0 auto}
#q{width:100%;padding:.85rem 1.1rem;border:1.5px solid var(--border);border-radius:var(--radius-full);
  background:var(--card);color:var(--fg);font:1.05rem var(--font-body);outline:none;
  box-shadow:0 1px 3px rgba(0,0,0,.05);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
#q:focus{border-color:var(--accent);box-shadow:0 2px 12px color-mix(in oklch,var(--accent) 22%,transparent)}
.smode{display:inline-flex;margin:.85rem auto 0;padding:.25rem;background:var(--bg-warm);border:1px solid var(--border);border-radius:var(--radius-full)}
.sm{border:0;background:none;color:var(--muted);font:600 .82rem var(--font-ui);padding:.42rem 1.15rem;border-radius:var(--radius-full);cursor:pointer;letter-spacing:.01em;transition:color var(--dur-fast),background var(--dur-fast),scale .12s cubic-bezier(.2,0,0,1)}
.sm:hover{color:var(--fg)}
.sm.active{background:var(--accent);color:#fff;box-shadow:0 1px 5px color-mix(in oklch,var(--accent) 35%,transparent)}
.q-state{display:block;margin:.55rem 0 0;font:.78rem var(--font-ui);color:var(--muted);font-variant-numeric:tabular-nums;transition:color var(--dur)}
.q-state.ready{color:color-mix(in oklch,var(--accent) 75%,var(--muted))}
.r-x{display:block;font:.82rem/1.45 var(--font-body);color:var(--muted);margin-top:.25rem}
.r-x mark{background:var(--hl);color:inherit;border-radius:2px;padding:0 .1em}

/* browse */
.browse-tabs{display:flex;gap:.3rem;justify-content:center;margin:0 0 1.4rem;border-bottom:1px solid var(--border)}
.bt{border:0;background:none;color:var(--muted);font:600 .92rem var(--font-ui);padding:.6rem 1rem;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast),scale .12s cubic-bezier(.2,0,0,1)}
.bt:hover{color:var(--fg)} .bt.active{color:var(--accent2);border-bottom-color:var(--accent)}
.facets.dec{display:grid;gap:.3rem;max-width:44rem;margin:0 auto}
.dec-b{display:grid;grid-template-columns:3.4rem 1fr 4rem;align-items:center;gap:.7rem;border:0;background:none;
  cursor:pointer;padding:.3rem .5rem;border-radius:var(--radius-sm);color:var(--fg);font:inherit;text-align:left}
.dec-b:hover{background:var(--accent-tint)}
.dec-n{font:600 .9rem var(--font-ui);font-variant-numeric:tabular-nums}
.dec-bar{height:.7rem;background:var(--rule-soft);border-radius:var(--radius-full);overflow:hidden}
.dec-bar>span{display:block;height:100%;background:var(--accent);border-radius:var(--radius-full)}
.dec-c{font:.8rem var(--font-ui);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.facets.ini{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;max-width:44rem;margin:0 auto}
.ini-b{min-width:3.6rem;border:1px solid var(--border);background:var(--card);border-radius:var(--radius-md);
  padding:.5rem .4rem;cursor:pointer;color:var(--fg);font:700 1.05rem var(--font-display);display:flex;flex-direction:column;align-items:center;gap:.1rem}
.ini-b span{font:400 .68rem var(--font-ui);color:var(--muted);font-variant-numeric:tabular-nums}
.ini-b:hover{border-color:var(--accent);color:var(--accent2)}
.facets.plc{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;max-width:48rem;margin:0 auto}
.plc-b{border:1px solid var(--border);background:var(--card);border-radius:var(--radius-full);
  padding:.4rem .85rem;cursor:pointer;color:var(--fg);font:.88rem var(--font-ui)}
.plc-b span{color:var(--muted);margin-left:.4rem;font-size:.78rem;font-variant-numeric:tabular-nums}
.plc-b:hover{border-color:var(--accent);color:var(--accent2)}
/* shared facet intro + filter */
.facet-intro{color:var(--muted);font:.86rem/1.5 var(--font-ui);text-align:center;margin:0 auto 1.1rem;max-width:40rem}
.facet-filter{display:block;width:min(26rem,100%);margin:0 auto 1.3rem;padding:.55rem .95rem;border:1px solid var(--border);
  border-radius:var(--radius-full);background:var(--card);color:var(--fg);font:.92rem var(--font-body);outline:none}
.facet-filter:focus{border-color:var(--accent)}
/* Puritans — a clean ranked author list */
.facets.pur{max-width:52rem;margin:0 auto}
.auth-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:0 1rem}
.auth-row{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:.7rem;border:0;background:none;cursor:pointer;
  text-align:left;padding:.46rem .55rem;border-radius:var(--radius-sm);color:var(--fg);border-bottom:1px solid var(--rule-soft)}
.auth-row .an{flex:1 1 auto;min-width:0}
.auth-row:hover{background:var(--accent-tint)}
.auth-row .an{font:.95rem/1.3 var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-row .ac{flex:none;font:.7rem var(--font-ui);color:var(--muted);font-variant-numeric:tabular-nums;
  background:var(--bg-warm);padding:.06rem .5rem;border-radius:var(--radius-full)}
/* Scripture — reference search + Testament-grouped book index */
.facets.scr{max-width:50rem;margin:0 auto}
.scr-search{max-width:34rem;margin:0 auto .3rem}
.scr-search input{width:100%;padding:.72rem 1.15rem;border:1.5px solid var(--border);border-radius:var(--radius-full);
  background:var(--card);color:var(--fg);font:1rem var(--font-body);outline:none}
.scr-search input:focus{border-color:var(--accent);box-shadow:0 2px 12px color-mix(in oklch,var(--accent) 20%,transparent)}
.scr-sec{margin:0 0 1.5rem}
.scr-sec h4{font:700 .72rem var(--font-ui);letter-spacing:.13em;text-transform:uppercase;color:var(--accent2);
  margin:0 0 .65rem;padding-bottom:.32rem;border-bottom:1px solid var(--rule-soft)}
.scr-books{display:flex;flex-wrap:wrap;gap:.42rem}
.scr-bk{display:inline-flex;align-items:baseline;gap:.42rem;border:1px solid var(--border);background:var(--card);
  border-radius:var(--radius-full);padding:.36rem .85rem;cursor:pointer;color:var(--fg);font:.88rem var(--font-body)}
.scr-bk:hover{border-color:var(--accent);color:var(--accent2)}
.scr-bk .bc{font:.7rem var(--font-ui);color:var(--muted);font-variant-numeric:tabular-nums}

/* tactile press feedback — scale(0.96) on click; controls without an existing
   transition get one here (no clobber, since they declared none above) */
.dec-b,.auth-row,.scr-bk,.ini-b,.plc-b{transition:background .14s ease,border-color .14s ease,color .14s ease,scale .12s cubic-bezier(.2,0,0,1)}
.sm:active,.bt:active,.mc:active,.dec-b:active,.auth-row:active,.scr-bk:active,.ini-b:active,.plc-b:active{scale:.96}
@media(prefers-reduced-motion:reduce){.sm:active,.bt:active,.mc:active,.dec-b:active,.auth-row:active,.scr-bk:active,.ini-b:active,.plc-b:active{scale:1}}

/* results */
.results{max-width:46rem;margin:0 auto}
.r-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin:0 0 1rem;padding-bottom:.6rem;border-bottom:2px solid var(--accent-soft)}
.r-head h2{font:600 1.25rem var(--font-display);margin:0}
.r-head span{font:.82rem var(--font-ui);color:var(--muted);font-variant-numeric:tabular-nums}
.r-list{display:flex;flex-direction:column}
.r{display:block;padding:.7rem .6rem;border-radius:var(--radius-sm);text-decoration:none;color:var(--fg);
  border-bottom:1px solid var(--rule-soft)}
.r:hover{background:var(--accent-tint)}
.r-t{display:block;font:600 1rem/1.35 var(--font-body);color:var(--fg)}
.r-m{display:block;font:.8rem var(--font-ui);color:var(--muted);margin-top:.12rem;font-variant-numeric:tabular-nums}
.r{transition:background .14s ease}
.r:active{background:var(--accent-tint)}
.r-empty{padding:1.6rem .6rem;color:var(--muted);font:.95rem/1.55 var(--font-body);text-wrap:pretty}
/* "Load more" / "Show all" controls for full-text results */
.r-more{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;padding:1.5rem 0 .4rem}
.more-btn{font:600 .9rem/1 var(--font-ui);color:#fff;background:var(--accent);border:0;
  border-radius:.7rem;padding:0 1.3rem;min-height:40px;cursor:pointer;font-variant-numeric:tabular-nums;
  box-shadow:0 1px 2px rgba(0,0,0,.13),0 6px 16px -6px color-mix(in oklch,var(--accent),transparent 50%);
  transition:scale .12s cubic-bezier(.2,0,0,1),background .15s ease}
.more-btn:hover{background:var(--accent2)}
.more-btn:active{scale:.96}
.more-btn:disabled{opacity:.6;cursor:default}
.more-btn.ghost{color:var(--accent);background:transparent;
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--accent),transparent 58%)}
.more-btn.ghost:hover{background:color-mix(in oklch,var(--accent),transparent 92%)}
@media(prefers-reduced-motion:reduce){.more-btn{transition:background .15s ease}.more-btn:active,.r:active{scale:1}}

/* scrim behind the mobile Contents drawer */
.scrim{display:none}
/* ── mobile (≤900px): full-width reading, Contents as a toggled drawer ── */
@media (max-width:900px){
  :root{--read-fs:17px}                      /* smaller mobile reading size (TGC-style — more text on screen) */
  .app{grid-template-columns:1fr}
  .mc.menu{display:inline-flex}
  .work{line-height:1.55}
  .masthead{padding:.5rem .8rem}
  .brand-name{font-size:.98rem}
  .sizer{display:none}                       /* size via the drawer/pinch; keep masthead tidy */
  .reader{padding:1.15rem 1.05rem 5rem}
  .work{max-width:100%}
  .work-head{margin-bottom:1.6rem}
  .work-head h1{font-size:1.3em}
  .dv-t{text-align:left}
  .sidebar{position:fixed;left:0;top:0;height:100dvh;width:min(87vw,22rem);z-index:60;padding-top:1.1rem;
    transform:translateX(-101%);transition:transform var(--dur) var(--ease);
    box-shadow:6px 0 34px rgba(0,0,0,.28)}
  .sidebar.open{transform:none}
  .scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.42);
    opacity:0;pointer-events:none;transition:opacity var(--dur)}
  .scrim.on{opacity:1;pointer-events:auto}
  .findbar{top:3rem;right:.6rem;left:.6rem}
  .findbar input{min-width:0;flex:1}
}
@media (max-width:430px){
  .work-head h1{font-size:1.18em}
  .brand-name{display:none}
}

/* ═══════════════════ notebook: highlights, toolbar, composer, panel ═══════════════════ */
/* highlights — translucent so they adapt to light/sepia/dark; clone across line wraps */
mark.ann{color:inherit;border-radius:2px;padding:.04em 0;cursor:pointer;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  background:rgba(250,204,21,.40);transition:filter .12s ease}
mark.ann:hover{filter:brightness(.96) saturate(1.15)}
mark.ann.c-y{background:rgba(250,204,21,.42)}
mark.ann.c-g{background:rgba(52,211,153,.38)}
mark.ann.c-b{background:rgba(96,165,250,.36)}
mark.ann.c-p{background:rgba(244,114,182,.36)}
mark.ann.flash{animation:annFlash 1.1s ease}
[data-theme=dark] mark.ann.c-y{background:rgba(250,204,21,.34)}
[data-theme=dark] mark.ann.c-g{background:rgba(52,211,153,.30)}
[data-theme=dark] mark.ann.c-b{background:rgba(96,165,250,.32)}
[data-theme=dark] mark.ann.c-p{background:rgba(244,114,182,.32)}
@keyframes annFlash{0%,100%{box-shadow:0 0 0 0 transparent}30%{box-shadow:0 0 0 4px color-mix(in oklch,var(--accent) 45%,transparent)}}

/* count badge on the notebook masthead button */
.mc.nb{position:relative}
.mc.nb[data-n]:not([data-n=""])::after{content:attr(data-n);position:absolute;top:-5px;right:-5px;
  min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:var(--accent);color:#fff;
  font:700 .6rem/16px var(--font-ui);text-align:center;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px var(--masthead,var(--bg))}

/* shared highlight colours (swatches + dots) */
.sel-c{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);cursor:pointer;padding:0;
  transition:transform .12s cubic-bezier(.2,0,0,1),box-shadow .12s ease}
.sel-c:hover{transform:scale(1.16)}.sel-c:active{transform:scale(.92)}
.sel-c.c-y,.np-dot.c-y{background:#facc15}.sel-c.c-g,.np-dot.c-g{background:#34d399}
.sel-c.c-b,.np-dot.c-b{background:#60a5fa}.sel-c.c-p,.np-dot.c-p{background:#f472b6}

/* floating selection toolbar */
.sel-bar{position:absolute;z-index:1200;display:flex;align-items:center;gap:.2rem;padding:.28rem .35rem;
  background:#211e1a;color:#fff;border-radius:.7rem;font:600 .82rem var(--font-ui);
  box-shadow:0 6px 20px -6px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.06)}
.sel-bar[hidden]{display:none}
.sel-note,.sel-copy{border:0;background:none;color:#fff;cursor:pointer;padding:.34rem .55rem;border-radius:.48rem;
  font:inherit;display:inline-flex;align-items:center;min-height:34px;
  transition:background .12s ease,scale .12s cubic-bezier(.2,0,0,1)}
.sel-note:hover,.sel-copy:hover{background:rgba(255,255,255,.16)}
.sel-note:active,.sel-copy:active{scale:.94}
.sel-cols{display:flex;gap:.26rem;padding:0 .3rem;border-left:1px solid rgba(255,255,255,.16);border-right:1px solid rgba(255,255,255,.16);margin:0 .1rem}

/* note composer + email modal (shared shell) */
.nc-modal,.eb-modal{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;
  padding:1rem;background:rgba(20,18,15,.46);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.nc-box,.eb-box{background:var(--card);border-radius:1rem;padding:1.25rem;width:min(30rem,100%);
  box-shadow:0 18px 50px -14px rgba(0,0,0,.45),0 3px 10px rgba(0,0,0,.16);animation:ncIn .22s cubic-bezier(.2,0,0,1)}
@keyframes ncIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.nc-quote{font:italic .98rem/1.5 var(--font-body);color:var(--fg);background:var(--accent-tint);
  border-radius:.6rem;padding:.65rem .85rem;margin-bottom:.85rem;text-wrap:pretty;max-height:7.5rem;overflow:auto}
.nc-text{width:100%;min-height:5.5rem;resize:vertical;border:1.5px solid var(--border);border-radius:.6rem;
  padding:.65rem .8rem;font:1rem/1.5 var(--font-body);background:var(--bg);color:var(--fg);outline:none;
  transition:border-color .14s ease}
.nc-text:focus{border-color:var(--accent)}
.nc-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.9rem;flex-wrap:wrap}
.nc-cols{display:flex;gap:.4rem}
.nc-cols .sel-c{width:23px;height:23px;border-color:var(--border)}
.nc-cols .sel-c.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent)}
.nc-act{display:flex;gap:.5rem;flex-wrap:wrap}
.nc-btn,.eb-btn{font:600 .88rem var(--font-ui);border:1px solid var(--border);background:var(--bg);color:var(--fg);
  border-radius:.6rem;padding:0 1rem;min-height:40px;cursor:pointer;
  transition:background .12s ease,border-color .12s ease,scale .12s cubic-bezier(.2,0,0,1)}
.nc-btn:hover,.eb-btn:hover{border-color:var(--accent)}
.nc-btn:active,.eb-btn:active{scale:.96}
.nc-btn.primary,.eb-btn.primary{background:var(--accent);color:#fff;border-color:transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 6px 16px -6px color-mix(in oklch,var(--accent),transparent 50%)}
.nc-btn.primary:hover,.eb-btn.primary:hover{background:var(--accent2)}
.nc-del{color:#c0392b}
.eb-title{font:600 1.18rem var(--font-display);margin:0 0 .9rem}
.eb-f{display:block;margin-bottom:.7rem}
.eb-f span{display:block;font:.78rem var(--font-ui);color:var(--muted);margin-bottom:.25rem}
.eb-f input{width:100%;padding:.6rem .8rem;border:1.5px solid var(--border);border-radius:.6rem;
  background:var(--bg);color:var(--fg);font:1rem var(--font-body);outline:none;transition:border-color .14s ease}
.eb-f input:focus{border-color:var(--accent)}
.eb-err{color:#c0392b;font:.8rem var(--font-ui);min-height:1rem;margin:.1rem 0 .5rem;text-wrap:pretty}
.eb-act{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}

/* in-reader notes panel (right drawer) */
.notes-panel{position:fixed;top:0;right:0;height:100dvh;width:min(22rem,92vw);z-index:1100;
  background:var(--card);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:-10px 0 32px -14px rgba(0,0,0,.34),0 0 0 1px var(--rule-soft);
  transform:translateX(101%);transition:transform .26s cubic-bezier(.2,0,0,1)}
.notes-panel.open{transform:none}
.np-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:1rem 1.1rem .55rem;font:600 1.06rem var(--font-display)}
.np-x{border:0;background:none;color:var(--muted);font-size:1rem;cursor:pointer;width:40px;height:40px;
  border-radius:.5rem;transition:background .12s ease,scale .12s cubic-bezier(.2,0,0,1)}
.np-x:hover{background:var(--accent-tint);color:var(--fg)}.np-x:active{scale:.94}
.np-acct{padding:0 1.1rem .85rem;font:.79rem/1.5 var(--font-ui);color:var(--muted);
  border-bottom:1px solid var(--rule-soft)}
.np-acct a{color:var(--accent2);font-weight:600}
.np-link{border:0;background:none;color:var(--accent2);cursor:pointer;font:inherit;font-weight:600;padding:0;text-decoration:underline}
.np-list{overflow:auto;padding:.5rem .65rem 2.5rem;display:flex;flex-direction:column;gap:.15rem}
.np-item{display:flex;gap:.55rem;padding:.6rem .55rem;border-radius:.6rem;transition:background .12s ease}
.np-item:hover{background:var(--accent-tint)}
.np-dot{flex:none;width:.72rem;height:.72rem;border-radius:50%;margin-top:.3rem;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.np-body{min-width:0}
.np-q{display:block;font:.92rem/1.42 var(--font-body);color:var(--fg);cursor:pointer;text-wrap:pretty}
.np-q:hover{color:var(--accent2)}
.np-note{font:.82rem/1.46 var(--font-ui);color:var(--muted);margin-top:.22rem;text-wrap:pretty}
.np-empty{padding:1.4rem 1.15rem;color:var(--muted);font:.92rem/1.6 var(--font-body);text-wrap:pretty}
.np-empty a{color:var(--accent2);font-weight:600}

/* top sign-in bar (notebook + landing; reader suppresses it) */
#auth-bar{background:var(--masthead,#15120e);color:#fff;font:.82rem var(--font-ui)}
.auth-in{max-width:64rem;margin:0 auto;display:flex;align-items:center;gap:.7rem;padding:.42rem 1.15rem;flex-wrap:wrap}
.auth-av{width:22px;height:22px;border-radius:50%}
.auth-nm{font-weight:600}
.auth-sync{color:#7ddba0;font-size:.74rem;font-variant-numeric:tabular-nums}
.auth-prompt{color:rgba(255,255,255,.84);flex:1 1 14rem;min-width:0;text-wrap:pretty}
.auth-link{color:#fff;text-decoration:underline;font-weight:600}
.auth-btn{border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.09);color:#fff;border-radius:.55rem;
  padding:0 .85rem;min-height:34px;cursor:pointer;font:600 .8rem var(--font-ui);
  transition:background .12s ease,scale .12s cubic-bezier(.2,0,0,1)}
.auth-btn:hover{background:rgba(255,255,255,.18)}.auth-btn:active{scale:.96}
.auth-g{background:#fff;color:#1a1714;border-color:#fff}.auth-g:hover{background:#eee}
.auth-x{margin-left:auto;border:0;background:none;color:rgba(255,255,255,.6);font-size:1.05rem;cursor:pointer;
  width:34px;height:34px;border-radius:.4rem;transition:background .12s ease,color .12s ease}
.auth-x:hover{color:#fff;background:rgba(255,255,255,.12)}

@media (prefers-reduced-motion:reduce){
  .notes-panel{transition:none}.nc-box,.eb-box{animation:none}mark.ann.flash{animation:none}
  .sel-note:active,.sel-copy:active,.nc-btn:active,.eb-btn:active,.np-x:active,.auth-btn:active,.sel-c:active{scale:1}
}

/* ── notebook page (notebook.html) ── */
.nb-page{max-width:48rem;margin:0 auto;padding:clamp(1.4rem,3vw,2.6rem) clamp(1rem,3vw,1.6rem) 5rem}
.nb-hero{margin-bottom:1.5rem}
.nb-hero h1{font:600 clamp(1.8rem,4vw,2.5rem)/1.05 var(--font-display);margin:0 0 .35rem;letter-spacing:-.012em;text-wrap:balance}
.nb-sub{color:var(--muted);font:1rem/1.5 var(--font-body);margin:0;text-wrap:pretty}
.nb-stat{font-variant-numeric:tabular-nums}
.nb-tools{display:flex;gap:.6rem;margin-top:1.1rem;flex-wrap:wrap}
.nb-tools input{flex:1 1 15rem;min-width:0;padding:.6rem .95rem;border:1.5px solid var(--border);border-radius:var(--radius-full);
  background:var(--card);color:var(--fg);font:.95rem var(--font-body);outline:none;transition:border-color .14s ease}
.nb-tools input:focus{border-color:var(--accent)}
.nb-work{margin:0 0 1.9rem}
.nb-wh{display:flex;align-items:baseline;gap:.65rem;padding-bottom:.5rem;margin-bottom:.45rem;border-bottom:1px solid var(--rule-soft)}
.nb-wt{font:600 1.12rem var(--font-display);color:var(--fg);text-decoration:none;flex:1 1 auto;min-width:0;text-wrap:balance}
.nb-wt:hover{color:var(--accent2)}
.nb-wa{font:.8rem var(--font-ui);color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.nb-wc{flex:none;font:.72rem var(--font-ui);color:var(--muted);background:var(--bg-warm);padding:.08rem .5rem;
  border-radius:var(--radius-full);font-variant-numeric:tabular-nums}
.nb-notes{display:flex;flex-direction:column;gap:.15rem}
.nb-note{display:flex;gap:.65rem;padding:.7rem .6rem;border-radius:var(--radius-md);transition:background .12s ease}
.nb-note:hover{background:var(--accent-tint)}
.nb-nbody{min-width:0;flex:1}
.nb-q{display:block;font:italic 1rem/1.5 var(--font-body);color:var(--fg);text-decoration:none;text-wrap:pretty}
.nb-q:hover{color:var(--accent2)}
.nb-c{font:.9rem/1.5 var(--font-ui);color:var(--muted);margin-top:.3rem;text-wrap:pretty}
.nb-meta{display:flex;align-items:center;gap:.95rem;margin-top:.45rem;font:.76rem var(--font-ui);color:var(--muted)}
.nb-meta time{font-variant-numeric:tabular-nums}
.nb-link{border:0;background:none;color:var(--accent2);cursor:pointer;font:600 .76rem var(--font-ui);padding:0;transition:color .12s ease}
.nb-link:hover{text-decoration:underline}
.nb-d:hover{color:#c0392b}
.nb-none{color:var(--muted);padding:1.5rem .3rem;font:1rem var(--font-body)}
.nb-empty{text-align:center;padding:2.8rem 1rem;max-width:30rem;margin:1rem auto}
.nb-empty-mark{font-size:2.6rem;line-height:1;color:var(--accent);opacity:.5;margin-bottom:.6rem}
.nb-empty h2{font:600 1.4rem var(--font-display);margin:0 0 .6rem}
.nb-empty p{color:var(--muted);font:1rem/1.6 var(--font-body);margin:0 0 1.4rem;text-wrap:pretty}
.nb-cta{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font:600 .95rem var(--font-ui);
  padding:.7rem 1.4rem;border-radius:.7rem;
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 6px 16px -6px color-mix(in oklch,var(--accent),transparent 50%);
  transition:background .15s ease,scale .12s cubic-bezier(.2,0,0,1)}
.nb-cta:hover{background:var(--accent2)}.nb-cta:active{scale:.96}
@media (prefers-reduced-motion:reduce){.nb-cta:active{scale:1}}

/* masthead Notebook link + landing "continue reading" chip */
.mc.nbk{font:600 .82rem var(--font-ui);padding:0 .8rem;text-decoration:none;color:var(--fg);white-space:nowrap}
.mc.nbk span{font-size:.95rem;line-height:0}
.resume{display:inline-flex;align-items:baseline;gap:.5rem;margin:.1rem 0 1.4rem;padding:.5rem 1.05rem;
  background:var(--accent-tint);border-radius:var(--radius-full);color:var(--fg);text-decoration:none;
  font:.92rem var(--font-body);max-width:min(92%,40rem);text-align:left;
  transition:background .14s ease,scale .12s cubic-bezier(.2,0,0,1)}
.resume:hover{background:color-mix(in oklch,var(--accent) 15%,transparent)}
.resume:active{scale:.975}
.resume-k{flex:none;font:700 .66rem var(--font-ui);text-transform:uppercase;letter-spacing:.07em;color:var(--accent2)}
@media (prefers-reduced-motion:reduce){.resume:active{scale:1}}

/* ── author directory (Author search mode + By-Author browse filter) ── */
.facets.ini-wrap{display:block;max-width:48rem;margin:0 auto}
.facets.ini-wrap .facet-filter{margin-bottom:.6rem}
.auth-list.big{margin-top:.3rem}
.auth-row .ad{color:var(--muted);font-weight:400;font-size:.84em;margin-left:.12em;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.facet-none{color:var(--muted);font:1rem/1.5 var(--font-body);text-align:center;padding:1.6rem 0;text-wrap:pretty}
/* the segmented Title · Author · Full-text control keeps its labels on one line */
.sm{white-space:nowrap}
@media (max-width:430px){ .sm{padding:.42rem .8rem;font-size:.78rem} .smode{max-width:100%} }

/* impeccable pass — author-name prominence + a one-shot results entrance */
.auth-row .an{font-weight:500}
.results:not([hidden]){animation:resIn .26s cubic-bezier(.2,0,0,1)}
@keyframes resIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.results:not([hidden]){animation:none}}

/* ── Scripture: a Bible citation map (book bars → chapter heatmap → works) ── */
.facets.scr{max-width:52rem;margin:0 auto}
#scrView{margin-top:.2rem}
/* book overview — ranked intensity bars, two columns on wider screens */
.scr-bklist{display:grid;grid-template-columns:1fr;gap:.1rem;margin:0 auto}
@media (min-width:680px){.scr-bklist{grid-template-columns:1fr 1fr;gap:.1rem 1.4rem}}
.scrbk{display:grid;grid-template-columns:8.6rem 1fr 3rem;align-items:center;gap:.6rem;border:0;background:none;
  cursor:pointer;padding:.34rem .45rem;border-radius:var(--radius-sm);color:var(--fg);font:inherit;text-align:left;
  transition:background .12s ease,scale .12s cubic-bezier(.2,0,0,1)}
.scrbk:hover{background:var(--accent-tint)} .scrbk:active{scale:.985}
.scrbk-n{font:.88rem var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scrbk-bar{height:.5rem;background:var(--rule-soft);border-radius:var(--radius-full);overflow:hidden}
.scrbk-bar>span{display:block;height:100%;background:var(--accent);border-radius:var(--radius-full);
  transition:width .4s cubic-bezier(.2,0,0,1)}
.scrbk-c{font:.76rem var(--font-ui);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
/* chapter heatmap */
.scr-back{margin:.2rem 0 .4rem}
.scr-up{border:0;background:none;color:var(--muted);cursor:pointer;font:600 .84rem var(--font-ui);
  padding:.35rem .3rem;border-radius:var(--radius-sm);transition:color .12s ease,scale .12s cubic-bezier(.2,0,0,1)}
.scr-up:hover{color:var(--accent2)} .scr-up:active{scale:.96}
.scr-bhead{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin:0 0 .2rem}
.scr-bhead h3{font:600 1.35rem var(--font-display);margin:0;letter-spacing:-.01em}
.scr-bhead span{font:.8rem var(--font-ui);color:var(--muted);font-variant-numeric:tabular-nums}
.scr-heat{display:flex;flex-wrap:wrap;gap:.32rem;margin-top:.7rem}
.scr-cell{width:2.75rem;height:2.75rem;border:1px solid var(--rule-soft);border-radius:var(--radius-sm);
  background:color-mix(in oklch, var(--accent) var(--i,8%), var(--card));color:var(--fg);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;
  font-variant-numeric:tabular-nums;transition:transform .12s cubic-bezier(.2,0,0,1),box-shadow .12s ease}
.scr-cell:hover{transform:scale(1.09);box-shadow:0 3px 10px rgba(0,0,0,.18);z-index:2}
.scr-cell:active{transform:scale(.97)}
.scr-cell.dk{color:#fff;border-color:transparent}
.scr-cell .cn{font:600 .85rem/1 var(--font-ui)}
.scr-cell .cc{font:400 .56rem/1 var(--font-ui);opacity:.78}
@media (prefers-reduced-motion:reduce){.scrbk-bar>span{transition:none}.scr-cell:hover,.scrbk:active,.scr-up:active,.scr-cell:active{transform:none;scale:1}}
@media (max-width:430px){.scr-cell{width:2.5rem;height:2.5rem}.scrbk{grid-template-columns:7.4rem 1fr 2.7rem}}

/* ── citation dialog (Reference / BibTeX / RIS + PNG card) + toolbar Cite ── */
.ct-modal{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:1rem;
  background:rgba(20,18,15,.46);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.ct-box{background:var(--card);border-radius:1rem;padding:1.25rem;width:min(37rem,100%);
  box-shadow:0 18px 50px -14px rgba(0,0,0,.45),0 3px 10px rgba(0,0,0,.16);animation:ncIn .22s cubic-bezier(.2,0,0,1)}
.ct-title{font:600 1.18rem var(--font-display);margin:0 0 .5rem}
.ct-meta{font:.88rem/1.45 var(--font-body);color:var(--muted);margin-bottom:.75rem;text-wrap:pretty}
.ct-meta i{color:var(--fg)}
.ct-tabs{display:inline-flex;gap:.2rem;padding:.22rem;background:var(--bg-warm);border:1px solid var(--border);
  border-radius:var(--radius-full);margin-bottom:.75rem}
.ct-tab{border:0;background:none;color:var(--muted);font:600 .8rem var(--font-ui);padding:.36rem .95rem;
  border-radius:var(--radius-full);cursor:pointer;white-space:nowrap;
  transition:color .12s ease,background .12s ease,scale .12s cubic-bezier(.2,0,0,1)}
.ct-tab:hover{color:var(--fg)} .ct-tab:active{scale:.96}
.ct-tab.on{background:var(--accent);color:#fff;box-shadow:0 1px 4px color-mix(in oklch,var(--accent) 35%,transparent)}
.ct-out{width:100%;resize:vertical;border:1.5px solid var(--border);border-radius:.6rem;padding:.65rem .8rem;
  font:.82rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg);color:var(--fg);outline:none;
  white-space:pre-wrap;word-break:break-word;transition:border-color .14s ease}
.ct-out:focus{border-color:var(--accent)}
.ct-act{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.9rem}
.ct-btn{font:600 .86rem var(--font-ui);border:1px solid var(--border);background:var(--bg);color:var(--fg);
  border-radius:.6rem;padding:0 .95rem;min-height:40px;cursor:pointer;
  transition:background .12s ease,border-color .12s ease,scale .12s cubic-bezier(.2,0,0,1)}
.ct-btn:hover{border-color:var(--accent)} .ct-btn:active{scale:.96}
.ct-btn:disabled{opacity:.5;cursor:default}
.ct-btn.primary{background:var(--accent);color:#fff;border-color:transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 6px 16px -6px color-mix(in oklch,var(--accent),transparent 50%)}
.ct-btn.primary:hover{background:var(--accent2)}
.ct-card{margin-right:auto}   /* group the card download apart from copy/close */
.sel-cite{border:0;background:none;color:#fff;cursor:pointer;padding:.34rem .55rem;border-radius:.48rem;
  font:600 .82rem var(--font-ui);display:inline-flex;align-items:center;min-height:34px;
  border-left:1px solid rgba(255,255,255,.16);margin-left:.12rem;
  transition:background .12s ease,scale .12s cubic-bezier(.2,0,0,1)}
.sel-cite:hover{background:rgba(255,255,255,.16)} .sel-cite:active{scale:.94}
@media (prefers-reduced-motion:reduce){.ct-btn:active,.ct-tab:active,.sel-cite:active{scale:1}.ct-box{animation:none}}

/* ── MOBILE FINDBAR = the PLD idiom (owner 2026-07-22, from a phone ride: the top-docked bar
   sat over the masthead and the opening lines). ≤880px the findbar DOCKS AT THE BOTTOM in
   thumb reach (above the safe area), full-width, 16px input (kills the iOS focus snap-zoom),
   44px hit targets. Desktop keeps the top-right placement untouched. ── */
@media (max-width:880px){
  .findbar{
    top:auto; right:.6rem; left:.6rem;
    bottom:calc(.7rem + env(safe-area-inset-bottom));
    padding:.45rem .6rem; gap:.35rem;
    border-radius:14px;
    box-shadow:0 -2px 10px rgba(0,0,0,.08), 0 10px 34px rgba(0,0,0,.22);
  }
  .findbar input{font-size:16px; min-width:0; flex:1 1 auto}
  .findbar button{min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; padding:0}
  .findbar .fc{min-width:2.6rem; font-size:.72rem}
}

/* ── SELECTION TOOLBAR touch targets (2026-07-22 audit: dots 20px, copy 28×34, ✧ 76×36 — under
   the family 44px law). Touch devices get real hit areas; desktop pointer sizes unchanged. ── */
@media (hover:none), (max-width:880px){
  .sel-bar{flex-wrap:wrap;max-width:94vw;gap:.3rem;padding:.4rem .5rem}
  .sel-bar > button, .sel-bar .sb-par{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .sel-c{width:28px;height:28px;position:relative}
  .sel-c::after{content:"";position:absolute;inset:-9px}   /* 46px true hit area, dot stays calm */
  .sel-cols{gap:.55rem;padding:0 .5rem}
}

/* ── IMMERSIVE READING (2026-07-22, TFR parity): ≤880px, scrolling down glides the chrome away —
   masthead up, thumb bar down, one shared duration/curve — and the prose runs full-bleed
   (the sticky masthead already overlays flow, so text is beneath it; no dead band). Tap the
   prose to toggle chrome back (Books interaction; links/buttons/notes/selection excluded;
   near the top chrome always stays). Scroll-up reveals as before. ── */
@media (max-width:880px){
  .masthead{transition:transform .3s var(--ease-premium,cubic-bezier(.32,.72,0,1))}
  #eeboThumb{transition:transform .3s var(--ease-premium,cubic-bezier(.32,.72,0,1))}
  html.eebo-immersive .masthead{transform:translateY(-110%)}
  html.eebo-immersive #eeboThumb{transform:translateY(120%)}
}