:root{
  --bg:#F3EAD3;
  --surface:#FAF4E4;
  --ink:#2E2418;
  --ink-soft:#6B5B45;
  --rule:rgba(94,70,36,.18);
  --gold:#8A6214;
  --gold-strong:#6E4C0C;
  --gold-wash:rgba(138,98,20,.14);
  --faience:#6E7F4F;
  --faience-wash:rgba(110,127,79,.22);
  --faience-ink:#3D4A26;
  --world:#6A5A42;
  --world-wash:rgba(106,90,66,.10);
  --era-a:#E9DCBC;
  --era-b:#E0D1AB;
  --lane-alt:rgba(94,70,36,.035);
  --map-land:#EFE3C4;
  --map-sea:#9DB5B8;
  --map-ink:#2E2418;
  --map-ink-soft:#7A6A50;
  --page:#F4EBD5;
  --jesus:#8C2F1E;
  --accent:#8C2F1E;
  --judah:#8C2F1E;
  --israel:#3E5F73;
  --rome:#6A3D7A;
  --herod:#2D6A5F;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.353 0 0 0 0 0.243 0 0 0 0 0.102 0.26 0 0 0 -0.109'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.478 0 0 0 0 0.329 0 0 0 0 0.141 0.16 0 0 0 -0.067'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --vignette:radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(120,84,36,.10) 100%);
  color-scheme:light;
  --serif:"Alegreya", Georgia, "Times New Roman", serif;
  --sans:"Alegreya Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  box-sizing:border-box;
}
/* Automatic: parchment by day, lamplight when the device or viewer is in dark mode */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1F1912;
    --surface:#2A221A;
    --ink:#E9DDC4;
    --ink-soft:#B3A488;
    --rule:rgba(233,221,196,.13);
    --gold:#D9A94E;
    --gold-strong:#EDC56E;
    --gold-wash:rgba(217,169,78,.17);
    --faience:#9DB077;
    --faience-wash:rgba(157,176,119,.20);
    --faience-ink:#DDE8C6;
    --world:#BFAE8E;
    --world-wash:rgba(191,174,142,.09);
    --era-a:#2A2219;
    --era-b:#332A20;
    --lane-alt:rgba(233,221,196,.025);
    --map-land:#2E261C;
    --map-sea:#3F5A5E;
    --map-ink:#E9DDC4;
    --map-ink-soft:#B3A488;
    --page:#221B14;
    --jesus:#E8A085;
    --accent:#D9A94E;
    --judah:#E8A085;
    --israel:#8FB4CC;
    --rome:#C9A3D6;
    --herod:#86C2B4;
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.941 0 0 0 0 0.867 0 0 0 0 0.722 0.1 0 0 0 -0.042'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
    --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.000 0 0 0 0 0.000 0 0 0 0 0.000 0.2 0 0 0 -0.084'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
    --vignette:radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(0,0,0,.28) 100%);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1F1912;
  --surface:#2A221A;
  --ink:#E9DDC4;
  --ink-soft:#B3A488;
  --rule:rgba(233,221,196,.13);
  --gold:#D9A94E;
  --gold-strong:#EDC56E;
  --gold-wash:rgba(217,169,78,.17);
  --faience:#9DB077;
  --faience-wash:rgba(157,176,119,.20);
  --faience-ink:#DDE8C6;
  --world:#BFAE8E;
  --world-wash:rgba(191,174,142,.09);
  --era-a:#2A2219;
  --era-b:#332A20;
  --lane-alt:rgba(233,221,196,.025);
  --map-land:#2E261C;
  --map-sea:#3F5A5E;
  --map-ink:#E9DDC4;
  --map-ink-soft:#B3A488;
  --page:#221B14;
  --jesus:#E8A085;
  --accent:#D9A94E;
  --judah:#E8A085;
  --israel:#8FB4CC;
  --rome:#C9A3D6;
  --herod:#86C2B4;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.941 0 0 0 0 0.867 0 0 0 0 0.722 0.1 0 0 0 -0.042'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.000 0 0 0 0 0.000 0 0 0 0 0.000 0.2 0 0 0 -0.084'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --vignette:radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(0,0,0,.28) 100%);
  color-scheme:dark;
}
/* A theme the reader picked always wins */
:root[data-palette="parchment"]{
  --bg:#F3EAD3;
  --surface:#FAF4E4;
  --ink:#2E2418;
  --ink-soft:#6B5B45;
  --rule:rgba(94,70,36,.18);
  --gold:#8A6214;
  --gold-strong:#6E4C0C;
  --gold-wash:rgba(138,98,20,.14);
  --faience:#6E7F4F;
  --faience-wash:rgba(110,127,79,.22);
  --faience-ink:#3D4A26;
  --world:#6A5A42;
  --world-wash:rgba(106,90,66,.10);
  --era-a:#E9DCBC;
  --era-b:#E0D1AB;
  --lane-alt:rgba(94,70,36,.035);
  --map-land:#EFE3C4;
  --map-sea:#9DB5B8;
  --map-ink:#2E2418;
  --map-ink-soft:#7A6A50;
  --page:#F4EBD5;
  --jesus:#8C2F1E;
  --accent:#8C2F1E;
  --judah:#8C2F1E;
  --israel:#3E5F73;
  --rome:#6A3D7A;
  --herod:#2D6A5F;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.353 0 0 0 0 0.243 0 0 0 0 0.102 0.26 0 0 0 -0.109'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.478 0 0 0 0 0.329 0 0 0 0 0.141 0.16 0 0 0 -0.067'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --vignette:radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(120,84,36,.10) 100%);
  color-scheme:light;
}
:root[data-palette="vellum"]{
  --bg:#F6F1E6;
  --surface:#FCF9F2;
  --ink:#1F2A44;
  --ink-soft:#5A6178;
  --rule:rgba(31,42,68,.13);
  --gold:#9A7217;
  --gold-strong:#7A580B;
  --gold-wash:rgba(154,114,23,.14);
  --faience:#2B776B;
  --faience-wash:rgba(43,119,107,.17);
  --faience-ink:#15463F;
  --world:#5A5E6E;
  --world-wash:rgba(90,94,110,.09);
  --era-a:#ECE4D3;
  --era-b:#E2D8C3;
  --lane-alt:rgba(31,42,68,.025);
  --map-land:#F1EAD9;
  --map-sea:#93B6CC;
  --map-ink:#1F2638;
  --map-ink-soft:#6A7085;
  --page:#FAF7EF;
  --jesus:#9E2F28;
  --accent:#2B4A8B;
  --judah:#9E2F28;
  --israel:#2B4A8B;
  --rome:#5B3480;
  --herod:#1F6B5E;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.290 0 0 0 0 0.251 0 0 0 0 0.188 0.14 0 0 0 -0.059'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --mottle:none;
  --vignette:none;
  color-scheme:light;
}
:root[data-palette="lamplight"]{
  --bg:#1F1912;
  --surface:#2A221A;
  --ink:#E9DDC4;
  --ink-soft:#B3A488;
  --rule:rgba(233,221,196,.13);
  --gold:#D9A94E;
  --gold-strong:#EDC56E;
  --gold-wash:rgba(217,169,78,.17);
  --faience:#9DB077;
  --faience-wash:rgba(157,176,119,.20);
  --faience-ink:#DDE8C6;
  --world:#BFAE8E;
  --world-wash:rgba(191,174,142,.09);
  --era-a:#2A2219;
  --era-b:#332A20;
  --lane-alt:rgba(233,221,196,.025);
  --map-land:#2E261C;
  --map-sea:#3F5A5E;
  --map-ink:#E9DDC4;
  --map-ink-soft:#B3A488;
  --page:#221B14;
  --jesus:#E8A085;
  --accent:#D9A94E;
  --judah:#E8A085;
  --israel:#8FB4CC;
  --rome:#C9A3D6;
  --herod:#86C2B4;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.941 0 0 0 0 0.867 0 0 0 0 0.722 0.1 0 0 0 -0.042'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.000 0 0 0 0 0.000 0 0 0 0 0.000 0.2 0 0 0 -0.084'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --vignette:radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(0,0,0,.28) 100%);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%; margin:0; background:var(--vignette), var(--grain), var(--mottle), var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px;
  display:flex; flex-direction:column; overflow:hidden; -webkit-text-size-adjust:100%}
button,input,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* Header */
.top{display:flex; align-items:center; gap:12px 24px; flex-wrap:wrap; padding:12px 18px 10px; border-bottom:1px solid var(--rule)}
/* the logo fills the space beside the controls: up to 497 px wide (50 px tall), down to 240 px before the controls wrap */
.brand{margin-right:auto; flex:1 1 240px; max-width:497px; min-width:0}
.brand h1{margin:0; line-height:0}
/* a lighter copy of the logo (dark tones lightened, same hues) for the dark theme */
.brand .logo{display:block; width:100%; height:auto}
.brand .logo-dark{display:none}
:root[data-palette="lamplight"] .brand .logo-light{display:none}
:root[data-palette="lamplight"] .brand .logo-dark{display:block}
@media (prefers-color-scheme: dark){ :root:not([data-palette]) .brand .logo-light{display:none} :root:not([data-palette]) .brand .logo-dark{display:block} }
.controls{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.controls input,.controls select{height:36px; border:1px solid var(--rule); background:var(--surface); border-radius:6px; padding:0 10px}
.controls input{width:220px}
.controls select{max-width:210px}
.zoomgrp{display:flex; border:1px solid var(--rule); border-radius:6px; overflow:hidden; background:var(--surface)}
.zoomgrp button{height:34px; min-width:38px; border:0; background:none; cursor:pointer; padding:0 10px; font-size:18px; line-height:1}
.zoomgrp button+button{border-left:1px solid var(--rule)}
.zoomgrp button.fit{font-size:14px}
.zoomgrp button:hover{background:var(--gold-wash)}

/* Stage */
#stage{position:relative; flex:1; min-height:0; display:flex; flex-direction:column; touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab}
#stage.dragging{cursor:grabbing}
#axis{position:relative; height:30px; flex:none; overflow:hidden; background:var(--gold-wash); border-bottom:1px solid var(--gold)}
.tick{position:absolute; top:7px; left:0; font-size:12.5px; font-weight:700; color:var(--ink); white-space:nowrap; transform-origin:left; font-variant-numeric:tabular-nums}
#eraband{position:relative; height:34px; flex:none; overflow:hidden; border-bottom:1px solid var(--rule)}
.era{position:absolute; top:0; height:100%; left:0; overflow:hidden; border:0; padding:0; margin:0; cursor:pointer; text-align:left;
  background:var(--era-a); border-right:1px solid var(--rule)}
.era.alt{background:var(--era-b)}
.era span{position:absolute; top:7px; left:0; white-space:nowrap; font-family:var(--serif); font-style:italic; font-size:15px}
.era.planned span{color:var(--ink-soft)}
.era:hover{filter:brightness(1.04)}
.era:active{box-shadow:inset 0 0 12px 1px var(--gold)}
/* the eras light up one after another, left to right, to show they can be tapped (eraGlow in 02-timeline.js) */
@keyframes bt-era-glow{0%,100%{box-shadow:inset 0 0 0 0 transparent; filter:none} 45%{box-shadow:inset 0 0 14px 2px var(--gold), inset 0 -2px 0 var(--gold); filter:brightness(1.08)}}
@keyframes bt-era-glow-tx{0%,100%{text-shadow:none} 45%{text-shadow:0 0 8px var(--gold), 0 0 2px var(--gold)}}
#eraband.glow .era{animation:bt-era-glow 1s ease-in-out calc(var(--i) * 70ms) 1 both}
#eraband.glow .era span{animation:bt-era-glow-tx 1s ease-in-out calc(var(--i) * 70ms) 1 both}
@media (prefers-reduced-motion:reduce){ #eraband.glow .era, #eraband.glow .era span{animation:none} }
/* zoomed all the way out: a click zooms in, and a drag stretches the timeline a little and springs back */
#stage.atmin #body{cursor:zoom-in}
#stage.atmin.dragging #body{cursor:grabbing}
#stage.rb #axis, #stage.rb #eraband, #stage.rb #body{translate:var(--rb) 0}
#stage.rb-back #axis, #stage.rb-back #eraband, #stage.rb-back #body{transition:translate .35s cubic-bezier(.2,.8,.3,1)}
.tl-hint{position:absolute; left:50%; top:78px; translate:-50% 0; z-index:6; width:max-content; max-width:calc(100% - 32px); box-sizing:border-box;
  padding:8px 16px; background:var(--surface); border:1px solid var(--gold); border-radius:18px; box-shadow:0 8px 24px rgba(40,26,10,.2);
  font-size:14px; color:var(--ink); text-align:center; pointer-events:none; opacity:0; transition:opacity .25s}
.tl-hint.show{opacity:1}
#body{position:relative; flex:1; min-height:0; overflow:hidden}
#grid{position:absolute; inset:0; pointer-events:none}
.gl{position:absolute; top:0; bottom:0; left:0; width:1px; background:var(--rule)}
.gl.era-edge{background:var(--ink-soft); opacity:.28}
#lanes{position:absolute; left:0; right:0; top:0}
.lane{position:relative; border-bottom:1px solid var(--rule)}
.lane:nth-child(even){background:var(--lane-alt)}
.lane-label{position:absolute; left:10px; top:5px; font-size:13px; font-weight:500; color:var(--ink-soft); pointer-events:none; z-index:3;
  background:linear-gradient(90deg,var(--bg) 70%,transparent); padding-right:14px}
.lane.world .lane-label{font-weight:400}
.lane-label{display:flex; align-items:center; gap:8px}
.lane-sw{pointer-events:auto; position:relative; width:42px; height:17px; padding:0; border:0; border-radius:9px; cursor:pointer; flex:none;
  background:color-mix(in srgb, var(--ink-soft) 28%, var(--bg)); color:var(--ink-soft); font:700 9px/17px var(--sans); letter-spacing:.06em}
.lane-sw.on{background:var(--faience); color:var(--bg)}
.lane-sw .sw-tx{position:absolute; top:0; right:6px}
.lane-sw.on .sw-tx{right:auto; left:7px}
.lane-sw .sw-knob{position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:var(--ink-soft); transition:transform .15s}
.lane-sw.on .sw-knob{transform:translateX(25px); background:var(--bg)}
.lane-sw:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .lane-sw .sw-knob{transition:none} }
.lane.off > :not(.lane-label){display:none !important}
.lane.off .lane-label{top:6px}
.lane.off .lane-name{opacity:.65}

/* Scripture events */
.ev{position:absolute; left:0; top:0; height:26px; display:flex; align-items:center; gap:7px; padding:0 6px 0 0; border:0; background:none; cursor:pointer; white-space:nowrap; color:var(--ink)}
.ev .mk{width:11px; height:11px; background:var(--gold); transform:rotate(45deg); flex:none; margin-left:-5px; border:1.5px solid var(--bg); box-sizing:content-box}
.ev.p1 .mk{width:13px; height:13px; margin-left:-6px}
.ev .lb{font-size:14px; font-weight:500}
.ev.p1 .lb{font-family:var(--serif); font-size:16px; font-weight:700}
.ev .rg{position:absolute; left:0; top:22px; height:3px; background:var(--gold); opacity:.7; border-radius:2px}
.ev:hover .lb{color:var(--gold-strong); text-decoration:underline; text-underline-offset:3px}
.ev.approx .mk{background:transparent; border:2px solid var(--gold); width:9px; height:9px}

/* People */
.pp{position:absolute; left:0; top:0; height:18px; border:0; padding:0; background:none; cursor:pointer; color:var(--faience-ink)}
.pp .bar{position:absolute; left:0; top:0; height:18px; border-radius:3px; background:var(--faience-wash); border-left:3px solid var(--faience)}
.pp.taken .bar{background:linear-gradient(90deg,var(--faience-wash) 75%,transparent)}
.pp.risen .bar{background:linear-gradient(90deg,var(--faience-wash) 70%,var(--gold-wash)); border-right:3px solid var(--gold)}
.pp .nm{position:absolute; top:0; left:0; line-height:18px; font-size:13.5px; font-weight:500; white-space:nowrap; color:var(--ink)}
.pp .nm small{font-weight:400; color:var(--ink-soft); font-size:12.5px; margin-left:5px}
.pp.approx .bar{background:repeating-linear-gradient(90deg,var(--faience-wash) 0 12px,transparent 12px 17px); border-left-style:dashed}
.pp:hover .bar{background:var(--faience); opacity:.55}
.pp.p1 .nm{font-weight:700}

/* World */
.wb{position:absolute; left:0; top:0; height:22px; pointer-events:none}
.wb .tx{position:absolute; top:0; left:0; line-height:20px; font-size:12.5px; color:var(--world); white-space:nowrap; background:color-mix(in srgb, var(--world) 11%, var(--bg));
  border:1px solid var(--rule); border-radius:11px; padding:0 9px}
.wb .rl{position:absolute; left:0; top:10px; height:1px; background:var(--world); opacity:.5}
.wb .dot{position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:50%; background:var(--world); margin-left:-3.5px}

#empty{position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); max-width:min(440px,86%); text-align:center; font-family:var(--serif); font-style:italic;
  color:var(--ink-soft); font-size:17px; line-height:1.45; pointer-events:none; display:none}
#vbar{position:absolute; right:3px; top:0; width:6px; border-radius:3px; background:var(--ink-soft); opacity:.35; display:none; cursor:pointer; z-index:4}

/* Overview */
.foot{flex:none; border-top:1px solid var(--rule); padding:8px 18px 10px; display:flex; flex-direction:column; gap:6px}
#mini{position:relative; height:22px; border-radius:4px; overflow:hidden; cursor:pointer; touch-action:none; background:var(--era-a)}
#mini .seg{position:absolute; top:0; bottom:0; background:var(--era-a); border-right:1px solid var(--rule)}
#mini .seg.alt{background:var(--era-b)}
#mini .mt{position:absolute; top:4px; bottom:4px; width:2px; background:var(--gold); margin-left:-1px}
#mini .win{position:absolute; top:0; bottom:0; border:2px solid var(--gold); border-radius:4px; background:var(--gold-wash); min-width:4px}
.kg{position:absolute; left:0; top:0; height:18px; border:0; padding:0; background:none; cursor:pointer; color:var(--ink)}
.kg .bar{position:absolute; left:0; top:0; height:100%; border-radius:3px; border-left:3px solid var(--kc); background:color-mix(in srgb, var(--kc) 17%, transparent)}
.kg.judah{--kc:var(--judah)} .kg.israel{--kc:var(--israel)} .kg.united{--kc:var(--gold); height:40px}
.kg.h-rome{--kc:var(--rome)} .kg.h-herod{--kc:var(--herod)} .kg.span .nm{font-weight:700}
.kg .nm{position:absolute; left:0; top:0; line-height:18px; font-size:12.5px; font-weight:500; white-space:nowrap}
.kg.united .nm{line-height:40px; font-weight:700}
@keyframes bt-glow-bar{0%,100%{box-shadow:0 0 0 0 transparent; filter:none} 25%,75%{box-shadow:0 0 0 2px var(--gold), 0 0 14px 4px var(--gold); filter:brightness(1.25) saturate(1.3)} 50%{box-shadow:0 0 0 1px var(--gold), 0 0 6px 1px var(--gold); filter:brightness(1.1)}}
@keyframes bt-glow-nm{0%,100%{text-shadow:none} 25%,75%{text-shadow:0 0 8px var(--gold), 0 0 3px var(--gold)} 50%{text-shadow:0 0 3px var(--gold)}}
.pp.pulse .bar,.kg.pulse .bar{animation:bt-glow-bar 2s ease-in-out 1}
.pp.pulse .nm,.kg.pulse .nm{animation:bt-glow-nm 2s ease-in-out 1}
@media (prefers-reduced-motion:reduce){ .pp.pulse .bar,.kg.pulse .bar{animation:none; box-shadow:0 0 0 2px var(--gold)} .pp.pulse .nm,.kg.pulse .nm{animation:none; text-shadow:0 0 6px var(--gold)} }
.kg:hover .bar{background:color-mix(in srgb, var(--kc) 34%, transparent)}
.krow{position:absolute; left:10px; font-size:11.5px; color:var(--ink-soft); pointer-events:none; z-index:3; background:linear-gradient(90deg, var(--bg) 70%, transparent); padding-right:12px; line-height:18px}
.lg-kg{width:22px; height:10px; border-radius:2px; background:linear-gradient(90deg, color-mix(in srgb, var(--judah) 30%, transparent) 50%, color-mix(in srgb, var(--israel) 30%, transparent) 50%)}
.verdict{font-family:var(--serif); font-size:17px; margin:0 0 14px}
.legend{display:flex; flex-wrap:wrap; gap:4px 18px; font-size:13px; color:var(--ink-soft); align-items:center}
.legend i{display:inline-block; vertical-align:-1px; margin-right:6px}
.lg-ev{width:9px; height:9px; background:var(--gold); transform:rotate(45deg)}
.lg-ap{width:7px; height:7px; border:2px solid var(--gold); transform:rotate(45deg)}
.lg-pp{width:22px; height:10px; background:var(--faience-wash); border-left:3px solid var(--faience); border-radius:2px}
.lg-wb{width:22px; height:11px; border-radius:6px; background:var(--world-wash); border:1px solid var(--rule)}
.legend .hint{margin-left:auto}

/* Popup */
dialog{border:0; padding:0; background:var(--grain), var(--surface); color:var(--ink); border-radius:10px; width:min(680px,calc(100vw - 24px)); max-height:calc(100dvh - 32px - 2 * max(env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px)));
  box-shadow:0 18px 60px rgba(40,26,10,.35)}
dialog::backdrop{background:rgba(30,20,8,.5)}
dialog[open]{animation:pop .18s ease-out}
@keyframes pop{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.pop{padding:26px 30px 28px; overflow:auto; max-height:calc(100dvh - 32px - 2 * max(env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px)))}
.pop .close{position:sticky; float:right; top:0; margin:-12px -14px 0 12px; width:38px; height:38px; border-radius:50%; border:1px solid var(--rule); background:var(--surface); cursor:pointer; font-size:20px; line-height:1}
.pop .pbtn{position:sticky; float:right; top:0; margin:-12px 4px 0 12px; width:38px; height:38px; border-radius:50%; border:1px solid var(--rule); background:var(--surface); cursor:pointer; color:var(--ink-soft); display:inline-flex; align-items:center; justify-content:center; padding:0}
.pop .pbtn:hover{border-color:var(--gold); color:var(--gold-strong)}
.pop .kicker{margin:0 0 4px; color:var(--ink-soft); font-size:14px}
.pop h2{font-family:var(--serif); font-weight:700; font-size:30px; line-height:1.12; margin:0 0 10px}
.pop .meta{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; margin:0 0 4px}
.pop .date{font-family:var(--serif); font-size:20px; font-variant-numeric:lining-nums}
.pop .cert{font-size:13px; padding:1px 8px; border-radius:10px; background:var(--gold-wash); color:var(--gold-strong)}
.pop .ref{margin:0 0 16px; font-size:15px; color:var(--ink-soft)}
.pop .sum{font-family:var(--serif); font-size:19px; line-height:1.45; margin:0 0 16px}
.pop blockquote{margin:0 0 18px; padding:2px 0 2px 16px; border-left:3px solid var(--gold); font-family:var(--serif); font-style:italic; font-size:17px; line-height:1.5}
.pop blockquote cite{display:block; font-style:normal; font-family:var(--sans); font-size:13.5px; color:var(--ink-soft); margin-top:4px}
.pop figure{margin:0 0 18px}
.pop figure svg{display:block; width:100%; height:auto; border-radius:6px; border:1px solid var(--rule)}
.pop figcaption{font-size:13.5px; color:var(--ink-soft); margin-top:6px}
.pop .text p{font-family:var(--serif); font-size:17px; line-height:1.6; margin:0 0 12px; max-width:62ch}
.pop details{margin-top:14px; border-top:1px solid var(--rule); padding-top:10px}
.pop summary{cursor:pointer; font-weight:500; font-size:15px}
.pop details p{font-size:15px; line-height:1.55; color:var(--ink-soft); margin:8px 0 0}
.pop .overlaps{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 0; padding:0; list-style:none}
.pop .overlaps button{border:1px solid var(--rule); background:var(--faience-wash); border-radius:14px; padding:3px 10px; cursor:pointer; font-size:14px}
.pop .overlaps button:hover{border-color:var(--faience)}
.pop h3{font-size:15px; font-weight:500; margin:18px 0 0}
.pop .actions{margin-top:18px}
.pop .actions button{border:1px solid var(--rule); background:none; border-radius:6px; padding:6px 12px; cursor:pointer}
.pop .actions button:hover{background:var(--gold-wash)}


/* ===== Theme picker ===== */
.top{position:relative}
.iconbtn{width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--rule); border-radius:6px; background:var(--surface); cursor:pointer; color:var(--ink)}
.iconbtn:hover{background:var(--gold-wash)}
.iconbtn svg{width:19px; height:19px}
.themepop{position:absolute; right:18px; top:calc(100% - 6px); z-index:30; width:300px; background:var(--grain), var(--surface); border:1px solid var(--rule); border-radius:14px; box-shadow:0 16px 48px rgba(40,26,10,.28); padding:12px}
.themepop h3, .rsettings .thead{margin:4px 6px 8px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:500}
.topts{display:grid; gap:4px}
.topt{display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:1px solid transparent; background:none; border-radius:10px; padding:8px 10px; cursor:pointer; color:var(--ink)}
.topt:hover{background:var(--gold-wash)}
.topt[aria-checked="true"]{border-color:var(--gold); background:var(--gold-wash)}
.tsw{flex:none; display:flex; width:46px; height:30px; border-radius:7px; overflow:hidden; border:1px solid var(--rule)}
.tsw i{flex:1}
.tname{display:block; font-family:var(--serif); font-size:17px; line-height:1.2}
.tdesc{display:block; font-size:12.5px; color:var(--ink-soft); line-height:1.3}
.rsettings .topts{margin-bottom:16px}
.rsettings .topt{padding:6px 8px}
.rsettings .tdesc{display:none}

/* ===== Bible: links, passage popup, reader ===== */
.sref{color:var(--gold-strong); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--gold) 55%, transparent); cursor:pointer}
.sref:hover{text-decoration-color:currentColor}
.biblebtn{display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px 0 12px; border-radius:6px; border:1px solid var(--rule); background:var(--surface); color:var(--ink); cursor:pointer; font-weight:500}
.biblebtn:hover{border-color:var(--gold)}
.biblebtn svg{width:18px; height:18px}
.pop .actions button.primary{background:var(--ink); color:var(--surface); border-color:var(--ink)}
#passage{--rs:18px}
#passage .pch{font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:16px 0 6px; font-weight:500}
#passage .scripture{margin-top:10px}
.more{font-style:italic; color:var(--ink-soft); font-size:15px}
.loading{color:var(--ink-soft); font-style:italic; font-family:var(--serif); text-align:center; padding:40px 0}

dialog.reader{--rs:20px; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:var(--vignette), var(--grain), var(--mottle), var(--page); color:var(--ink); box-shadow:none}
dialog.reader[data-size="s"]{--rs:17.5px}
dialog.reader[data-size="l"]{--rs:23px}
dialog.reader[open]{display:flex; flex-direction:column; animation:readerIn .22s ease-out}
dialog.reader::backdrop{background:var(--page)}
@keyframes readerIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.rbar{flex:none; display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; border-bottom:1px solid var(--rule); background:color-mix(in srgb, var(--page) 70%, transparent)}
.rclose{display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px 0 10px; border:1px solid var(--rule); border-radius:19px; background:none; cursor:pointer; font-size:14px; color:var(--ink-soft)}
.rclose:hover{color:var(--ink); border-color:var(--ink-soft)}
.rclose svg{width:16px; height:16px}
.rnav{display:flex; align-items:center; gap:2px; margin:0 auto}
.rarrow{width:40px; height:40px; border-radius:50%; border:0; background:none; font-size:26px; line-height:1; cursor:pointer; color:var(--ink-soft)}
.rarrow:hover:not(:disabled){background:var(--gold-wash); color:var(--ink)}
.rarrow:disabled{opacity:.25; cursor:default}
.rtitle{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px 0 18px; border:0; border-radius:21px; background:none; cursor:pointer; font-family:var(--serif); font-size:22px; font-weight:500; color:var(--ink); white-space:nowrap}
.rtitle svg{width:14px; height:14px; color:var(--gold-strong); transition:transform .15s}
.rtitle:hover, .rtitle[aria-expanded="true"]{background:var(--gold-wash)}
.rtitle[aria-expanded="true"] svg{transform:rotate(180deg)}
.rsearch{display:flex; align-items:center; height:40px; border:1px solid var(--rule); border-radius:20px; background:var(--surface); padding:0 4px 0 16px; width:min(360px, 32vw)}
.rsearch:focus-within{outline:2px solid var(--gold); outline-offset:1px}
.rsearch input{flex:1; min-width:0; border:0; background:none; height:100%; font-size:15px; outline:none}
.rsearch input::-webkit-search-cancel-button{display:none}
.rsearch button{width:34px; height:34px; border:0; border-radius:50%; background:none; cursor:pointer; color:var(--ink-soft); display:grid; place-items:center}
.rsearch button:hover{background:var(--gold-wash); color:var(--ink)}
.rsearch svg{width:17px; height:17px}
.rset{width:40px; height:40px; border-radius:50%; border:1px solid var(--rule); background:none; cursor:pointer; font-family:var(--serif); font-size:17px; color:var(--ink)}
.rset:hover{background:var(--gold-wash)}
.rbody{position:relative; flex:1; min-height:0}
.rmain{position:absolute; inset:0; overflow:auto; -webkit-overflow-scrolling:touch; outline:none}
.rgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,38rem) minmax(0,1fr); gap:0 56px; padding:52px 28px calc(90px + env(safe-area-inset-bottom, 0px))}
.rcol{grid-column:2; min-width:0}
.rside{grid-column:3; align-self:start; position:sticky; top:52px; max-width:270px}
.rside h3{font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin:8px 0 12px; font-weight:500}
.rside ul{list-style:none; margin:0; padding:0; border-left:2px solid color-mix(in srgb, var(--gold) 45%, transparent)}
.rside button{display:block; width:100%; text-align:left; border:0; background:none; padding:8px 12px 9px 14px; cursor:pointer; border-radius:0 8px 8px 0; color:var(--ink)}
.rside button:hover{background:var(--gold-wash)}
.sdate{display:block; font-size:12.5px; color:var(--gold-strong); font-variant-numeric:tabular-nums; margin-bottom:1px}
.stitle{display:block; font-family:var(--serif); font-size:16px; line-height:1.3}

.chead{margin:0 0 30px; text-align:center}
.chead::after{content:""; display:block; width:56px; height:1px; background:var(--gold); margin:20px auto 0; opacity:.7}
.cbook{font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-strong); margin:0}
.cgroup{font-family:var(--serif); font-style:italic; color:var(--ink-soft); margin:6px 0 0; font-size:15.5px}
.scripture{font-family:var(--serif); font-size:var(--rs); line-height:1.74; color:var(--ink); hyphens:auto; -webkit-hyphens:auto; font-variant-numeric:oldstyle-nums}
.scripture .bp{margin:0 0 .8em; text-indent:1.4em}
.scripture .bp:first-child, .scripture .bsec + .bp, .scripture .ptitle + .bp, .scripture .pch + .bp{text-indent:0}
.cnum.cnum-poem{float:none; display:block; text-align:center; font-size:3.2em; line-height:1; margin:0 0 .15em}
.bsec + .cnum.cnum-poem{margin-top:-.2em}
.cnum{float:left; font-family:var(--serif); font-weight:500; font-size:3.9em; line-height:.8; margin:.07em .14em 0 -.03em; color:var(--accent); font-variant-numeric:lining-nums}
.vn{font-family:var(--sans); font-size:.56em; font-weight:700; color:var(--gold-strong); vertical-align:.65em; line-height:0; margin:0 .24em 0 .12em; cursor:pointer; user-select:none; -webkit-user-select:none; font-variant-numeric:lining-nums}
.bpoem{margin:.1em 0 .9em}
.bl{display:block; padding-left:2.2em; text-indent:-1.4em}
.bl.l2{padding-left:3.5em}
.bl.l3{padding-left:4.8em}
.bstz{display:block; height:.75em}
.selah{font-style:italic; color:var(--ink-soft); font-size:.9em; margin-left:.3em}
.ptitle{font-style:italic; color:var(--ink-soft); font-size:.88em; margin:0 0 1em; text-align:center; line-height:1.5}
.bsec{font-family:var(--sans); font-size:.6em; font-weight:500; letter-spacing:.26em; text-transform:uppercase; text-align:center; color:var(--ink-soft); margin:0 0 1.2em}
.vt.hl{background:linear-gradient(to bottom, transparent 12%, var(--gold-wash) 12%, var(--gold-wash) 90%, transparent 90%)}
.redletter .wj, #passage.redletter .wj{color:var(--jesus)}
.vomit{font-style:italic; color:var(--ink-soft); font-size:.82em}
.cfoot{display:flex; justify-content:space-between; gap:16px; margin:60px 0 0; padding-top:24px; border-top:1px solid var(--rule)}
.cnav{display:flex; flex-direction:column; gap:3px; border:0; background:none; cursor:pointer; font-family:var(--serif); font-size:19px; color:var(--ink); padding:8px 4px; text-align:left}
.cnav.next{text-align:right; margin-left:auto}
.cnav small{font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft)}
.cnav:hover{color:var(--gold-strong)}
.rcredit{text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:36px}

.rpicker{position:absolute; inset:0; overflow:auto; background:var(--grain), var(--page); z-index:5; animation:readerIn .16s ease-out}
.pinner{max-width:1060px; margin:0 auto; padding:30px 28px 70px; display:grid; grid-template-columns:1fr 1fr; gap:12px 64px}
.pinner.chapters{grid-template-columns:1fr; max-width:820px}
/* the reader's book and chapter list is a card over the text (a click outside closes it); the Library's list keeps the full-page look */
#rpicker{inset:8px 0 auto; margin:0 auto; width:min(1000px, calc(100% - 24px)); max-height:calc(100% - 16px); background:var(--surface); border:1px solid var(--rule); border-radius:16px; box-shadow:0 18px 56px rgba(40,26,10,.34)}
#rpicker.chaps{width:min(560px, calc(100% - 24px))}
#rpicker .pinner{padding:16px 22px 22px; gap:0 36px}
.ptest h3{font-family:var(--serif); font-size:28px; font-weight:500; margin:0 0 2px}
.ptest h4{font-family:var(--sans); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-strong); margin:20px 0 6px; font-weight:500}
.pgroup{margin:8px 0 0; padding:0 10px 6px; border-radius:12px; border:1px solid color-mix(in srgb, var(--gc) 35%, transparent); border-left:5px solid var(--gc); background:color-mix(in srgb, var(--gc) 10%, transparent)}
.pgroup h4{color:color-mix(in srgb, var(--gc) 70%, var(--ink)); margin:8px 0 2px}
.pbooks{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:0 8px}
.pbooks button{text-align:left; border:0; background:none; padding:3px 10px; border-radius:7px; font-family:var(--serif); font-size:17px; cursor:pointer; color:var(--ink)}
.pbooks button:hover{background:color-mix(in srgb, var(--gc) 20%, transparent)}
.pbooks button[aria-current="true"]{background:color-mix(in srgb, var(--gc) 28%, transparent); color:var(--ink); font-weight:700}
.pchead{display:flex; align-items:baseline; gap:18px; margin-bottom:10px}
.pchead h3{font-family:var(--serif); font-size:30px; font-weight:500; margin:0}
.pback{border:0; background:none; cursor:pointer; color:var(--ink-soft); font-size:14px; padding:6px 0}
.pback:hover{color:var(--ink)}
.pchaps{display:grid; grid-template-columns:repeat(auto-fill, minmax(54px, 1fr)); gap:8px}
.pchaps button{aspect-ratio:1; border:1px solid var(--rule); background:var(--surface); border-radius:10px; font-family:var(--serif); font-size:18px; cursor:pointer; color:var(--ink); font-variant-numeric:lining-nums}
.pchaps button:hover{border-color:var(--gold); color:var(--gold-strong)}
.pchaps button[aria-current="true"]{background:var(--ink); color:var(--page); border-color:var(--ink)}
.rsettings{position:absolute; right:16px; top:10px; z-index:6; background:var(--surface); border:1px solid var(--rule); border-radius:14px; box-shadow:0 16px 48px rgba(40,26,10,.28); padding:16px 18px 18px; width:260px; animation:readerIn .14s ease-out}
.rsettings p{margin:0 0 8px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.seg{display:flex; border:1px solid var(--rule); border-radius:10px; overflow:hidden; margin-bottom:16px}
.seg button{flex:1; height:42px; border:0; background:none; cursor:pointer; font-family:var(--serif); color:var(--ink)}
.seg button+button{border-left:1px solid var(--rule)}
.seg button[aria-pressed="true"]{background:var(--gold-wash); color:var(--gold-strong); font-weight:700}
.seg [data-size="s"]{font-size:15px}
.seg [data-size="m"]{font-size:19px}
.seg [data-size="l"]{font-size:24px}
.rsettings label{display:flex; gap:10px; align-items:center; font-size:15px; cursor:pointer}
.rsettings input{width:18px; height:18px; accent-color:var(--gold-strong)}

.sq{font-family:var(--serif); font-weight:500; font-size:34px; line-height:1.2; margin:10px 0 6px}
.scount{color:var(--ink-soft); margin:0}
.shelp{color:var(--ink-soft); font-family:var(--serif); font-size:17px; line-height:1.6; text-align:center}
.sfilters{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; justify-content:center}
.sfilters button{border:1px solid var(--rule); background:var(--surface); border-radius:16px; padding:5px 12px; font-size:13.5px; cursor:pointer; color:var(--ink)}
.sfilters button b{font-weight:500; color:var(--ink-soft); margin-left:4px; font-variant-numeric:tabular-nums}
.sfilters button[aria-pressed="true"]{background:var(--ink); color:var(--page); border-color:var(--ink)}
.sfilters button[aria-pressed="true"] b{color:inherit; opacity:.75}
.sresults{list-style:none; margin:0; padding:0}
.sresults li{padding:15px 0 16px; border-bottom:1px solid var(--rule); font-family:var(--serif); font-size:calc(var(--rs) * .9); line-height:1.6}
.sref-go{display:block; border:0; background:none; padding:0; margin:0 0 3px; font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--gold-strong); cursor:pointer}
.sref-go:hover{text-decoration:underline; text-underline-offset:3px}
mark{background:var(--gold-wash); color:inherit; border-radius:2px; box-shadow:0 0 0 1px var(--gold-wash); font-weight:600}
.smore{display:block; margin:26px auto 0; border:1px solid var(--rule); background:var(--surface); border-radius:20px; padding:9px 20px; cursor:pointer; color:var(--ink)}
.smore:hover{border-color:var(--gold)}

@media (max-width:1100px){
  .rgrid{grid-template-columns:minmax(0,1fr); max-width:44rem; margin:0 auto; padding:36px 24px calc(90px + env(safe-area-inset-bottom, 0px))}
  .rcol{grid-column:1}
  .rside{grid-column:1; grid-row:1; position:static; max-width:none; margin:0 0 28px}
  .rside ul{display:flex; gap:8px; overflow-x:auto; border:0; padding-bottom:4px; scrollbar-width:thin}
  .rside li{flex:none}
  .rside button{border:1px solid var(--rule); border-radius:10px; padding:7px 12px; max-width:240px; background:var(--surface)}
  .rside h3{text-align:center}
}
@media (max-width:720px){
  .controls .biblebtn span{display:none}
  .controls .biblebtn{padding:0 10px}
  .rbar{flex-wrap:wrap; gap:8px; padding:calc(8px + env(safe-area-inset-top, 0px)) 10px 10px}
  .rclose{padding:0 10px}
  .rclose span{display:none}
  .rtitle{font-size:19px; padding:0 12px}
  .rarrow{width:36px; height:36px}
  .rsearch{order:5; width:100%}
  .rgrid{padding:26px 20px calc(80px + env(safe-area-inset-bottom, 0px))}
  .pinner{grid-template-columns:1fr; padding:22px 16px 60px; gap:6px}
  #rpicker .pinner{padding:12px 12px 16px}
  .pbooks{grid-template-columns:repeat(2, minmax(0,1fr))}
  .rsettings{right:10px}
  .sq{font-size:27px}
  .cfoot .cnav{font-size:17px}
}

@media (max-width:720px){
  .top{padding:10px 12px 8px; gap:8px}
  .brand{max-width:300px}
  .controls{width:100%}
  .controls input{flex:1 1 220px; width:auto; min-width:0}
  .controls select{flex:1 1 140px; min-width:120px; max-width:none}
  .foot{padding:6px 12px 8px}
  .legend .hint{display:none}
  .pop{padding:22px 18px 22px}
  .pop h2{font-size:25px}
}
@media (prefers-reduced-motion: reduce){ dialog[open]{animation:none} }

/* ===== Word study (site edition): translation switch, BSB word links, Hebrew and Greek, word panel ===== */
[lang="he"], [lang="arc"]{font-family:"Noto Serif Hebrew", "SBL Hebrew", "Times New Roman", serif}
[lang="grc"]{font-family:var(--serif)}
.linkbtn{border:0; background:none; padding:0; font:inherit; color:var(--gold-strong); cursor:pointer; text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--gold) 45%, transparent); text-underline-offset:3px}
.linkbtn:hover{text-decoration-color:currentColor}
.legend .credlink{font-size:inherit; line-height:inherit; color:var(--ink-soft)}
.rtrans{height:40px; flex:none; max-width:100%; border:1px solid var(--rule); border-radius:20px; background:var(--surface); color:var(--ink); padding:0 14px; font-family:var(--sans); font-size:14px; font-weight:600; cursor:pointer}
.rtrans[hidden]{display:none}
.rtrans:hover{border-color:var(--gold)}
.rsettings .rsp{margin-top:18px}
.rsettings #rwordset label{margin-bottom:10px; align-items:flex-start; line-height:1.3}
.rsettings #rwordset input{flex:none; margin-top:1px}
.rbtn{display:block; width:100%; margin-top:6px; border:1px solid var(--rule); background:none; border-radius:9px; padding:8px 10px; cursor:pointer; font-size:14px; color:var(--ink)}
.rbtn:hover:not(:disabled){border-color:var(--gold)}
.rbtn:disabled{opacity:.7; cursor:default}

/* BSB: each English phrase opens the word it translates */
.bw{cursor:pointer; border-radius:3px}
.bw:hover{background:var(--gold-wash); box-shadow:0 0 0 2px var(--gold-wash)}
.bw.wsel, .wc.wsel{background:color-mix(in srgb, var(--gold) 28%, transparent); box-shadow:0 0 0 2px color-mix(in srgb, var(--gold) 28%, transparent)}
.fn{font-family:var(--sans); font-size:.56em; font-weight:700; font-style:italic; color:var(--accent); vertical-align:.65em; line-height:0; margin:0 .1em 0 .05em; cursor:pointer; user-select:none; -webkit-user-select:none}
.fnpop{position:absolute; z-index:4; width:min(330px, calc(100% - 16px)); background:var(--surface); border:1px solid var(--rule); border-radius:10px; box-shadow:0 12px 36px rgba(40,26,10,.22); padding:10px 14px; font-family:var(--serif); font-size:16px; line-height:1.45}
.fnpop p{margin:0}
.bhead{font-family:var(--sans); font-size:.68em; font-weight:700; letter-spacing:.04em; color:var(--ink-soft); margin:1.5em 0 .5em}
.bhead:first-child{margin-top:0}
.bhead.bsub{font-weight:500; font-style:italic; letter-spacing:0}
.bspk{font-family:var(--sans); font-size:.62em; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-strong); margin:1.2em 0 .3em}
.bacro{font-family:var(--sans); font-size:.66em; font-weight:700; letter-spacing:.12em; color:var(--gold-strong); margin:1.4em 0 .4em; text-align:center}

/* Hebrew and Greek under each verse */
.scripture.study .sv{padding:0 0 14px; margin:0 0 16px; border-bottom:1px solid var(--rule)}
.scripture.study .svt .bp, .scripture.study .svt .bpoem{margin:0 0 .5em}
.scripture.study .svt .bp{text-indent:0}
.il{display:flex; flex-wrap:wrap; gap:6px 4px; margin:4px 0 0}
.wc{display:flex; flex-direction:column; align-items:center; gap:1px; min-width:44px; padding:5px 7px 6px; border:1px solid transparent; border-radius:8px; background:none; cursor:pointer; color:var(--ink); line-height:1.25}
.wc:hover{border-color:var(--rule); background:var(--surface)}
.wo{font-size:calc(var(--rs) * 1.12); line-height:1.5}
.wt{font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); font-style:italic}
.we{font-family:var(--sans); font-size:12.5px; color:var(--gold-strong); max-width:12em; text-align:center}
.scripture.study .xrgo{display:block; margin:8px 0 0; font-family:var(--sans); font-size:13px}
.ilnone, .ilnote{font-family:var(--sans); font-size:13.5px; color:var(--ink-soft); font-style:italic; line-height:1.45; margin:6px 0 0}
.ilnote{margin-top:24px; text-align:center}

/* The word panel */
.wpanel{position:absolute; top:0; right:0; bottom:0; z-index:4; width:min(420px, 100%); overflow:auto; background:var(--grain), var(--surface); border-left:1px solid var(--rule); box-shadow:-18px 0 40px rgba(40,26,10,.14); animation:wpIn .16s ease-out}
.wpanel[hidden]{display:none}
@keyframes wpIn{from{opacity:0; transform:translateX(16px)}to{opacity:1; transform:none}}
.wclose{position:sticky; top:10px; float:right; margin:10px 12px 0 0; width:36px; height:36px; border-radius:50%; border:1px solid var(--rule); background:var(--surface); cursor:pointer; font-size:20px; line-height:1; color:var(--ink); z-index:1}
.wbody{padding:22px 26px 40px}
.wkick{margin:0 0 6px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.wform{font-size:46px; line-height:1.35; margin:6px 0 0; text-align:left}
.wform[dir="rtl"]{text-align:right}
.wspeak{float:left; margin-top:16px !important; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; margin:2px 0 0; padding:0; border-radius:50%; border:1px solid var(--rule); background:var(--surface); color:var(--ink); cursor:pointer}
.wspeak svg{width:18px; height:18px}
.wspeak:hover{border-color:var(--gold)}
.wspeak.playing{background:var(--gold-wash); border-color:var(--gold); color:var(--gold-strong)}
.wxl{font-style:italic; font-size:18px; color:var(--ink-soft); margin:2px 0 10px}
.wbsb{font-family:var(--serif); font-size:18px; margin:0 0 6px}
.wbsb q{color:var(--gold-strong)}
.wbody h4{font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; margin:22px 0 8px; padding-top:14px; border-top:1px solid var(--rule)}
.wnum{letter-spacing:.04em; color:var(--gold-strong); margin-left:6px}
.wg{font-weight:500; margin:0 0 8px; line-height:1.45}
.wnotes{margin:0; font-size:14.5px; line-height:1.45}
.wnotes dt{font-weight:700; margin-top:6px}
.wnotes dd{margin:0; color:var(--ink-soft)}
.wlemma{margin:0 0 4px; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline}
.wlf{font-size:28px}
.wlx{font-style:italic; color:var(--ink-soft)}
.wgloss{font-weight:700; margin:0 0 8px}
.wdef, .wdef p{font-family:var(--serif); font-size:16px; line-height:1.5; margin:0 0 6px}
.wety, .wuse{font-size:14.5px; line-height:1.45; margin:6px 0 0}
.wety span, .wuse span{color:var(--ink-soft)}
.wsrc{font-size:12.5px; color:var(--ink-soft); margin:12px 0 0; line-height:1.4}
.wx{border:1px solid var(--rule); background:none; border-radius:10px; padding:0 6px; cursor:pointer; font-size:.9em; color:var(--gold-strong)}
.wx:hover{border-color:var(--gold)}
.wcount{margin:0 0 10px}
.wall{border:1px solid var(--rule); background:var(--surface); border-radius:18px; padding:7px 16px; cursor:pointer; color:var(--ink); margin-top:10px}
.wall:hover{border-color:var(--gold)}

/* Word search results and suggestions */
.wtitle{border:0; background:none; padding:0; font:inherit; color:inherit; cursor:pointer}
.wtitle[lang="he"], .wtitle[lang="arc"]{font-size:1.2em}
.wtitle:hover{color:var(--gold-strong)}
.wchips{display:flex; flex-wrap:wrap; gap:4px 6px; margin:2px 0 4px}
.wchip{font-family:var(--sans); font-size:13px; color:var(--ink-soft); border:1px solid var(--rule); border-radius:10px; padding:1px 8px}
.wchip [lang]{font-size:16px; color:var(--ink)}
.wsuggest{margin:-10px 0 22px; text-align:center}
.wsuggest p{margin:0 0 8px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.wsuggest button{margin:3px; border:1px solid var(--rule); background:var(--surface); border-radius:16px; padding:5px 12px; cursor:pointer; color:var(--ink); font-size:14px}
.wsuggest button:hover{border-color:var(--gold)}
.wsuggest .wsl{font-size:18px}
.wsuggest b{font-weight:500; color:var(--gold-strong)}

/* Credits dialog */
.creditsdlg .credits{list-style:none; margin:0; padding:0}
.creditsdlg .credits li{border-top:1px solid var(--rule); padding:14px 0}
.creditsdlg .credits h3{font-family:var(--serif); font-size:19px; font-weight:700; margin:0 0 3px}
.creditsdlg .credits p{margin:0 0 4px; font-size:15px; line-height:1.5}
.creditsdlg .credits .by, .creditsdlg .credits .lic{color:var(--ink-soft)}
.creditsdlg .credits .lic{font-weight:500}
.creditsdlg a{color:var(--gold-strong)}

@media (max-width:720px){
  .rtrans{order:4; height:36px}
  .wpanel{top:auto; height:66%; width:100%; border-left:0; border-top:1px solid var(--rule); border-radius:16px 16px 0 0; box-shadow:0 -14px 40px rgba(40,26,10,.2)}
  .wbody{padding:18px 18px 40px}
  .wform{font-size:38px}
}

/* Words on the timeline: the strip in the word panel and on a word's page */
.wstripbox{margin:6px 0 4px}
.wstripbox.big{max-width:38rem; margin:0 auto 22px}
.wslabel{margin:0 0 4px; font-size:12.5px; color:var(--ink-soft)}
.wshelp{margin:2px 0 0; font-size:12px; color:var(--ink-soft); min-height:1em}
.wstrip{display:block; max-width:100%; height:auto; overflow:visible}
.wstrip text{font-family:var(--sans); font-size:11.5px; fill:var(--ink-soft)}
.wsb{fill:var(--gold)}
.wsb:hover{fill:var(--gold-strong)}
.wsb.on{fill:var(--accent)}
.wse0{fill:var(--era-a)}
.wse1{fill:var(--era-b)}
.wdate{margin-left:8px; font-size:12.5px; color:var(--ink-soft); font-variant-numeric:lining-nums}
.sresults .sref-go{display:inline-block}
.wperiod{text-align:center; color:var(--ink-soft); margin:-8px 0 16px}
/* Psalm headings sit above the centered chapter number */
.bhead:has(+ .cnum-poem){text-align:center}
/* On a wide screen the text moves over to make room for the word panel */
@media (min-width:1101px){
  dialog.reader.wopen .rmain{right:420px}
  dialog.reader.wopen .rgrid{grid-template-columns:minmax(0,1fr) minmax(0,38rem) minmax(0,.6fr); gap:0 36px}
  dialog.reader.wopen .rside{display:none}
}

/* ===== The live map (website): a pane below the timeline ===== */
.mapbtn{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px 0 11px; border-radius:6px; border:1px solid var(--rule); background:var(--surface); cursor:pointer; font-weight:500; color:var(--ink)}
.mapbtn[hidden]{display:none}
.mapbtn svg{width:18px; height:18px}
.mapbtn:hover{border-color:var(--gold)}
.mapbtn[aria-pressed="true"]{background:var(--gold-wash); border-color:var(--gold); color:var(--gold-strong)}
.mappane{flex:none; position:relative; height:var(--maph, 42vh); display:flex; flex-direction:column; border-top:1px solid var(--rule); background:var(--map-sea)}
.mappane[hidden]{display:none}
.mapgrip{position:absolute; left:0; right:0; top:-5px; height:10px; cursor:ns-resize; z-index:3; touch-action:none}
.mapgrip::after{content:""; position:absolute; left:50%; top:3px; width:44px; height:4px; margin-left:-22px; border-radius:2px; background:var(--rule)}
.mapgrip:hover::after{background:var(--gold)}
.mapbar{flex:none; display:flex; align-items:center; gap:6px; padding:5px 10px 5px 16px; background:var(--surface); border-bottom:1px solid var(--rule)}
.mapnote{flex:1; min-width:0; margin:0; font-size:13.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mapctl{height:28px; min-width:32px; padding:0 10px; border:1px solid var(--rule); border-radius:6px; background:none; cursor:pointer; font-size:13px; color:var(--ink)}
.mapctl[hidden]{display:none}
.mapctl:hover:not(:disabled){border-color:var(--gold)}
.mapctl[aria-pressed="true"]{background:var(--gold-wash); color:var(--gold-strong); border-color:var(--gold)}
.mapwrap{position:relative; flex:1; min-height:0}
.mapview, .mapwrap > .mapview.maplibregl-map{position:absolute; inset:0}   /* MapLibre's own stylesheet, loaded later, makes the container relative */
.mapview .maplibregl-ctrl-group{background:var(--surface); border:1px solid var(--rule); box-shadow:none}
.mapview .maplibregl-ctrl-group button + button{border-top:1px solid var(--rule)}
.mapview .maplibregl-ctrl-attrib{background:color-mix(in srgb, var(--surface) 80%, transparent); color:var(--ink-soft); font-family:var(--sans); font-size:11px}
.mapview .maplibregl-ctrl-scale{background:color-mix(in srgb, var(--surface) 80%, transparent); color:var(--ink-soft); border-color:var(--ink-soft); font-family:var(--sans); font-size:11px; margin:0 10px 2px 0}
.mcdist{margin:6px 0 2px; font-size:13.5px; color:var(--ink-soft); font-style:italic}
.mapview .maplibregl-ctrl-attrib a{color:var(--ink-soft)}
:root[data-palette="lamplight"] .mapview .maplibregl-ctrl-icon{filter:invert(.85)}
@media (prefers-color-scheme: dark){ :root:not([data-palette]) .mapview .maplibregl-ctrl-icon{filter:invert(.85)} }
/* labels: HTML over the map, positioned by the map module */
.maplabels{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.ml{position:absolute; left:0; top:0; white-space:nowrap; line-height:1; transform-origin:0 0; color:var(--map-ink); font-family:var(--sans); font-size:12.5px;
    text-shadow:0 0 3px var(--map-land), 0 0 3px var(--map-land), 0 0 2px var(--map-land); margin:-.5em 0 0 0}
.ml:not(.ml-left){translate:-50% 0}
.ml-left{margin-left:7px}
button.ml{pointer-events:auto; border:0; background:none; padding:1px 2px; cursor:pointer}
button.ml:hover{color:var(--gold-strong); text-decoration:underline; text-underline-offset:2px}
.ml-place.hi{font-weight:700; font-size:13.5px}
.ml-place.sel{color:var(--accent); font-weight:700; font-size:14.5px}
@keyframes bt-glow-ml{0%,100%{text-shadow:0 0 3px var(--map-land)} 25%,75%{text-shadow:0 0 10px var(--gold), 0 0 4px var(--gold), 0 0 3px var(--map-land)} 50%{text-shadow:0 0 4px var(--gold), 0 0 3px var(--map-land)}}
.ml.pulse{animation:bt-glow-ml 1s ease-in-out 2}
.ml-cluster{position:absolute; left:0; top:0; margin:-13px 0 0 -13px; width:26px; height:26px; border-radius:50%; border:2px solid var(--map-ink); background:var(--gold); color:var(--bg);
  font:700 13px/22px var(--sans); text-align:center; padding:0; cursor:pointer; pointer-events:auto; box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent)}
.ml-cluster:hover{box-shadow:0 0 0 5px color-mix(in srgb, var(--gold) 50%, transparent)}
.ml-ring{position:absolute; left:0; top:0; width:0; height:0; pointer-events:none}
.ml-ring::before{content:""; position:absolute; left:-14px; top:-14px; width:28px; height:28px; border-radius:50%; border:3px solid var(--gold); box-shadow:0 0 10px 2px var(--gold); animation:bt-ring 1s ease-out 2}
@keyframes bt-ring{0%{transform:scale(.35); opacity:1} 100%{transform:scale(1.7); opacity:0}}
@media (prefers-reduced-motion:reduce){ .ml-ring::before{animation:none; transform:scale(.8)} .ml.pulse{animation:none; text-shadow:0 0 8px var(--gold), 0 0 3px var(--map-land)} }
.ml-place.pass{font-style:italic; color:var(--map-ink-soft)}
.ml-place.t2{font-size:11.5px; color:var(--map-ink-soft)}                 /* the period's less-named places */
.ml-place.list{font-size:11px}                                          /* an opened list event's other towns */
.maplabels.spot .ml-place:not(.hi):not(.sel):not(.pass):not(.list){opacity:.4}   /* an event is open: the rest steps back */
.ml-area{font-style:italic; color:var(--map-ink-soft)}
.ml-sea{font-family:var(--serif); font-style:italic; font-size:15px; color:color-mix(in srgb, var(--map-ink) 60%, var(--map-sea)); text-shadow:none; letter-spacing:.04em}
.ml-river{font-family:var(--serif); font-style:italic; font-size:13px; color:color-mix(in srgb, var(--map-ink) 55%, var(--map-sea))}
.ml-land, .ml-region{font-size:12px; letter-spacing:.2em; color:var(--map-ink-soft); font-weight:500; opacity:.8; z-index:-1}
.ml-land{font-size:13.5px; letter-spacing:.28em}
.ml-route{font-family:var(--serif); font-style:italic; font-size:14px; color:var(--gold-strong); font-weight:700}
.ml-region.ml-terr{font-family:var(--serif); font-style:italic; font-size:13.5px; letter-spacing:.02em; font-weight:500; color:var(--map-ink-soft); opacity:.9}
.ml-city{font-family:var(--serif); font-style:italic; font-size:13px; color:var(--map-ink)}
/* a place's card */
.mapcard{position:absolute; left:12px; top:12px; z-index:2; width:min(320px, calc(100% - 24px)); max-height:calc(100% - 24px); overflow:auto;
         background:var(--grain), var(--surface); border:1px solid var(--rule); border-radius:10px; box-shadow:0 12px 34px rgba(40,26,10,.22); padding:14px 16px 16px}
.mapcard[hidden]{display:none}
.mcclose{float:right; width:30px; height:30px; margin:-4px -6px 0 8px; border-radius:50%; border:1px solid var(--rule); background:var(--surface); cursor:pointer; font-size:18px; line-height:1}
.mckick{margin:0 0 2px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.mapcard h3{font-family:var(--serif); font-size:24px; margin:0 0 6px}
.mapcard h4{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; margin:14px 0 6px}
.mcalso{margin:-2px 0 6px; font-style:italic; color:var(--ink-soft); font-size:14px}
.mcid{margin:0 0 2px; font-size:14.5px}
.mcsrc{display:block; margin:4px 0 0; font-size:12px; color:var(--ink-soft)}
a.mcsrc{color:var(--gold-strong)}
.mcbtn{display:block; margin:10px 0 0; border:1px solid var(--rule); background:none; border-radius:16px; padding:5px 12px; cursor:pointer; font-size:13.5px; color:var(--ink)}
.mcbtn:hover{border-color:var(--gold)}
.mcev{list-style:none; margin:0; padding:0; border-left:2px solid color-mix(in srgb, var(--gold) 45%, transparent)}
.mcev button{display:block; width:100%; text-align:left; border:0; background:none; padding:5px 8px 6px 10px; cursor:pointer; border-radius:0 8px 8px 0; color:var(--ink)}
.mcev button:hover{background:var(--gold-wash)}
.mcev .stitle{font-size:14.5px}
.mcpass{border-left-style:dashed}
.mcpass .stitle{color:var(--ink-soft)}
/* events marked on the timeline from a place (fainter: those that name it only in passing) */
.ev.maphit .mk{background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent)}
.ev.maphit .lb{color:var(--accent)}
.ev.maphit-pass .mk{background:color-mix(in srgb, var(--accent) 40%, var(--surface)); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent)}
.ev.maphit-pass .lb{color:color-mix(in srgb, var(--accent) 65%, var(--ink-soft))}
.markbar{position:absolute; left:50%; bottom:12px; translate:-50% 0; z-index:5; display:flex; align-items:center; gap:10px; padding:6px 8px 6px 14px;
         background:var(--surface); border:1px solid var(--accent); border-radius:18px; box-shadow:0 8px 24px rgba(40,26,10,.2); font-size:14px}
.markbar[hidden]{display:none}
.markbar button{border:1px solid var(--rule); background:none; border-radius:12px; padding:2px 10px; cursor:pointer}
.pop .meta .maplink{margin:-2px 0 -2px auto; border:1px solid var(--rule); background:none; border-radius:14px; padding:2px 11px; cursor:pointer; font-size:13.5px; color:var(--ink)}
.pop .meta .maplink:hover{border-color:var(--gold); color:var(--gold-strong)}
@media (max-width:720px){ .mapbtn span{display:none} .mapbtn{padding:0 10px} }
/* the legend of routes and territories on the map */
.maplegend{position:absolute; left:12px; bottom:12px; z-index:1; display:flex; flex-direction:column; gap:2px; max-width:min(340px, calc(100% - 140px)); max-height:calc(100% - 24px); overflow:auto;
           background:color-mix(in srgb, var(--surface) 92%, transparent); border:1px solid var(--rule); border-radius:8px; padding:6px 8px}
.maplegend[hidden]{display:none}
.mlg{display:flex; align-items:center; gap:8px; border:0; background:none; padding:2px 4px; cursor:pointer; text-align:left; font-size:13px; color:var(--ink); border-radius:5px}
.mlg:hover{background:var(--gold-wash)}
.mlg-sw{flex:none; width:26px; height:0; border-top:3px solid var(--gold)}
.mlg-dashed{border-top-style:dashed}
.mlg-dotted{border-top:3px dotted var(--map-ink)}
.mlg-border{border-top:2px dashed var(--map-ink)}
.mlg-empire{height:12px; border:1.6px dashed var(--map-ink-soft); background:none; border-radius:2px}
.mlg-area{height:12px; border:1.5px solid color-mix(in srgb, var(--herod) 60%, transparent); background:color-mix(in srgb, var(--herod) 18%, transparent); border-radius:2px}
.mapcard:not([hidden]) ~ .maplegend{display:none}
.mlg-row{display:flex; align-items:center; gap:2px}                     /* a route with its on/off checkbox (two or more routes) */
.mlg-cb{flex:none; width:15px; height:15px; margin:0 2px 0 4px; accent-color:var(--gold); cursor:pointer}
.mlg.off{opacity:.45}
.mlg-all{font-weight:600; color:var(--gold-strong)}
/* arrows at the map's edge toward marked places left out of the framing ("→ Nineveh") */
.mapedge{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1}
.mapedgebtn{position:absolute; left:0; top:0; pointer-events:auto; display:flex; align-items:center; gap:5px; height:26px; padding:0 10px 0 7px; border-radius:13px; border:1px solid var(--gold); background:color-mix(in srgb, var(--surface) 92%, transparent); color:var(--ink); font-size:12.5px; cursor:pointer; white-space:nowrap}
.mapedgebtn[hidden]{display:none}
.mapedgebtn:hover{background:var(--gold-wash)}
.me-arr{font-style:normal; color:var(--gold-strong); font-size:12px; line-height:1}
.mapkeybtn{display:none}
@media (max-width:720px){
  .mlg-cb{width:20px; height:20px}
  /* the key folds into a "Key" button; the attribution starts closed (MapLibre's own compact button opens it) */
  .mapkeybtn{position:absolute; left:10px; bottom:10px; z-index:2; height:34px; padding:0 14px; border-radius:17px; border:1px solid var(--rule); background:var(--surface); color:var(--ink); font-size:14px; font-weight:500; cursor:pointer}
  .mapkeybtn[hidden], .mapcard:not([hidden]) ~ .mapkeybtn{display:none}
  .mapkeybtn[aria-expanded="true"]{background:var(--gold-wash); border-color:var(--gold); color:var(--gold-strong)}
  .mapkeybtn:not([hidden]){display:block}
  .maplegend{display:none; bottom:54px; max-width:calc(100% - 24px); max-height:calc(100% - 70px)}
  .maplegend.open:not([hidden]){display:flex}
  .mapbar{flex-wrap:wrap; row-gap:4px}                       /* the note gets its own full-width line(s) above the buttons */
  .mapnote{flex:1 0 100%; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; font-size:13px}
}
/* ===== The Library (06-library.js): historical sources, set apart from Scripture ===== */
.libmark{display:inline-block; margin:0 0 14px; padding:3px 11px; border:1px solid var(--rule); border-radius:12px; font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); background:var(--surface)}
.lpickmark{grid-column:1 / -1; justify-self:start}
.lhead{font-family:var(--serif); font-size:30px; font-weight:500; line-height:1.2; margin:8px 0 0}
.lbooksub{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink-soft); margin:6px 0 0}
.lhome{padding:0 14px}
.lgroup{margin:0 0 34px}
.lgroup h3{font-family:var(--serif); font-size:26px; font-weight:500; margin:0 0 6px}
.labout, .lintro{font-family:var(--serif); font-size:17px; line-height:1.6; color:var(--ink-soft); margin:0 0 14px}
.lintro{text-align:center; margin:-8px 0 26px}
.lworks{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.lworks button{display:block; width:100%; text-align:left; border:0; border-bottom:1px solid var(--rule); background:none; padding:11px 8px 12px; cursor:pointer; color:var(--ink)}
.lworks button:hover{background:var(--gold-wash)}
.lwt{display:block; font-family:var(--serif); font-size:19px; font-weight:500}
.lwa{display:block; font-size:14.5px; line-height:1.45; color:var(--ink-soft); margin-top:2px}
.loff{text-align:center}
.lbook{font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-strong); margin:26px 0 2px}
.lbook + .lbooksub{margin:0 0 8px}
.lchlist{list-style:none; margin:4px 0 0; padding:0}
.lchlist button{display:flex; gap:12px; width:100%; text-align:left; border:0; background:none; padding:6px 8px; border-radius:7px; cursor:pointer; color:var(--ink); font-size:15px; line-height:1.4}
.lchlist button:hover{background:var(--gold-wash)}
.lchlist b{flex:none; min-width:3.2em; font-weight:500; color:var(--gold-strong); font-variant-numeric:tabular-nums}
.lranges, .lpchaps{display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:8px; margin:8px 0 0}
.lranges button{border:1px solid var(--rule); background:var(--surface); border-radius:10px; padding:10px 4px; font-family:var(--serif); font-size:17px; cursor:pointer; color:var(--ink); font-variant-numeric:lining-nums}
.lranges button:hover{border-color:var(--gold); color:var(--gold-strong)}
.lpchaps button{aspect-ratio:auto; padding:12px 4px}
.lchaps{margin-top:8px}
.libtext.josephus .lsec{text-indent:0; margin:0 0 .9em}
.lsideabout{font-size:14.5px; line-height:1.5; margin:0 0 6px}
.lsideby{font-size:13px; color:var(--ink-soft); margin:0 0 22px}
/* in an event's popup: the Library's witnesses */
.pop .witn{margin-top:14px; border-top:1px solid var(--rule); padding-top:10px}
.pop .witn h3{margin:0}
.pop .witn-sub{font-size:13.5px; color:var(--ink-soft); margin:2px 0 8px}
.pop .witn ul{list-style:none; margin:0; padding:0}
.pop .witn li{margin:0 0 6px; font-size:15px; line-height:1.45}
.witn-go{border:1px solid var(--rule); background:none; border-radius:14px; padding:1px 10px; margin-right:8px; cursor:pointer; font-size:14px; font-weight:500; color:var(--gold-strong)}
.witn-go:hover{border-color:var(--gold)}
.witn-note{color:var(--ink-soft)}
@media (max-width:720px){ .lhome{display:none} }
.libres .stext{display:block}
@media (max-width:1000px){ .controls .mapbtn span{display:none} .controls .mapbtn{padding:0 10px} }   /* Map and Library as icons, so the controls keep to one row */
.lkey{display:grid; grid-template-columns:auto 1fr; gap:3px 10px; margin:0 0 22px; font-size:13.5px; line-height:1.4}
.lkey dt{font-family:var(--serif); color:var(--gold-strong); white-space:nowrap}
.lkey dd{margin:0; color:var(--ink-soft)}

/* ===== The commentary panel (website): Matthew Henry, Jamieson-Fausset-Brown, and John Gill beside the Bible text ===== */
.rcomm{display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px 0 12px; border-radius:20px; border:1px solid var(--rule); background:none; cursor:pointer; font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink); flex:none}
.rcomm[hidden]{display:none}
.rcomm svg{width:18px; height:18px}
.rcomm:hover{background:var(--gold-wash)}
.rcomm[aria-pressed="true"]{background:var(--gold-wash); border-color:var(--gold); color:var(--gold-strong)}
.cpanel{position:absolute; top:0; right:0; bottom:0; z-index:3; width:min(440px, 100%); overflow:auto; overflow-x:hidden; overflow-wrap:anywhere; background:var(--grain), var(--surface); border-left:1px solid var(--rule); box-shadow:-18px 0 40px rgba(40,26,10,.14); animation:wpIn .16s ease-out}
.cpanel[hidden]{display:none}
.chdr{position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:10px; padding:10px 12px 10px 16px; background:var(--surface); border-bottom:1px solid var(--rule)}
.ctabs{display:flex; flex-wrap:wrap; gap:5px; flex:1; min-width:0}
.ctabs button{flex:0 1 auto; height:30px; border:1px solid var(--rule); border-radius:15px; background:none; cursor:pointer; font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--ink-soft); padding:0 11px; white-space:nowrap}
.ctabs button:hover{color:var(--ink)}
.ctabs button.cnil{opacity:.45; font-weight:500}
.ctabs button.cnil[aria-pressed="true"]{opacity:.8}
.ctabs .cmore{border-style:dashed; font-weight:600}
.cpick{position:absolute; left:8px; right:8px; top:100%; z-index:5; max-height:min(60vh, 460px); overflow:auto; padding:6px 6px 10px; background:var(--surface); border:1px solid var(--rule); border-radius:14px; box-shadow:0 14px 34px rgba(40,26,10,.28)}
.cpickhd{display:flex; justify-content:space-between; align-items:center; padding:6px 8px 2px; font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.cpick h5{margin:10px 8px 2px; font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--gold-strong)}
.cpitem{display:flex; gap:10px; align-items:flex-start; width:100%; padding:8px; border:0; border-radius:10px; background:none; text-align:left; cursor:pointer; color:var(--ink)}
.cpitem:hover, .cpitem[aria-selected="true"]{background:var(--gold-wash)}
.cpitem.cnil{opacity:.55}
.cpmark{flex:none; width:18px; height:18px; margin-top:2px; border:1px solid var(--rule); border-radius:50%; font-size:12px; line-height:16px; text-align:center; color:var(--gold-strong)}
.cpitem[aria-selected="true"] .cpmark{border-color:var(--gold)}
.cptxt{display:flex; flex-direction:column; min-width:0; font-family:var(--serif)}
.cptxt b{font-size:15.5px; font-weight:600}
.cptxt i{font-style:normal; font-family:var(--sans); font-size:12px; color:var(--ink-soft)}
.cptxt small{font-family:var(--sans); font-size:12.5px; color:var(--ink-soft)}
.ccomhd{flex-wrap:wrap; row-gap:8px}
.ccomhd .ctabs{flex:1 1 100%}
.ccmpbtn{flex:none; margin-left:auto; height:34px; padding:0 13px; border:1px dashed var(--rule); border-radius:17px; background:none; cursor:pointer; font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--ink-soft)}
.ccmpbtn:hover{color:var(--ink)}
.ccmpbtn[aria-pressed="true"]{border-style:solid; border-color:var(--gold); background:var(--gold-wash); color:var(--gold-strong)}
.ctabs button[aria-pressed="true"]{background:var(--gold-wash); border-color:var(--gold); color:var(--gold-strong)}
.cclose{flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--rule); background:var(--surface); cursor:pointer; font-size:20px; line-height:1; color:var(--ink)}
.cbody{padding:18px 24px 48px}
.ctitle{font-family:var(--serif); font-size:24px; margin:0 0 2px}
.cnotice{margin:0 0 14px; font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.cnone{font-style:italic; color:var(--ink-soft)}
.chint{margin:-8px 0 14px; font-family:var(--sans); font-size:12.5px; color:var(--ink-soft)}
.cpanel.ccmp{width:min(600px, 100%)}
.cby{margin:0 0 10px; padding:2px 0 0 12px; border-left:3px solid var(--ck, var(--gold))}
.cby[data-k="0"]{--ck:var(--gold)}
.cby[data-k="1"]{--ck:var(--judah, #3b6e8f)}
.cby[data-k="2"]{--ck:var(--israel, #8f4a3b)}
.cwho{margin:0 0 4px !important; font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--ink-soft)}
.cstub{display:block; margin:0 0 6px; border:0; background:none; padding:0; cursor:pointer; font-family:var(--sans); font-size:13px; font-style:italic; color:var(--gold-strong); text-align:left}
.cstub:hover{text-decoration:underline}
.cintro, .cnote{font-family:var(--serif); font-size:16px; line-height:1.55}
.cintro p, .cnote p, .cbook p{margin:0 0 .75em}
.cintro h4, .csec{font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; margin:14px 0 6px}
.cintro{margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--rule)}
.cnote{padding:12px 0 2px 12px; margin-left:-12px; border-left:3px solid transparent; scroll-margin-top:62px}
.cnote.on{border-left-color:var(--gold); background:var(--gold-wash)}
.clab{display:inline-block; margin:0 0 6px; padding:2px 10px; border:1px solid var(--rule); border-radius:12px; background:var(--surface); cursor:pointer; font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--gold-strong)}
.clab:hover{border-color:var(--gold)}
.clem{font-weight:700}
.cpanel .cfoot{display:block; margin-top:26px; padding-top:12px; border-top:1px solid var(--rule); font-family:var(--serif)}
.cpanel .cbook{margin:0 0 10px; font-family:var(--serif); font-size:15.5px; font-weight:400; line-height:1.5; letter-spacing:0; text-transform:none; color:var(--ink)}   /* (.cbook is also the reader's book title) */
.cbook summary{cursor:pointer; font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink-soft); margin-bottom:6px}
.csmall{font-family:var(--sans); font-size:13px; color:var(--ink-soft); margin:0 0 8px}
.vn.hascomm::after{content:""; display:inline-block; width:4px; height:4px; margin-left:2px; border-radius:50%; background:var(--gold); vertical-align:.1em}
@media (min-width:1101px){
  dialog.reader.copen .rmain{right:440px}
  dialog.reader.copen .rgrid{grid-template-columns:minmax(0,1fr) minmax(0,38rem) minmax(0,.6fr); gap:0 36px}
  dialog.reader.copen .rside{display:none}
  dialog.reader.copen.ccmp .rmain{right:600px}
  dialog.reader.copen.wopen .rmain{right:440px}
  dialog.reader.copen.ccmp.wopen .rmain{right:600px}
}
@media (max-width:720px){
  .rcomm span{display:none}
  .rcomm{padding:0 11px}
  .cpanel{top:auto; height:62%; width:100%; border-left:0; border-top:1px solid var(--rule); border-radius:16px 16px 0 0; box-shadow:0 -14px 40px rgba(40,26,10,.2)}
  .cbody{padding:14px 18px 40px}
}
/* ---- Bible History: its own timeline in a full-screen dialog (06-history.js) ---- */
.histbtn{ }
dialog.history .htitle{font-family:var(--serif); font-size:24px; font-weight:700; margin:0 4px 0 4px}
.hzoom{margin-left:auto}
.htreebtn{margin-left:auto}
.htreebtn + .hzoom{margin-left:0}
.hbody{flex:1; min-height:0; display:flex; flex-direction:column}
#hstage{position:relative; flex:1; min-height:0; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; outline:0}
#hstage.dragging{cursor:grabbing}
#hband{position:relative; height:34px; flex:none; overflow:hidden; border-bottom:1px solid var(--rule)}
.hper{position:absolute; left:0; top:0; height:100%; border:0; border-right:1px solid var(--rule); padding:0 8px; margin:0; background:var(--era-a); cursor:pointer; text-align:left; white-space:nowrap; overflow:hidden; font-family:var(--serif); font-style:italic; font-size:14.5px; color:var(--ink-soft)}
.hper:nth-child(even){background:var(--era-b)}
.hper.narrow{font-size:0}
.hper:hover{color:var(--ink)}
#haxis{position:relative; height:30px; overflow:hidden; background:var(--gold-wash); border-bottom:1px solid var(--gold)}
.htick{position:absolute; left:0; top:7px; font-size:12.5px; font-weight:700; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; padding-left:4px; border-left:1px solid var(--gold)}
#hlanes{position:relative; will-change:transform}
.hlane{position:absolute; left:0; right:0; top:0; border-bottom:1px solid var(--rule); pointer-events:none}
.hlane:nth-of-type(odd){background:var(--lane-alt)}
.hlane-label{position:absolute; left:10px; top:6px; font-size:13.5px; font-weight:600; color:var(--ink-soft); z-index:3; padding-right:12px; background:linear-gradient(90deg,var(--page) 70%,transparent)}
.hi{position:absolute; left:0; top:0; height:21px; border:0; padding:0; background:none; cursor:pointer; color:var(--ink); text-align:left; --hc:var(--gold)}
.hi .hbar{position:absolute; left:0; top:0; height:100%; border-radius:3px; border-left:3px solid var(--hc); background:color-mix(in srgb, var(--hc) 20%, transparent)}
.hi .hnm{position:absolute; left:8px; top:0; line-height:21px; font-size:13px; font-weight:500; white-space:nowrap}
.hi.pt .hnm{left:19px; font-weight:600}
.hi.pt::before{content:""; position:absolute; left:3px; top:5px; width:10px; height:10px; transform:rotate(45deg); background:var(--hc)}
.hi.cmp{height:8px} .hi.cmp .hnm{display:none} .hi.cmp.pt::before{left:0; top:0; width:7px; height:7px}
.hi:hover .hbar{background:color-mix(in srgb, var(--hc) 38%, transparent)}
.hi:focus-visible{outline:2px solid var(--gold); outline-offset:1px}
.hs-law{--hc:var(--gold)} .hs-history{--hc:var(--faience)} .hs-poetry{--hc:var(--israel)} .hs-major{--hc:var(--judah)} .hs-minor{--hc:var(--herod)}
.hs-gospels{--hc:var(--rome)} .hs-paul{--hc:var(--gold-strong)} .hs-general{--hc:var(--world)}
.hk-ot-heb{--hc:var(--gold)} .hk-greek{--hc:var(--israel)} .hk-latin{--hc:var(--rome)} .hk-printed{--hc:var(--herod)}
.ht-ancient{--hc:var(--world)} .ht-english{--hc:var(--judah)}
.hm-canon{--hc:var(--gold-strong)} .hm-pressure{--hc:var(--judah)} .hm-print{--hc:var(--herod)} .hm-discovery{--hc:var(--israel)} .hm-reform{--hc:var(--rome)}
.htreebtn{padding:0 14px}
.pop figure.htree{margin:8px 0 0}
.hlegend{flex:none; display:flex; flex-wrap:wrap; gap:4px 22px; padding:8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--rule); font-size:13px; color:var(--ink-soft)}
.hhint{margin-left:auto; font-style:italic}
.hlg{display:inline-flex; flex-wrap:wrap; align-items:center; gap:2px 11px}
.hlg b{font-weight:600; color:var(--ink)}
.hsw{display:inline-flex; align-items:center; gap:5px}
.hsw i{width:14px; height:10px; border-radius:2px; border-left:3px solid var(--hc); background:color-mix(in srgb, var(--hc) 30%, transparent)}
.pop .hfacts{display:grid; grid-template-columns:max-content 1fr; gap:3px 14px; margin:0 0 14px; font-size:15px}
.pop .hfacts dt{color:var(--ink-soft)}
.pop .hfacts dd{margin:0}
@media (max-width:720px){ dialog.history .htitle{font-size:20px} .hlegend{font-size:12px; gap:2px 14px} }
@media (max-width:1000px){ .controls .histbtn span{display:none} .controls .histbtn{padding:0 10px} }

@media (max-width:720px){ .htreebtn span{display:inline !important; font-size:12.5px} .htreebtn{padding:0 10px; height:34px} dialog.history .htitle{display:none} }
dialog#pop.wide{width:min(940px, calc(100vw - 24px))}

/* Bible History: search box, and the phone layout */
.hq{height:36px; width:min(300px, 28vw); border:1px solid var(--rule); background:var(--surface); border-radius:6px; padding:0 10px; margin-left:auto}
@media (max-width:1000px){ .hq{width:min(220px, 26vw)} }
@media (max-width:720px){
  dialog.history .rbar{flex-wrap:wrap; gap:8px}
  .hq{order:5; flex:1 1 100%; width:auto; margin-left:0}
  .hzoom{margin-left:auto}
  .htreebtn{margin-left:0}
  .hlegend{flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; gap:4px 18px; padding-top:6px}
  .hlg{flex-wrap:nowrap}
  .hhint{display:none}
  .hlane-label{font-size:12.5px}
}

.csearch{margin:0 0 12px}
.csearch input{width:100%; box-sizing:border-box; height:36px; padding:0 14px; border:1px solid var(--rule); border-radius:18px; background:var(--surface); font-size:14.5px; color:var(--ink)}
.csearch input:focus{outline:2px solid var(--gold); outline-offset:1px}
.slinkrow{margin:0 0 12px; font-family:var(--sans); font-size:14px}
.cwhom{display:inline-block; margin:0 8px 0 4px; padding:0 8px; border:1px solid var(--rule); border-radius:10px; font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}

/* eleven commentaries: the tabs are chips that wrap onto more rows, and on a phone the touch targets are taller */
@media (max-width:720px){ .ctabs button{height:36px} .ccmpbtn{height:40px; border-radius:20px} }

.chintbsb{margin:8px 0 0; font-family:var(--sans); font-size:13px; color:var(--ink-soft)}
/* ---- My notes: the panel beside the reader and the dialog (06-notes.js) ---- */
.rnotes[aria-pressed="true"]{background:var(--gold-wash); border-color:var(--gold); color:var(--gold-strong)}
.ntitle{font-family:var(--serif); font-size:20px; margin:0; flex:1}
.nfilebar{margin:0 0 14px; font-family:var(--sans); font-size:13.5px; color:var(--ink-soft)}
.nfilebar select{margin-left:4px; max-width:60%; font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:5px 8px}
.ncomp{padding:12px; margin:0 0 18px; border:1px solid var(--rule); border-radius:12px; background:var(--gold-wash)}
.nwhere{margin:0 0 8px; font-family:var(--sans); font-size:14px; line-height:1.45}
.ntext{display:block; width:100%; box-sizing:border-box; resize:none; font-family:var(--serif); font-size:16.5px; line-height:1.5; color:var(--ink); background:var(--surface); border:1px solid var(--rule); border-radius:9px; padding:9px 11px}
.ntext:focus{outline:2px solid var(--gold); outline-offset:1px}
.nadd{margin-top:10px; min-height:42px; padding:0 20px; border-radius:21px; border:0; background:var(--gold-strong); color:var(--surface); font-family:var(--sans); font-size:15px; font-weight:600; cursor:pointer}
.nsec{margin:0 0 8px; font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.nhint{font-family:var(--sans); font-size:14px; line-height:1.55; color:var(--ink-soft)}
.nwarn{padding:9px 12px; border-radius:8px; background:color-mix(in srgb, #c0392b 14%, var(--surface)); border:1px solid color-mix(in srgb, #c0392b 45%, transparent); font-family:var(--sans); font-size:13.5px}
.nwarn[hidden]{display:none}
.ncard{margin:0 0 14px; padding:10px 12px 8px; border:1px solid var(--rule); border-left:4px solid var(--teal, var(--gold)); border-radius:10px; background:var(--surface)}
.ntop{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.nref{border:0; background:none; padding:0; font-family:var(--sans); font-size:14px; font-weight:700; color:var(--gold-strong); cursor:pointer; text-align:left}
.nref:disabled{color:var(--ink-soft); cursor:default}
.nfile{font-family:var(--sans); font-size:12px; color:var(--ink-soft); border:1px solid var(--rule); border-radius:10px; padding:1px 8px}
.nacts{margin-left:auto; display:flex; gap:2px}
.nacts button{width:34px; height:34px; border:0; border-radius:8px; background:none; cursor:pointer; font-size:16px; color:var(--ink-soft)}
.nacts button:hover{background:var(--gold-wash); color:var(--ink)}
.ncard .ntext{border-color:transparent; background:transparent; padding:6px 6px}
.ncard .ntext:hover{border-color:var(--rule)}
.nsaved{display:inline-block; min-height:16px; font-family:var(--sans); font-size:12px; color:var(--ink-soft)}
.nmeta{margin:0; font-family:var(--sans); font-size:12px; color:var(--ink-soft)}
.nall{margin-top:8px}
.inote-wrap{display:block; margin:.4em 0 .9em; text-indent:0; white-space:normal; font-weight:400}
.inote{margin:6px 0; padding:8px 12px 9px; border:1px solid var(--rule); border-left:4px solid var(--teal, var(--gold)); border-radius:8px; background:var(--surface); font-family:var(--sans); font-size:14.5px; line-height:1.5; color:var(--ink); text-align:left}
.inote[hidden]{display:none}
.inote-h{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin:0 0 3px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft)}
.inote-ref{font-weight:400; letter-spacing:0; text-transform:none; font-style:italic}
.inote-ed{margin-left:auto; font-size:12px; font-weight:400; letter-spacing:0; text-transform:none}
.inote-t{margin:0; white-space:pre-wrap; overflow-wrap:anywhere}
.inote-more{font-family:var(--sans); font-size:13px}
.vn.hasnote::before{content:""; display:inline-block; width:5px; height:5px; margin-right:2px; border-radius:1px; background:var(--teal, var(--gold-strong)); vertical-align:.12em; transform:rotate(45deg)}
.nfiles{display:grid; gap:10px; margin:0 0 18px}
.nfilecard{display:flex; flex-direction:column; gap:3px; text-align:left; padding:14px 16px; border:1px solid var(--rule); border-radius:12px; background:var(--surface); cursor:pointer; font-family:var(--sans); color:var(--ink)}
.nfilecard strong{font-family:var(--serif); font-size:19px}
.nfilecard span{font-size:13px; color:var(--ink-soft)}
.nfilecard:hover{border-color:var(--gold)}
.ntools{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px}
.ntools .rbtn{width:auto; margin:0}
.nsmall{border:1px solid var(--rule); border-radius:14px; background:var(--surface); color:var(--ink); padding:20px 22px; width:min(380px, 92vw); font-family:var(--sans)}
.nsmall::backdrop{background:rgba(30,20,8,.45)}
.nsmall h3{margin:0 0 10px; font-family:var(--serif); font-size:20px}
.nsmall input{display:block; width:100%; box-sizing:border-box; font:inherit; font-size:16px; padding:9px 11px; border:1px solid var(--rule); border-radius:8px; background:var(--surface); color:var(--ink)}
.nbtns{display:flex; justify-content:flex-end; gap:10px; margin-top:16px}
.nbtns .rbtn{width:auto; margin:0}
.nbtns .primary{min-height:38px; padding:0 18px; border-radius:19px; border:0; background:var(--gold-strong); color:var(--surface); font-weight:600; cursor:pointer}
#ntoast{position:fixed; inset:auto auto calc(22px + env(safe-area-inset-bottom, 0px)) 50%; transform:translateX(-50%); margin:0; display:none; align-items:center; gap:14px; padding:10px 16px; border:0; border-radius:22px; background:var(--ink); color:var(--surface); font-family:var(--sans); font-size:14px; box-shadow:0 8px 28px rgba(0,0,0,.3)}
#ntoast:popover-open{display:flex}
#ntoast button{border:0; background:none; color:var(--gold); font:inherit; font-weight:700; cursor:pointer; padding:4px 2px}
dialog.notesdlg .htitle{font-family:var(--serif); font-size:24px; font-weight:700; margin:0 4px}
@media (max-width:720px){ dialog.notesdlg .htitle{display:none} .ntext{font-size:16px} }

/* ---- highlights (06-notes.js): eight pastel colors, lighter on parchment and vellum, darker and translucent in Lamplight ---- */
:root{--hll:70%; --hla:.62}
:root[data-palette="lamplight"]{--hll:40%; --hla:.55}
@media (prefers-color-scheme: dark){ :root:not([data-palette]){--hll:40%; --hla:.55} }
.hc0{--h:50; --hs:95} .hc1{--h:24; --hs:90} .hc2{--h:346; --hs:78} .hc3{--h:266; --hs:58} .hc4{--h:200; --hs:82} .hc5{--h:150; --hs:62} .hc6{--h:96; --hs:34} .hc7{--h:34; --hs:42}
mark.hlt{color:inherit; padding:0; border-radius:3px; background:hsl(var(--h) calc(var(--hs) * 1%) var(--hll) / var(--hla)); -webkit-box-decoration-break:clone; box-decoration-break:clone}
mark.hlt.hlflash{outline:2px solid var(--gold); outline-offset:1px}
#hltool{position:fixed; inset:auto; margin:0; display:none; flex-direction:column; align-items:stretch; gap:8px; padding:9px 12px; border:1px solid var(--rule); border-radius:18px; background:var(--surface); color:var(--ink); box-shadow:0 8px 28px rgba(0,0,0,.3); font-family:var(--sans); max-width:calc(100vw - 16px)}
#hltool:popover-open{display:flex}
.hlrow{display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap}
.hlrow[hidden]{display:none}
.hlrow .hlcap{flex:none; width:6.6em}
.hlrow > .hlact:last-child, .hlnotebtn{margin-left:auto}
.hlrow > .hlact + .hlnotebtn{margin-left:0}
.hlcap{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.hdots{display:flex; flex-wrap:wrap; gap:6px}
.hdot{width:28px; height:28px; padding:0; border-radius:50%; border:2px solid transparent; cursor:pointer; background:hsl(var(--h) calc(var(--hs) * 1%) var(--hll)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.hdot[aria-pressed="true"]{border-color:var(--ink)}
.hdot:hover{transform:scale(1.12)}
.hlact{height:32px; padding:0 12px; border-radius:16px; border:1px solid var(--rule); background:none; color:var(--ink); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer}
.hlact:hover{background:var(--gold-wash)}
.nquote{margin:0 0 8px; padding:8px 12px; border-radius:6px; font-family:var(--serif); font-size:16px; line-height:1.5; background:hsl(var(--h) calc(var(--hs) * 1%) var(--hll) / var(--hla))}
.nquote.nul{background:color-mix(in srgb, var(--ink) 5%, transparent)}

/* ---- underlines (06-notes.js): single, double, or wavy, in eight ink colors; deeper on parchment and vellum, lighter in Lamplight.
   The colors are UL in 06-notes.js (hue, saturation); Ink is the page's own ink color. ---- */
:root{--ull:40%}
:root[data-palette="lamplight"]{--ull:68%}
@media (prefers-color-scheme: dark){ :root:not([data-palette]){--ull:68%} }
.uc0{--ucol:var(--ink)} .uc1{--ucol:hsl(0 72% var(--ull))} .uc2{--ucol:hsl(24 88% var(--ull))} .uc3{--ucol:hsl(44 85% var(--ull))} .uc4{--ucol:hsl(135 50% var(--ull))} .uc5{--ucol:hsl(182 65% var(--ull))} .uc6{--ucol:hsl(214 72% var(--ull))} .uc7{--ucol:hsl(276 50% var(--ull))}
u.ult{text-decoration-line:underline; text-decoration-style:solid; text-decoration-color:var(--ucol); text-decoration-thickness:2px; text-underline-offset:.2em; text-decoration-skip-ink:none}
u.ult.us-double{text-decoration-style:double; text-decoration-thickness:1.5px}
u.ult.us-wavy{text-decoration-style:wavy; text-decoration-thickness:1.5px}
u.ult.hlflash{outline:2px solid var(--gold); outline-offset:1px; border-radius:3px}
.udot{width:28px; height:28px; padding:0; border-radius:50%; border:2px solid transparent; cursor:pointer; background:var(--surface); box-shadow:inset 0 0 0 5px var(--ucol)}
.udot[aria-pressed="true"]{border-color:var(--ink)}
button.udot:hover{transform:scale(1.12)}
.ustyles{display:flex; gap:6px}
.usty{width:44px; height:32px; padding:0 0 4px; border-radius:8px; border:1px solid var(--rule); background:none; color:var(--ink); font-family:var(--serif); font-size:17px; cursor:pointer}
.usty u.ult{text-underline-offset:.24em}
.usty:hover{background:var(--gold-wash)}
.usty[aria-pressed="true"]{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.ucolbtn{display:inline-flex; align-items:center; gap:4px; padding:0 8px}
.ucolbtn .udot{width:20px; height:20px; box-shadow:inset 0 0 0 4px var(--ucol); cursor:inherit}
.ucaret{font-size:12px; color:var(--ink-soft)}
.nulset{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0 0 8px}
.ncard .udot{width:22px; height:22px; box-shadow:inset 0 0 0 4px var(--ucol)}
.ncard .usty{width:38px; height:28px; font-size:15px}
.ncolorhead .udot{flex:none; cursor:default}
.ncolkind{margin:8px 0 12px; font-family:var(--sans); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.njump{margin:-6px 0 10px}
@media (max-width:720px){
  .hlrow .hlcap{width:100%; font-size:11px}
  #hltool .hdot, #hltool .udot{width:30px; height:30px}
}
.ncard .hdots{margin:0 0 8px}
.ncard .hdot{width:22px; height:22px}
.nmoved{margin:0 0 8px; padding:6px 10px; border-radius:6px; font-family:var(--sans); font-size:13px; background:color-mix(in srgb, #c0392b 12%, var(--surface))}
.ninl{display:flex; align-items:center; gap:8px; margin:0 0 12px; font-family:var(--sans); font-size:14px; cursor:pointer}
.ntip{margin:-6px 0 14px; font-size:13px}
.nbycolor{width:auto; display:inline-block; margin:0 10px 18px 0}
.ncolor{margin:0 0 26px}
.ncolorhead{display:flex; align-items:center; gap:10px; margin:0 0 10px}
.ncolorhead .hdot{flex:none; cursor:default}
.ncolorhead input{flex:1; min-width:0; font:inherit; font-family:var(--sans); font-size:16px; padding:8px 10px; border:1px solid var(--rule); border-radius:8px; background:var(--surface); color:var(--ink)}

.nsnip{background:var(--gold-wash); border-left:3px solid var(--gold)}
.nsnip p{margin:0}
.nsnip cite{display:block; margin-top:6px; font-family:var(--sans); font-size:12.5px; font-style:normal; color:var(--ink-soft)}
.hladd{background:var(--gold-strong); border-color:var(--gold-strong); color:var(--surface)}
.hladd:hover{background:var(--gold-strong); filter:brightness(1.1)}

.nfilebar{display:flex; flex-wrap:wrap; gap:8px 16px}
.nfilebar label{white-space:nowrap}
.nfilebar select{max-width:11em}
.nonly{margin:-6px 0 14px; padding:6px 10px; border-radius:6px; background:var(--gold-wash); font-family:var(--sans); font-size:13px}

/* ---- printing notes (06-notes.js) ---- */
.pfield,.pcheck,.pset label{display:block; margin:0 0 10px; font-size:15px}
.pfield select{display:block; width:100%; margin-top:4px; font:inherit; padding:7px 9px; border:1px solid var(--rule); border-radius:8px; background:var(--surface); color:var(--ink)}
.pset{border:1px solid var(--rule); border-radius:8px; margin:0 0 10px; padding:8px 12px 2px}
.pset legend{font-size:13px; color:var(--ink-soft); padding:0 6px}
.pscope{margin:-4px 0 14px; font-weight:600}
#nprintdoc{display:none}
@media print{
  @page{margin:16mm 16mm 20mm; @bottom-center{content:"BibleTimelineExplorer.com ·  page " counter(page) " of " counter(pages); font:8.5pt sans-serif; color:#555}}
  body.nprinting > *:not(#nprintdoc){display:none !important}
  html:has(body.nprinting), body.nprinting{height:auto !important; overflow:visible !important; background:#fff !important}
  body.nprinting #nprintdoc{display:block; --hll:72%; --hla:.7; color:#000; background:#fff; font-family:var(--serif); font-size:12pt; line-height:1.5; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  #nprintdoc .ph{margin:0 0 14pt; padding-bottom:8pt; border-bottom:1.5pt solid #000}
  #nprintdoc h1{font-size:22pt; margin:0 0 2pt; font-weight:700}
  #nprintdoc h2{font-size:15pt; margin:18pt 0 6pt; break-after:avoid; border-bottom:.5pt solid #888}
  #nprintdoc .psub,#nprintdoc .plegend{margin:0; font-family:var(--sans); font-size:10pt; color:#333}
  #nprintdoc .plegend{margin-top:5pt}
  #nprintdoc .pkey{margin-right:12pt}
  #nprintdoc .prun{margin:0 0 12pt; break-inside:avoid-page}
  #nprintdoc .pvref{margin:0 0 2pt; font-family:var(--sans); font-size:10pt; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#333; break-after:avoid}
  #nprintdoc .pscr{padding:0 0 0 10pt; border-left:2pt solid #999; color:#000}
  #nprintdoc .pscr .bp,#nprintdoc .pscr p{margin:0 0 3pt}
  #nprintdoc .pscr .wj,#nprintdoc .pscr .vt{color:#000}
  #nprintdoc .pscr .vn{color:#333}
  #nprintdoc .pent{margin:6pt 0 0 10pt}
  #nprintdoc .pref{margin:0; font-family:var(--sans); font-size:9.5pt; font-weight:700; color:#333}
  #nprintdoc .ptext{margin:1pt 0 0; white-space:pre-wrap}
  #nprintdoc .pq{margin:2pt 0 2pt 0; padding-left:8pt; border-left:1.5pt solid #bbb; font-style:italic}
  #nprintdoc .pq p{margin:0}
  #nprintdoc .pq cite{display:block; font-family:var(--sans); font-style:normal; font-size:9.5pt; color:#333}
  #nprintdoc .pfoot{margin-top:18pt; padding-top:6pt; border-top:.5pt solid #888; text-align:center; font-family:var(--sans); font-size:8.5pt; color:#444; break-inside:avoid}
  #nprintdoc mark.hlt{color:#000}
  #nprintdoc u.ult{--ull:40%; text-decoration-thickness:1.2pt; text-underline-offset:2.5pt}
  #nprintdoc u.ult.us-double{text-decoration-thickness:.8pt}
  #nprintdoc u.ult.us-wavy{text-decoration-thickness:1pt}
  #nprintdoc .uc0{--ucol:#000}
  /* black and white: underlines print as black lines below the words in their own style; highlights never use a line below */
  #nprintdoc.pbw u.ult{text-decoration-color:#000}
  #nprintdoc.pbw mark.hlt{background:none; text-decoration-color:#000; text-decoration-thickness:1pt; text-decoration-line:overline; text-decoration-style:solid}
  #nprintdoc.pbw .hc1{text-decoration-style:double; text-decoration-thickness:.8pt}
  #nprintdoc.pbw .hc2{text-decoration-style:dotted; text-decoration-thickness:2pt}
  #nprintdoc.pbw .hc3{text-decoration-style:dashed}
  #nprintdoc.pbw .hc4{text-decoration-style:wavy}
  #nprintdoc.pbw .hc5{text-decoration-thickness:2.6pt}
  #nprintdoc.pbw mark.hc6{text-decoration-line:none; background:#d9d9d9}
  #nprintdoc.pbw mark.hc7{text-decoration-line:none; outline:.8pt solid #000; outline-offset:0; border-radius:0}
}
.nsmall input[type="checkbox"],.nsmall input[type="radio"]{display:inline-block; width:auto; margin:0 8px 0 0; vertical-align:-2px}
.nall{display:block; margin-top:10px}
.nprint{display:inline-flex; align-items:center; justify-content:center; margin-left:auto}
.nprint[hidden]{display:none}
.nprint svg{width:18px; height:18px}
.nprint:hover{background:var(--gold-wash)}
.chdr .ntitle{flex:none}
.chdr .nprint + .cclose{margin-left:0}
.chdr .nprint{margin-left:0}
.chdr .ntitle + .nprint + .cclose, .chdr .ntitle + .cclose{margin-left:auto}

.nbackup{margin:26px 0 0; padding:14px 16px; border:1px solid var(--rule); border-radius:12px}
.nbackup h3{margin:0 0 6px; font-family:var(--serif); font-size:19px}
.nbackup .ntools{margin:10px 0 0}
.nbackup .nadd{margin-top:0}
.nnudge{padding:8px 10px; border-radius:6px; background:var(--gold-wash); color:var(--ink)}
.xopts[hidden]{display:none}

.nlinkbox{margin-top:18px; padding-top:14px; border-top:1px solid var(--rule)}
.nlinkbox h4{margin:0 0 6px; font-family:var(--sans); font-size:15px}
.nlinkbox .ntools{margin:8px 0 0}

/* ---- the installed app and phones (Phase 7 step 1) ---- */
html{-webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; text-size-adjust:100%}
html,body{overscroll-behavior:none}
button,select,summary,[role="button"],.sref{touch-action:manipulation}
@media (min-width:721px){ .top{padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right))} }
.top{padding-top:max(10px, env(safe-area-inset-top))}
.foot{padding-bottom:max(8px, env(safe-area-inset-bottom))}
.appbar{position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:60; max-width:30rem; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:12px 14px; border:1px solid var(--rule); border-radius:14px; background:var(--surface); color:var(--ink); box-shadow:0 10px 32px rgba(0,0,0,.28); font-family:var(--sans); font-size:14.5px; line-height:1.4}
.appbar[hidden]{display:none}
.appmsg{flex:1 1 14rem; margin:0}
.appbtns{display:flex; gap:8px; margin-left:auto}
.appbar button{min-height:40px; padding:0 16px; border-radius:20px; border:1px solid var(--rule); background:none; color:var(--ink); font:inherit; font-weight:600; cursor:pointer}
.appbar .appgo{background:var(--gold-strong); border-color:var(--gold-strong); color:var(--surface)}
.appbar .appgo[hidden]{display:none}
.offpill{position:fixed; inset:auto auto calc(12px + env(safe-area-inset-bottom, 0px)) 12px; margin:0; display:none; padding:6px 12px; border:0; border-radius:16px; background:var(--ink); color:var(--surface); font-family:var(--sans); font-size:12.5px; pointer-events:none; opacity:.92}
.offpill:popover-open{display:block}
@media (max-width:720px){
  .top{padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right))}
  .controls .iconbtn, .controls .mapbtn, .controls .biblebtn{min-width:44px; height:44px}
  .controls input, .controls select{height:44px; font-size:16px}
  .zoomgrp button{height:42px; min-width:44px}
  .rsearch input, .rtrans, .ntext, .nsmall input, .nsmall select, .ncolorhead input, .pfield select{font-size:16px}
  .rtrans{height:44px}
  .rsearch{height:44px}
  .rarrow{width:36px; height:40px}
  .rtitle{padding:0 6px}
  .rbar{gap:6px}
  .cclose, .nacts button{min-width:40px; min-height:40px}
  /* the icons share one row (the theme button joins them), the search has a row, the era menu and the zoom buttons share one */
  .controls .biblebtn, .controls .mapbtn{order:1}
  .controls .iconbtn{order:2}
  .controls input#search{order:3; flex:1 1 100%}
  .controls select#erasel{order:4; flex:1 1 130px}
  .controls .zoomgrp{order:5}
  /* the reader: the translation and the search share a row, and the timeline cards come after the chapter, not before it */
  .rtrans{order:4; flex:1 1 44%; min-width:0}
  .rsearch{order:5; flex:1 1 50%; width:auto; min-width:0}
  .rgrid{display:flex; flex-direction:column}
  .rcol{order:1}
  .rside{order:2; margin:30px 0 0}
}

.offdlg{width:min(440px, 94vw)}
.offlist{margin:0 0 10px; padding-left:20px; font-family:var(--sans); font-size:14.5px; line-height:1.5}
.offsum{margin:0 0 10px; font-family:var(--sans); font-size:14.5px; font-weight:600}
.offdlg progress{width:100%; height:12px; accent-color:var(--gold-strong)}

/* The slide-in menu (07-drawer.js), on every screen size and over every full-screen view: the header keeps the logo, the search, the era menu,
   and the zoom buttons; the icon buttons and the footer's links live in the menu. A view's own bar has a menu button too. */
.menubtn{display:inline-flex; align-items:center; justify-content:center; flex:none}
.controls .biblebtn, .controls .mapbtn, .controls #themebtn{display:none !important}
.controls .menubtn{margin:0}
.rbar .menubtn{margin-right:2px}
.foot .linkbtn, .foot .copyr{display:none}
@media (min-width:721px){                                  /* the menu button sits at the far left, before the logo, where people look for it */
  .controls .menubtn{position:absolute; left:max(18px, env(safe-area-inset-left)); top:50%; transform:translateY(-50%)}
  .brand{margin-left:48px}
}
@media (max-width:720px){
  .brand{display:none}
  .controls .menubtn{order:0}
  .controls input#search{order:1; flex:1 1 calc(100% - 60px); min-width:0; margin:0}
}
.drawer-back{display:block; position:fixed; inset:0; z-index:60; background:rgba(25,16,6,.5); opacity:0; pointer-events:none; transition:opacity .2s}
.drawer{display:block; position:fixed; top:0; bottom:0; left:0; z-index:61; width:min(320px, 84vw); overflow-y:auto; overscroll-behavior:contain;
  background:var(--grain), var(--surface); border-right:1px solid var(--rule); box-shadow:8px 0 40px rgba(40,26,10,.3);
  padding:calc(14px + env(safe-area-inset-top, 0px)) 0 calc(10px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-104%); visibility:hidden; transition:transform .22s ease, visibility 0s .22s}
body.drawer-open .drawer{transform:none; visibility:visible; transition:transform .22s ease}
body.drawer-open .drawer-back{opacity:1; pointer-events:auto}
.dtitle{margin:0 20px 6px; font-family:var(--serif); font-weight:700; font-size:21px; color:var(--ink)}
.dabout{margin:-2px 20px 10px; font-size:14.5px; line-height:1.4; color:var(--ink-soft)}
.dhead{margin:12px 20px 8px; padding-top:12px; border-top:1px solid var(--rule); font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.ditem{display:flex; align-items:center; gap:16px; width:100%; min-height:48px; padding:6px 20px; border:0; background:none; text-align:left; cursor:pointer; color:var(--ink)}
.ditem:hover, .dlink:hover{background:color-mix(in srgb, var(--gold) 10%, transparent)}
.ditem:active, .dlink:active{background:color-mix(in srgb, var(--gold) 14%, transparent)}
.ditem.dhere{background:color-mix(in srgb, var(--gold) 12%, transparent)}
.ditem svg{width:26px; height:26px; flex:none; color:var(--gold-strong)}
.dlabel{display:block; font-size:19px; font-weight:600}
.dhint{display:block; font-size:13.5px; line-height:1.3; color:var(--ink-soft)}
.dthemes{margin-top:12px; padding-top:12px; border-top:1px solid var(--rule); display:flex; align-items:center; gap:6px; padding:0 14px 0 17px}
.dhead{display:none}
.drawer{overflow-x:hidden}
.dgroup{margin:14px 20px 2px; font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.dgroup:first-child{margin-top:4px}
/* thin lines between the menu's items and a firmer one under each group's name, so the list reads as rows */
.dgroup{padding-bottom:6px; border-bottom:2px solid var(--rule)}
#ditems .ditem{position:relative}
#ditems .ditem + .ditem::before{content:""; position:absolute; top:0; left:20px; right:20px; border-top:1px solid var(--rule)}
.tdot{flex:none; padding:3px; border:2px solid transparent; border-radius:10px; background:none; cursor:pointer}
.tdot .tsw{width:30px; height:22px}
.tdot[aria-checked="true"]{border-color:var(--gold); background:var(--gold-wash)}
.tdot:hover{background:var(--gold-wash)}
.tcur{margin-left:auto; font-family:var(--serif); font-size:16px; color:var(--ink-soft)}
@media (min-width:721px){ .controls #mapbtn:not([hidden]){display:inline-flex !important} }
.dfoot{margin-top:6px; padding-top:4px; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; align-items:center; padding-left:20px; padding-right:8px}      /* the small links share a row, so the menu fits a laptop screen */
.dlink{display:block; width:auto; min-height:40px; padding:6px 14px 6px 0; border:0; background:none; text-align:left; font-size:16px; color:var(--ink-soft); cursor:pointer}
.dlink:hover{color:var(--ink); background:none; text-decoration:underline}
@media (prefers-reduced-motion: reduce){ .drawer, .drawer-back{transition:none} }

.copyr{color:var(--ink-soft)}
.dcopy{margin:4px 20px 0; font-size:13px; color:var(--ink-soft)}

/* The map at full screen: it takes the timeline's place under the header. The timeline and its footer stay laid out (so their scroll
   position and sizes are kept) but are hidden and out of the way; the header stays, and its search and era menu still drive the map. */
.mapico{display:inline-flex; align-items:center; justify-content:center; padding:0 8px}
body.mapfull #stage, body.mapfull .foot{position:absolute; left:0; right:0; visibility:hidden; pointer-events:none}
body.mapfull #stage{top:0; height:var(--stageh, 60vh)}
body.mapfull .foot{bottom:0}
body.mapfull .mappane{flex:1 1 auto; height:auto; min-height:0}
body.mapfull .mapgrip{display:none}
/* printing the map (06-map.js) */
#mprintdoc{display:none}
@media print{
  @page{margin:12mm}
  body.mprinting > *:not(#mprintdoc){display:none !important}
  html:has(body.mprinting), body.mprinting{height:auto !important; overflow:visible !important; background:#fff !important}
  body.mprinting #mprintdoc{display:block; color:#000; background:#fff; font-family:var(--sans); -webkit-print-color-adjust:exact; print-color-adjust:exact}
  #mprintdoc h1{margin:0 0 2pt; font-family:var(--serif); font-size:20pt}
  #mprintdoc .mpsub{margin:0 0 8pt; font-size:10.5pt; color:#333}
  #mprintdoc img{display:block; width:auto; max-width:100%; max-height:200mm; margin:0 auto; border:.75pt solid #888}
  #mprintdoc .mplegend{display:flex; flex-wrap:wrap; gap:2pt 14pt; margin:8pt 0 0; font-size:9.5pt}
  #mprintdoc .mplegend .mlg{cursor:auto; padding:0; color:#000; display:flex; align-items:center; gap:6pt}
  #mprintdoc .mpfoot{margin:8pt 0 0; font-size:8.5pt; color:#444}
}

/* printing a popup (03-popups.js) */
#ppdoc{display:none}
@media print{
  @page{margin:16mm}
  body.ppprinting > *:not(#ppdoc){display:none !important}
  html:has(body.ppprinting), body.ppprinting{height:auto !important; overflow:visible !important; background:#fff !important}
  body.ppprinting #ppdoc{display:block; padding:0; max-height:none; overflow:visible; color:#000; background:#fff; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  #ppdoc .pphead{margin:0 0 10pt; padding-bottom:4pt; border-bottom:1pt solid #888; font-size:9.5pt; letter-spacing:.14em; text-transform:uppercase; color:#555}
  #ppdoc .ppfoot{margin:16pt 0 0; padding-top:4pt; border-top:.5pt solid #aaa; font-size:8.5pt; color:#555}
  #ppdoc figure, #ppdoc blockquote{break-inside:avoid}
  #ppdoc figure svg{display:block; margin:0 auto; height:auto}
  #ppdoc .overlaps button{border:0; background:none; padding:0 6pt 0 0; font-size:10.5pt}
  #ppdoc summary{font-weight:700}
}

.dgift{flex:1 1 100%; width:auto; margin:2px -4px 6px -8px; padding:8px 12px; border:1px solid var(--gold); border-radius:12px; background:var(--gold-wash)}
.dgift svg{color:var(--accent, var(--gold-strong))}

/* ---- Family tree: a zoomable, draggable tree in a full-screen dialog (06-family.js). Class names start with fam/f so they stay apart from the other views ---- */
#fstage{position:relative; flex:1; min-height:0; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; outline:0; background:var(--lane-alt)}
#fstage.dragging{cursor:grabbing}
#fworld{position:absolute; left:0; top:0; transform-origin:0 0}      /* no will-change: it would keep the picture at its old size and blur it when zoomed in */
#fedges{position:absolute; left:0; top:0; overflow:visible; pointer-events:none}
#fedges path{fill:none; stroke:var(--ink-soft); stroke-width:1.6; opacity:.7; stroke-linejoin:round}
.famnode{position:absolute; left:0; top:0; width:138px; height:46px; box-sizing:border-box; padding:4px 8px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  background:var(--surface); color:var(--ink); border:1.5px solid var(--rule); border-top:4px solid var(--fc, var(--faience)); border-radius:7px; cursor:pointer; font-family:var(--sans); line-height:1.15}
.famnode.fm{--fc:var(--faience)} .famnode.fw{--fc:var(--herod)} .famnode.fg{--fc:var(--world); border-style:dashed; border-top-style:solid}
.famnode .fnm{font-size:14px; font-weight:600; max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere}
.famnode .flife{font-size:11px; color:var(--ink-soft); font-variant-numeric:tabular-nums; margin-top:1px; white-space:nowrap}
.famnode:hover{border-color:var(--gold); background:color-mix(in srgb, var(--gold) 9%, var(--surface))}
.famnode.fpath{background:color-mix(in srgb, var(--gold) 14%, var(--surface)); border-color:color-mix(in srgb, var(--gold) 55%, var(--rule))}
.famnode.ffocus{border-color:var(--gold); box-shadow:0 0 0 2px var(--gold)}
.famnode:focus-visible,.famchip:focus-visible,.famtoggle:focus-visible,.famgap:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.famchip{position:absolute; left:0; top:0; width:96px; height:24px; box-sizing:border-box; padding:0 6px; border:1px solid var(--rule); border-radius:12px; background:var(--surface); color:var(--ink-soft); font-size:12px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.famchip.fq{border-style:dashed}
.famchip:hover{border-color:var(--gold); color:var(--ink)}
.famchip.fmore{font-style:italic}
.famtoggle{position:absolute; left:0; top:0; width:34px; height:22px; box-sizing:border-box; padding:0; border:1.5px solid var(--gold); border-radius:11px; background:var(--surface); color:var(--ink); font-size:12.5px; font-weight:700; cursor:pointer; z-index:2; font-variant-numeric:tabular-nums}
.famtoggle:hover{background:var(--gold); color:var(--surface)}
.famgap{position:absolute; left:0; top:0; width:20px; height:20px; box-sizing:border-box; padding:0; border:1.5px solid var(--gold); border-radius:50%; background:var(--surface); color:var(--ink); font:italic 700 13px/1 var(--serif); cursor:pointer; z-index:2}
.famgap:hover{background:var(--gold); color:var(--surface)}
.famhead{position:absolute; left:0; top:0; width:340px; text-align:center; white-space:nowrap; font-family:var(--serif); font-style:italic; font-size:16px; color:var(--ink-soft)}
.famhead.fmat{color:var(--gold-strong, var(--gold))} .famhead.fluk{color:var(--israel)}
.famnode.fj{width:156px; height:50px}
.famnode.fj .flife{font-size:11.5px}
.famnode.fmat{border-top-color:var(--gold); --fc:var(--gold)} .famnode.fluk{border-top-color:var(--israel); --fc:var(--israel)}
.famnode.fjesus{border-color:var(--gold); box-shadow:0 0 0 2px var(--gold); background:color-mix(in srgb, var(--gold) 14%, var(--surface))}
.famnode.fgod{cursor:default; border-style:dashed; --fc:var(--world); background:transparent}
.fbracket{position:absolute; left:0; top:0; width:10px; box-sizing:border-box; border:2px solid var(--gold); border-right:0; border-radius:6px 0 0 6px; opacity:.85}
.fbracket span{position:absolute; right:12px; top:50%; writing-mode:vertical-rl; transform:translateY(-50%) rotate(180deg); white-space:nowrap; font-family:var(--serif); font-style:italic; font-size:13px; color:var(--ink-soft)}
#fstage.far .famnode .fnm,#fstage.far .famnode .flife,#fstage.far .famchip,#fstage.far .famhead{font-size:0; color:transparent}
#fstage.far .famnode{border-width:1px; border-top-width:6px}
#fstage.far .famtoggle{font-size:0; width:22px}
.fl-path{--hc:var(--gold)} .fl-man{--hc:var(--faience)} .fl-woman{--hc:var(--herod)} .fl-grp{--hc:var(--world)}
@media (max-width:720px){ dialog.family .rbar{flex-wrap:wrap; gap:8px} }

/* printing the family tree (06-family.js): one page, the view as shown */
#fprintdoc{display:none}
#fprintdoc .fphead{margin:0 0 6pt; font-family:var(--serif); font-size:15pt; font-weight:700}
#fprintdoc .fpfoot{margin:6pt 0 0; font-size:8.5pt; color:#444}
#fprintdoc .fpouter{position:relative; overflow:hidden; border:.75pt solid #999; background:var(--lane-alt)}
#fprintdoc .fpbox{position:absolute; left:0; top:0; transform-origin:0 0; overflow:hidden}
#fprintdoc svg{position:absolute; left:0; top:0; overflow:visible}
#fprintdoc svg path{fill:none; stroke:var(--ink-soft); stroke-width:1.6; opacity:.7; stroke-linejoin:round}
#fprintdoc.far .famnode .fnm, #fprintdoc.far .famnode .flife, #fprintdoc.far .famchip, #fprintdoc.far .famhead{font-size:0; color:transparent}
#fprintdoc.far .famnode{border-width:1px; border-top-width:6px}
@media print{
  body.fprinting > *:not(#fprintdoc){display:none !important}
  html:has(body.fprinting), body.fprinting{height:auto !important; overflow:visible !important; background:#fff !important}
  body.fprinting #fprintdoc{display:block; color:#000; background:#fff; -webkit-print-color-adjust:exact; print-color-adjust:exact; break-inside:avoid}
}

/* header search results, in groups under the box */
#sres,#fres,#hres{position:fixed; z-index:60; max-height:min(70dvh,480px); overflow:auto; background:var(--grain), var(--surface); border:1px solid var(--rule); border-radius:10px; box-shadow:0 16px 48px rgba(40,26,10,.28); padding:4px 0}
#sres[hidden], #dres[hidden], #fres[hidden], #hres[hidden]{display:none}
#sres .sgroup, #fres .sgroup, #hres .sgroup, #dres .sgroup{padding:8px 14px 3px; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft)}
#sres .sitem, #fres .sitem, #hres .sitem, #dres .sitem{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:7px 14px; cursor:pointer; min-height:34px}
#sres .sitem.on, #fres .sitem.on, #hres .sitem.on, #dres .sitem.on{background:color-mix(in srgb, var(--gold) 22%, transparent)}
#sres .stext, #fres .stext, #hres .stext, #dres .stext{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#sres .shint, #fres .shint, #hres .shint, #dres .shint{flex:none; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; color:var(--ink-soft)}
#sres .sloading, #fres .sloading, #hres .sloading, #dres .sloading{padding:8px 14px; font-size:13px; color:var(--ink-soft); font-style:italic}
@media (max-width:720px){ #sres .sitem, #fres .sitem, #hres .sitem, #dres .sitem{min-height:44px; align-items:center} }
/* the Android app's drop-down list, in place of the WebView's own (09-native.js) */
.npick-back{position:fixed; z-index:70; background:transparent}
.npick{position:fixed; z-index:71; overflow:auto; overscroll-behavior:contain; background:var(--grain), var(--surface); border:1px solid var(--rule); border-radius:10px;
  box-shadow:0 16px 48px rgba(40,26,10,.28); padding:4px 0; color:var(--ink); font-family:var(--sans); text-align:left}
.npick-head{padding:8px 16px 4px; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft)}
.npick-item{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:6px 16px; cursor:pointer; font-size:16px; border-top:1px solid color-mix(in srgb, var(--rule) 55%, transparent)}
.npick-item.on{background:color-mix(in srgb, var(--gold) 22%, transparent); font-weight:600}
.npick-item:active{background:color-mix(in srgb, var(--gold) 32%, transparent)}
.npick-text{min-width:0}
.npick-hint{flex:none; font-size:13px; color:var(--ink-soft); font-variant-numeric:tabular-nums; font-weight:400}
.dsearch{margin:6px 16px 8px}
.dsearch input{width:100%; height:42px; border:1px solid var(--rule); background:var(--surface); border-radius:21px; padding:0 14px; font-size:16px; color:var(--ink)}
.dres{padding-bottom:8px}
.dres[hidden], #dbody[hidden]{display:none}
#dres .sgroup{padding-left:20px; padding-right:20px}
#dres .sitem{padding-left:20px; padding-right:20px}
.family .hzoom{margin-left:0}
#fres,#hres{z-index:70}

/* The screen-edge insets (camera cutout, status bar, navigation bar) are applied once, by the header (.top), the footer (.foot), and the
   dialogs, not by the page as a whole. With the map open, the map pane is the bottom of the page, so it keeps clear of the navigation bar.
   (build.py stops if the page's root applies them again: that doubled the gaps in the Android app, in 1.0.0 and again in 1.1.0.) */
.mappane{padding-bottom:env(safe-area-inset-bottom,0px)}
body.withmap .foot{padding-bottom:8px}

/* ---- Related passages (06-xref.js): the panel shares the commentary's place ---- */
.xrverses{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px}
.xrverses button{min-width:40px; height:34px; padding:0 10px; border:1px solid var(--rule); border-radius:17px; background:none; cursor:pointer; font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink)}
.xrverses button:hover{background:var(--gold-wash); border-color:var(--gold)}
.xrbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin:0 0 12px}
.xrseg{display:inline-flex; gap:0}
.xrseg button{height:30px; padding:0 11px; border:1px solid var(--rule); background:none; cursor:pointer; font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--ink-soft)}
.xrseg button:first-child{border-radius:15px 0 0 15px}
.xrseg button:last-child{border-radius:0 15px 15px 0; border-left:0}
.xrseg button[aria-pressed="true"]{background:var(--gold-wash); border-color:var(--gold); color:var(--gold-strong)}
.xrlist{list-style:none; margin:0 0 6px; padding:0}
.xrlist li{border-top:1px solid var(--rule)}
.xrlist li:first-child{border-top:0}
.xritem{display:block; width:100%; padding:10px 6px; border:0; border-radius:8px; background:none; text-align:left; cursor:pointer; color:var(--ink)}
.xritem:hover{background:var(--gold-wash)}
.xrref{display:inline; font-family:var(--serif); font-size:16px; font-weight:700; color:var(--gold-strong)}
.xrwords{margin-left:8px; font-family:var(--sans); font-size:12px; color:var(--ink-soft)}
.xrtext{display:block; margin-top:3px; font-family:var(--serif); font-size:15px; line-height:1.45; color:var(--ink)}
.xrmore{display:block; margin:6px 0 4px}
.xrcredit{margin:18px 0 0; font-family:var(--sans); font-size:12px; line-height:1.5; color:var(--ink-soft)}

/* ---- The Bible dictionaries (06-dictionary.js) ---- */
.dletters{margin:6px 0 16px}
.dletters button[aria-pressed="true"]{background:var(--gold-wash); border-color:var(--gold); color:var(--gold-strong)}
.dnames{list-style:none; margin:0 0 14px; padding:0; columns:2 230px; column-gap:28px}
.dnames li{break-inside:avoid; display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 8px; padding:3px 0}
.dnames button{border:0; background:none; padding:2px 0; cursor:pointer; font-family:var(--serif); font-size:calc(var(--rs) * .95); color:var(--ink); text-align:left}
.dnames button:hover{color:var(--gold-strong); text-decoration:underline}
.dnames i{font-style:normal; font-family:var(--sans); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft)}
.dentry{margin:0 0 34px; padding:0 0 4px}
.dentry + .dentry{border-top:1px solid var(--rule); padding-top:20px}
.dentryhd{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; margin:0 0 8px}
.dentryhd h3{margin:0; font-family:var(--sans); font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--gold-strong)}
.dby{font-family:var(--sans); font-size:12.5px; color:var(--ink-soft)}
.dsub{margin:12px 0 4px; font-family:var(--serif); font-size:calc(var(--rs) * 1.05); font-weight:700}
.dbody .dl{margin:0 0 .7em; font-family:var(--serif); font-size:var(--rs); line-height:1.65}
.dbody .dl-item{margin:0 0 .35em; padding-left:1.4em; text-indent:-.9em}
.dbody .dl-item::before{content:"\2022"; display:inline-block; width:.9em; text-indent:0; color:var(--gold-strong)}
.dbody .dl-subj{margin:1em 0 .3em; font-weight:700; font-family:var(--sans); font-size:calc(var(--rs) * .85); letter-spacing:.03em}
.dbody .dl-subj::before{content:"\2192"; margin-right:.5em; color:var(--gold-strong); font-weight:400}
.dxlink{color:var(--gold-strong); cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px}
.dxlink:hover{text-decoration-style:solid}
.dnear{list-style:none; margin:0 0 10px; padding:0}
.dnear button{display:block; width:100%; text-align:left; border:0; background:none; padding:5px 6px; border-radius:6px; cursor:pointer; font-family:var(--serif); font-size:15px; color:var(--ink)}
.dnear button:hover{background:var(--gold-wash)}
.dnear button.here{font-weight:700; background:var(--gold-wash)}
.dfull{margin:26px 0 8px; padding-top:18px; border-top:1px solid var(--rule)}
.dfull h3{margin:0 0 4px; font-family:var(--serif); font-size:22px; font-weight:500}
.dictoffer{display:inline-block; margin:6px 8px 0 0; padding:6px 14px; border:1px solid var(--rule); border-radius:16px; background:none; cursor:pointer; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--ink)}
.dictoffer:hover{background:var(--gold-wash); border-color:var(--gold)}
.lworks .dcard{display:block; width:100%; text-align:left; border-bottom:1px solid var(--rule); padding:11px 8px 12px; color:var(--ink)}
/* three panel buttons (Commentary, Notes, Related) no longer fit with their words in a bar under about 1100 px: icons only */
@media (max-width:1340px){ .rbar .rcomm span{display:none} .rbar .rcomm{padding:0 11px} }      /* names from 1341 px: with them the bar needs about 1,320 px */
@media (min-width:721px){ .dictdlg .rbar{position:relative} .dictdlg .rsearch{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:min(520px, 46vw)} }      /* the dictionary's search box sits in the middle of its bar */
.dback{margin:0 10px 0 0; font-size:12px}
.dletters{display:flex; flex-wrap:wrap; gap:6px}
.dletters button{width:44px; height:40px; padding:0; border:1px solid var(--rule); border-radius:10px; background:none; cursor:pointer; font-family:var(--serif); font-size:17px; color:var(--ink)}
.dletters button:hover{background:var(--gold-wash); border-color:var(--gold)}

/* ---- the reader's study tools on a phone (06-xref.js placeTools): Commentary, Cross refs, Notes, and Text in a labeled bar at the foot of the screen, clear of the gesture bar; the panels slide up from just above it ---- */
.rset .aa{font-weight:400}
.rset span{display:none}
.rtools{flex:none; display:flex; gap:4px; padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--rule); background:var(--surface)}
.rtools[hidden]{display:none}
.rtools .rcomm, .rtools .rset{flex:1 1 0; min-width:0; width:auto; height:54px; flex-direction:column; justify-content:center; align-items:center; gap:2px; padding:4px 2px; border:0; border-radius:12px; background:none; font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-soft)}
.rtools .rcomm span, .rtools .rset span{display:block; white-space:nowrap}
.rtools .rcomm svg{width:23px; height:23px}
.rtools .rset .aa{font-family:var(--serif); font-size:20px; line-height:23px; color:inherit}
.rtools .rcomm[aria-pressed="true"], .rtools .rset[aria-pressed="true"]{background:var(--gold-wash); color:var(--gold-strong)}
.rtools .rcomm:hover, .rtools .rset:hover{background:var(--gold-wash)}
dialog.reader.btools .rsettings{top:auto; bottom:8px; right:8px; max-height:calc(100% - 16px); overflow:auto}

/* ---- Books of the Bible (06-books.js) ---- */
/* Kinds of writing, the shelf, and the two testaments' colors, in each theme */
:root{
  --k-narrative:#DCCBA4; --k-law:#A9533E; --k-genealogy:#94887A; --k-poetry:#869A5B; --k-wisdom:#3F7F6E;
  --k-prophecy:#4E7290; --k-discourse:#7C5A8E; --k-letter:#C2892C; --k-none:rgba(94,70,36,.10);
  --shelf:#B59A6A; --shelf-edge:#8C7448; --scrim:rgba(46,36,24,.28); --ot:#8A6214; --nt:#2D6A5F;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]):not([data-palette]){
  --k-narrative:#7A6649; --k-law:#D88A70; --k-genealogy:#A39683; --k-poetry:#A9BE82; --k-wisdom:#7FC1AE;
  --k-prophecy:#8FB4D6; --k-discourse:#C3A2D8; --k-letter:#E3B65C; --k-none:rgba(233,221,196,.07);
  --shelf:#4A3B28; --shelf-edge:#2E2418; --scrim:rgba(0,0,0,.45); --ot:#D9A94E; --nt:#86C2B4; } }
:root[data-theme="dark"]:not([data-palette]), :root[data-palette="lamplight"]{
  --k-narrative:#7A6649; --k-law:#D88A70; --k-genealogy:#A39683; --k-poetry:#A9BE82; --k-wisdom:#7FC1AE;
  --k-prophecy:#8FB4D6; --k-discourse:#C3A2D8; --k-letter:#E3B65C; --k-none:rgba(233,221,196,.07);
  --shelf:#4A3B28; --shelf-edge:#2E2418; --scrim:rgba(0,0,0,.45); --ot:#D9A94E; --nt:#86C2B4; }
:root[data-palette="vellum"]{
  --k-narrative:#DED5C1; --k-law:#A8423A; --k-genealogy:#8A8C98; --k-poetry:#5E9A6A; --k-wisdom:#2C7A70;
  --k-prophecy:#3D5F9E; --k-discourse:#6E4C93; --k-letter:#B8892A; --k-none:rgba(31,42,68,.07);
  --shelf:#B8AE98; --shelf-edge:#8E846E; --scrim:rgba(31,42,68,.25); --ot:#9A7217; --nt:#1F6B5E; }

dialog.books{overflow-x:clip}   /* the closed book sheet waits off the right edge; without this the view scrolls sideways to it */
dialog.books .htitle{font-family:var(--serif); font-size:24px; font-weight:700; margin:0 4px}
.bktabs{flex:none; display:flex; gap:4px; padding:0 16px; border-bottom:1px solid var(--rule); overflow-x:auto; scrollbar-width:none}
.bktabs button{border:0; background:none; padding:10px 12px 11px; cursor:pointer; color:var(--ink-soft); font:inherit; font-weight:500; white-space:nowrap; border-bottom:2.5px solid transparent}
.bktabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--gold)}
.bkscroll{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-bottom:calc(30px + env(safe-area-inset-bottom, 0px))}
.bkmain{max-width:1240px; margin:0 auto; padding:6px 16px 20px}
.bklede{display:flex; flex-wrap:wrap; gap:4px 18px; align-items:baseline; margin:10px 0 4px}
.bkbig{font-family:var(--serif); font-size:1.15rem; font-variant-numeric:tabular-nums}
.bkbig b{font-weight:700}
.bkcount{color:var(--ink-soft); font-size:.9rem}
.bkfilters{display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin:10px 0 14px}
.bkfilters .bkcount:last-child{margin-left:auto}
.bkfilters[hidden]{display:none}
.bkseg{display:inline-flex; border:1px solid var(--rule); border-radius:8px; background:var(--surface); padding:2px}
.bkseg button{border:0; background:none; padding:6px 12px; border-radius:6px; cursor:pointer; min-height:34px; color:var(--ink-soft); font:inherit}
.bkseg button[aria-pressed="true"]{background:var(--gold-wash); color:var(--ink); font-weight:600}
.bksel{height:38px; border-radius:8px; border:1px solid var(--rule); background:var(--surface); color:var(--ink); padding:0 10px; max-width:100%; font:inherit}
.bkclear{border:0; background:none; color:var(--gold-strong); text-decoration:underline; cursor:pointer; padding:4px; font:inherit}
.bklegend{display:flex; flex-wrap:wrap; gap:6px 8px; margin:0 0 12px; align-items:center}
.bklegend button{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--rule); background:var(--surface); color:var(--ink); border-radius:999px; padding:4px 10px 4px 6px; cursor:pointer; font:inherit; font-size:.88rem}
.bklegend button[aria-pressed="true"]{border-color:var(--gold); background:var(--gold-wash)}
.bklegend .bkcount{margin-left:4px}
.bksw{display:inline-block; width:14px; height:14px; border-radius:4px; flex:none; vertical-align:-2px}
.bksw.none{background:repeating-linear-gradient(135deg,var(--k-none) 0 3px,transparent 3px 6px); border:1px solid var(--rule)}
.bknote{font-size:.88rem; color:var(--ink-soft); max-width:70ch; margin:8px 0 0}
.bkempty{color:var(--ink-soft); font-size:.9rem; font-style:italic}
/* the shelf */
.bkshelfwrap{position:relative}
.bkshelf{display:flex; flex-wrap:wrap; align-items:flex-end; row-gap:34px; padding:22px 0 0}
.bkbook{position:relative; height:var(--h,190px); margin-right:2px; border-radius:3px 3px 1px 1px; cursor:pointer; display:flex; flex-direction:column; overflow:hidden; border:0; padding:0; background:var(--k-none);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.18), inset -1px 0 0 rgba(0,0,0,.15); transition:opacity .2s, transform .15s}
.bkbook:hover,.bkbook:focus-visible{transform:translateY(-6px)}
.bkbook .sl{flex:none; width:100%; transition:opacity .2s; display:block}
.bkbook .cap{height:5px; flex:none; background:var(--gold); opacity:.85; display:block}
.bkbook::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(90deg, rgba(0,0,0,.16), rgba(255,255,255,.10) 22%, rgba(255,255,255,0) 55%, rgba(0,0,0,.2)),
  linear-gradient(transparent 14px, rgba(0,0,0,.18) 14px 15px, transparent 15px calc(100% - 15px), rgba(0,0,0,.18) calc(100% - 15px) calc(100% - 14px), transparent 0)}
.bkbook .plate{position:absolute; top:14px; left:50%; transform:translateX(-50%); writing-mode:vertical-rl; background:color-mix(in srgb, var(--surface) 88%, transparent);
  color:var(--ink); font-weight:600; font-size:12px; letter-spacing:.03em; padding:6px 1px; border-radius:3px; white-space:nowrap; line-height:1}
.bkbook.untagged{background:repeating-linear-gradient(135deg,var(--k-none) 0 4px,transparent 4px 8px), var(--surface); outline:1px solid var(--rule); outline-offset:-1px}
.bkbook.dim{opacity:.16}
.bkshelfwrap .secmark{position:absolute; font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--ink-soft); white-space:nowrap; pointer-events:none}
.bkshelfwrap .secmark::before{content:""; position:absolute; left:0; top:15px; width:1.5px; height:9px; background:var(--gold)}
.bkshelfwrap .line{position:absolute; left:0; right:0; height:8px; background:linear-gradient(var(--shelf),var(--shelf-edge)); border-radius:2px}
/* the rows */
.bkrows{display:grid; gap:18px}
.bkrows h3{font-size:.9rem; font-weight:600; letter-spacing:.04em; color:var(--ink-soft); margin:0 0 6px}
.bkrow{display:grid; grid-template-columns:118px 1fr 64px; align-items:center; gap:10px; width:100%; border:0; background:none; color:var(--ink); padding:3px 0; cursor:pointer; text-align:left; border-radius:6px; font:inherit}
.bkrow:hover{background:var(--gold-wash)}
.bkrow .nm{font-family:var(--serif); font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bkrow .track{height:16px; display:flex; border-radius:3px; overflow:hidden; min-width:0}
.bkrow .track span{height:100%; display:block}
.bkrow .w{text-align:right; color:var(--ink-soft); font-size:.85rem; font-variant-numeric:tabular-nums}
.bkrow.dim{opacity:.2}
.bkuntag{background:repeating-linear-gradient(135deg,var(--k-none) 0 4px,transparent 4px 8px); outline:1px solid var(--rule); outline-offset:-1px}
/* tooltip */
.bktip{position:fixed; z-index:40; pointer-events:none; background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:8px 11px; box-shadow:0 8px 24px rgba(0,0,0,.15); font-size:.88rem; max-width:260px; color:var(--ink)}
.bktip b{font-family:var(--serif); font-size:1.02rem; font-weight:700; display:block}
.bktip .bkk{display:flex; gap:5px; align-items:center; margin-top:4px; color:var(--ink-soft)}
/* charts and table */
.bkchart{width:100%; overflow-x:auto}
.bkchart svg{display:block}
.bkchart text{fill:var(--ink); font-family:var(--sans)}
.bkchart text.rail{font-size:12.5px; font-weight:600; letter-spacing:.04em; fill:var(--ink-soft)}
.bktablewrap{overflow:auto; border:1px solid var(--rule); border-radius:10px; background:var(--surface); max-height:calc(100vh - 290px); min-height:220px}
#bktbl{border-collapse:collapse; width:100%; min-width:760px; font-size:.94rem}
#bktbl th, #bktbl td{padding:8px 10px; text-align:left; border-bottom:1px solid var(--rule); white-space:nowrap}
#bktbl th{font-weight:600; font-size:.84rem; color:var(--ink-soft); cursor:pointer; user-select:none; position:sticky; top:0; background:var(--surface); z-index:1}
#bktbl th[aria-sort]::after{content:" \25BE"; color:var(--gold)}
#bktbl th[aria-sort="ascending"]::after{content:" \25B4"}
#bktbl td.n, #bktbl th.n{text-align:right; font-variant-numeric:tabular-nums}
#bktbl td:first-child, #bktbl th:first-child{position:sticky; left:0; background:var(--surface); font-family:var(--serif); font-size:1rem; z-index:2}
#bktbl tbody tr{cursor:pointer}
#bktbl tbody tr:hover td{background:var(--gold-wash)}
#bktbl td.au{max-width:260px; overflow:hidden; text-overflow:ellipsis}
/* a book's page */
.bkscrim{position:absolute; inset:0; background:var(--scrim); z-index:30; opacity:0; pointer-events:none; transition:opacity .2s}
.bkscrim.on{opacity:1; pointer-events:auto}
.bksheet{position:absolute; top:0; right:0; bottom:0; width:min(460px,100%); z-index:31; background:var(--surface); color:var(--ink); border-left:1px solid var(--rule); transform:translateX(102%); visibility:hidden;
  transition:transform .25s ease, visibility 0s .25s; overflow-y:auto; overscroll-behavior:contain; border-top:env(safe-area-inset-top, 0px) solid var(--surface); padding:14px 22px calc(env(safe-area-inset-bottom, 0px) + 30px); box-shadow:-10px 0 30px rgba(0,0,0,.12)}
.bksheet.on{transform:none; visibility:visible; transition:transform .25s ease}
.bktop{display:flex; gap:8px; align-items:center; justify-content:space-between}
.bknav{display:flex; gap:6px}
.bkeyebrow{font-size:.86rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-strong); margin-top:14px}
.bksheet h2{font-family:var(--serif); font-weight:500; font-size:2.3rem; line-height:1.05; margin:2px 0 4px; text-wrap:balance}
.bkby{color:var(--ink-soft)}
.bksum{font-family:var(--serif); font-size:1.08rem; line-height:1.55}
.bkfacts{display:grid; grid-template-columns:repeat(3,1fr); gap:10px 8px; margin:14px 0; font-variant-numeric:tabular-nums}
.bkfacts div{border-top:1px solid var(--rule); padding-top:6px}
.bkfacts b{display:block; font-family:var(--serif); font-size:1.35rem; font-weight:500}
.bkfacts small{color:var(--ink-soft); font-size:.82rem}
.bksheet h3{font-size:.92rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin:22px 0 8px}
.bkbtns{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.bkbtn{border:1px solid var(--rule); background:var(--page); color:var(--ink); border-radius:8px; padding:8px 14px; cursor:pointer; min-height:40px; font:inherit}
.bkbtn.pri{background:var(--gold); border-color:var(--gold); color:var(--surface); font-weight:600}
.bkkbar{display:flex; height:24px; border-radius:5px; overflow:hidden}
.bkkbar button{border:0; padding:0; margin:0; height:100%; cursor:pointer; min-width:1px}
.bkkbar button:hover,.bkkbar button:focus-visible{filter:brightness(1.15) saturate(1.1)}
.bkklist{display:grid; gap:3px; margin-top:8px; font-size:.9rem}
.bkklist div{display:flex; gap:8px; align-items:center}
.bkklist .pc{margin-left:auto; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.bkkeys{list-style:none; margin:0; padding:0 0 0 16px; border-left:2px solid var(--gold-wash); display:grid; gap:16px}
.bkkeys li{position:relative}
.bkkeys li::before{content:""; position:absolute; left:-21.5px; top:5px; width:9px; height:9px; background:var(--gold); transform:rotate(45deg)}
.bkkeys .what{font-size:.86rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-strong); display:flex; justify-content:space-between; gap:10px}
.bkkeys .what .ref{text-transform:none; letter-spacing:0; font-weight:400; white-space:nowrap}
.bkkeys blockquote{margin:3px 0 0; font-family:var(--serif); font-size:1.08rem; line-height:1.5}
.bkkeys.one blockquote{font-size:1.18rem}
.bkchips{display:flex; flex-wrap:wrap; gap:6px}
.bkchip{display:inline-flex; gap:6px; align-items:center; border:1px solid var(--rule); background:var(--page); color:var(--ink); border-radius:999px; padding:5px 11px 5px 8px; cursor:pointer; font:inherit; font-size:.92rem; text-align:left}
.bkchip:hover{background:var(--gold-wash)}
.bkchip svg{width:14px; height:14px; fill:none; stroke:var(--gold-strong); stroke-width:1.8; flex:none}
.bkchip .dia{width:9px; height:9px; background:var(--gold); transform:rotate(45deg); margin:0 2px; flex:none}
.pabout{border:1px solid var(--rule); background:var(--surface); color:var(--ink); border-radius:8px; padding:6px 12px; cursor:pointer; font:inherit; font-size:14px; margin-left:auto}
/* Old in the New (Books of the Bible, fifth tab) */
.bqkey{display:flex; flex-wrap:wrap; gap:4px 18px; font-size:.88rem; color:var(--ink-soft); margin:0 0 8px}
.bqkey span{display:inline-flex; gap:7px; align-items:center}
.bqkey i{display:inline-block; width:26px; height:0; border-top:2px solid var(--gold); flex:none}
.bqkey i.bqa{border-top:2px dashed var(--faience)}
.bqbridge path.lk{fill:none; transition:opacity .2s, stroke-width .15s; pointer-events:none}
.bqbridge path.lk.q{stroke:var(--gold); stroke-width:1.5}
.bqbridge path.lk.a{stroke:var(--faience); stroke-width:1.5; stroke-dasharray:5 4}
.bqbridge svg.hov path.lk:not(.hot):not(.on){opacity:.12}
.bqbridge path.lk.hot{stroke-width:3}
.bqbridge path.lk.on{stroke:var(--ink); stroke-width:3; stroke-dasharray:none; opacity:1}
.bqbridge path.hit{fill:none; stroke:transparent; stroke-width:12; cursor:pointer}
.bqbridge rect.bqbk{cursor:pointer}
.bqbridge rect.bqbk.sel{stroke:var(--ink); stroke-width:2}
.bqbridge text.bqlab{font-size:11px; fill:var(--ink-soft); pointer-events:none}
.bqgrid{display:grid; grid-template-columns:minmax(0,330px) minmax(0,1fr); gap:16px; margin-top:12px; align-items:start}
.bqlist{display:grid; gap:6px; align-content:start; max-height:640px; overflow:auto; padding-right:4px; position:relative}
.bqitem{border:1px solid var(--rule); background:var(--surface); color:var(--ink); border-radius:10px; padding:8px 11px; text-align:left; cursor:pointer; display:grid; gap:2px; font:inherit}
.bqitem[aria-pressed="true"]{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
.bqitem .r{font-family:var(--serif); font-size:1rem}
.bqitem .r span{color:var(--ink-soft)}
.bqitem small{color:var(--ink-soft); font-size:.84rem}
.bqtier{display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:1px 7px; border-radius:999px; vertical-align:2px}
.bqtier.q{background:var(--gold-wash); color:var(--gold-strong)}
.bqtier.a{background:var(--faience-wash); color:var(--faience-ink)}
.bqcard{border:1px solid var(--rule); background:var(--surface); border-radius:14px; padding:16px 18px; min-width:0}
.bqpair{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.bqpair h4{margin:0 0 4px; font-family:var(--serif); font-size:1.15rem; font-weight:500}
.bqpair blockquote{margin:0; font-family:var(--serif); font-size:1.06rem; line-height:1.55}
.bqvn{font-size:.68em; color:var(--ink-soft); margin-right:2px; font-family:var(--sans)}
mark.bqsh{background:var(--gold-wash); color:inherit; border-bottom:2px solid var(--gold); padding:0 1px; border-radius:2px}
.bqev{display:grid; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--rule)}
.bqlbl{font-size:.8rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:2px}
.bqev q{font-family:var(--serif); font-style:italic}
.bqnotep{margin-top:4px}
.bqgh{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.bqgh > span{border:1px solid var(--rule); border-radius:8px; padding:3px 8px; font-size:.9rem; background:var(--page)}
.bqgh [lang="he"]{font-size:1.05rem}
.bqmeter{display:inline-flex; gap:2px; vertical-align:-2px; margin-left:8px}
.bqmeter i{width:7px; height:12px; border-radius:2px; background:var(--k-none); display:block}
.bqmeter i.f{background:var(--gold)}
.bqalso{display:flex; flex-wrap:wrap; gap:6px 12px}
.bkchip.bqchip{font-size:.9rem}
.bkchip.bqchip.al{border-style:dashed; border-color:var(--faience)}
.bqsub{margin:0 0 8px}
@media (max-width:720px){
  dialog.books .htitle{display:none}
  .bkmain{padding-inline:12px}
  .bkrow{grid-template-columns:96px 1fr 52px}
  .bkfilters .bkcount:last-child{margin-left:0; flex-basis:100%}
  .bksheet h2{font-size:2rem}
  .bktablewrap{max-height:calc(100vh - 340px)}
  .bqgrid{grid-template-columns:minmax(0,1fr)}
  .bqlist{max-height:300px}
  .bqpair{grid-template-columns:1fr; gap:12px}
  .bqcard{padding:14px}
}

/* ======================================================================
   RIBBON BOOKMARKS (06-ribbons.js): a silk ribbon hanging from the top of the page in the left margin, the tray of colors and
   bookmarked chapters under the ribbon button, and the list in My notes. The ribbons' own colors are fixed (silk is silk in any
   light); the dark theme gives the dark ones a faint edge so they don't vanish into the page.
   ====================================================================== */
:root{--bm-shade:rgba(46,30,12,.34); --bm-edge:rgba(0,0,0,0)}
:root[data-palette="lamplight"]{--bm-shade:rgba(0,0,0,.6); --bm-edge:rgba(255,240,210,.24)}
@media (prefers-color-scheme: dark){ :root:not([data-palette]){--bm-shade:rgba(0,0,0,.6); --bm-edge:rgba(255,240,210,.24)} }
.bmhang{position:sticky; height:0; z-index:3}
.bmribbon{position:absolute; left:-40px; width:22px; height:200px; z-index:3; cursor:pointer; transform-origin:50% 0; filter:drop-shadow(1px 2px 1.5px var(--bm-shade)); -webkit-tap-highlight-color:transparent}
.bmribbon i, .bmmini i, .bmsw i{display:block; width:100%; height:100%; background-color:var(--rc);
  background-image:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 60%, rgba(0,0,0,.18)), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  box-shadow:inset 0 0 0 1px var(--bm-edge)}
.bmribbon i{clip-path:polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 11px), 0 100%)}
.bmlight i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.bmribbon:focus-visible{outline:none} .bmribbon:focus-visible i{box-shadow:inset 0 0 0 2px var(--gold-strong)}
.bmfall{animation:bmfall .75s cubic-bezier(.3,.7,.4,1) both}
.bmlift{animation:bmlift .38s ease-in both}
@keyframes bmfall{
  0%{transform:translateY(-105%) rotate(0)}
  62%{transform:translateY(3%) rotate(2.2deg)}
  80%{transform:translateY(-1%) rotate(-1.2deg)}
  92%{transform:translateY(.5%) rotate(.4deg)}
  100%{transform:none}
}
@keyframes bmlift{to{transform:translateY(-105%)}}
@media (prefers-reduced-motion: reduce){ .bmfall, .bmlift{animation:none} }
@media (max-width:1100px){ .bmribbon{left:-20px; width:14px; height:170px} .bmribbon i{clip-path:polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%)} }
@media (max-width:720px){ .bmribbon{left:-17px; width:10px; height:150px} .bmribbon i{clip-path:polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 6px), 0 100%)} }
.rbmk.bmhas svg path{fill:currentColor}
.rbar .rbmk span{display:none} .rbar .rbmk{padding:0 11px}        /* icon only in the top bar (the ribbon is its own label), so the bar still fits; named in the phone's tools bar */

.bmtray{position:absolute; right:16px; top:10px; z-index:6; width:380px; max-width:calc(100% - 20px); max-height:calc(100% - 20px); overflow:auto; background:var(--surface); border:1px solid var(--rule); border-radius:14px; box-shadow:0 16px 48px rgba(40,26,10,.28); padding:16px 16px 12px; animation:readerIn .14s ease-out}
.bmtray[hidden]{display:none}
.bmtray h3{font-family:var(--serif); font-size:1.3rem; margin:0 0 4px}
.bmtray h4, .bmnotes h3{margin:4px 0 6px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:500}
.bmhint{margin:0 0 12px; font-size:14.5px; line-height:1.4; color:var(--ink-soft)}
.bmswatches{display:grid; grid-template-columns:repeat(10, 1fr); gap:4px; margin:0 0 14px}
.bmswb{height:58px; border:0; border-radius:8px; background:none; padding:4px 0 0; cursor:pointer; display:flex; justify-content:center; align-items:flex-start}
.bmswb:hover:not(:disabled), .bmswb:focus-visible{background:var(--gold-wash); outline:none}
.bmswb:disabled{cursor:default; opacity:.45}
.bmsw{display:block; width:18px; height:44px; filter:drop-shadow(1px 1.5px 1px var(--bm-shade))}
.bmsw i{clip-path:polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%)}
@media (max-width:720px){ .bmsw{width:15px; height:40px} .bmswb{height:50px} }
.bmlist{list-style:none; margin:0; padding:0}
.bmtray .bmlist{border-top:1px solid var(--rule); padding-top:6px}
.bmrow{display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:6px 8px; border:0; border-radius:8px; background:none; color:var(--ink); cursor:pointer; text-align:left; font-family:var(--serif); font-size:1.1rem}
.bmrow:hover, .bmrow:focus-visible, .bmrow.bmcur{background:var(--gold-wash); outline:none}
.bmrow small{margin-left:auto; font-family:var(--sans); font-size:13px; letter-spacing:.04em; color:var(--ink-soft)}
.bmmini{display:block; flex:none; width:11px; height:26px}
.bmmini i{clip-path:polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 4px), 0 100%)}
.bmnone{margin:4px 0 6px}
.bmnotes{margin:22px 0 18px}
dialog.reader.btools .bmtray{top:auto; bottom:8px; right:8px; left:8px; width:auto; max-width:none}
/* tablets (721-980 px): the reader bar's buttons and the search box don't fit on one row, so the search takes a second row, as on a phone */
@media (min-width:721px) and (max-width:980px){ #reader .rbar{flex-wrap:wrap} #reader .rsearch{order:5; flex:1 1 100%; width:auto} }
@media (min-width:721px) and (max-width:820px){ #reader .rclose span{display:none} }
/* the "back to Books" pill (06-books.js) */
.retpill{position:fixed; left:14px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:2000; display:flex; align-items:stretch; border-radius:999px; background:var(--gold); color:var(--surface); box-shadow:0 4px 16px rgba(0,0,0,.28); overflow:hidden; max-width:calc(100vw - 28px)}
.retpill[hidden]{display:none}
.retpill button{border:0; background:none; color:inherit; font:inherit; font-weight:600; cursor:pointer; min-height:42px}
.retgo{padding:0 8px 0 16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.retx{padding:0 14px 0 8px; font-size:1.2rem; line-height:1; opacity:.8}
@media (max-width:720px){ .retpill.indlg{bottom:calc(74px + env(safe-area-inset-bottom, 0px))} }
@media print{ .retpill{display:none !important} }

/* ---- Menus and panels slide in and out (no JavaScript: each one is shown by removing its `hidden` attribute, and a discrete `display`
   transition keeps it on screen while it slides away; @starting-style gives the way in). Browsers too old for this simply show and hide it. ---- */
:root{ --slide:.22s cubic-bezier(.2,.7,.3,1) }
.rpicker, .lpicker, .rsettings, .bmtray, .themepop, .wpanel, .cpanel, .mapcard, .maplegend, #sres, #fres, #hres, #dres{
  animation:none;
  transition:opacity var(--slide), transform var(--slide), display var(--slide) allow-discrete, overlay var(--slide) allow-discrete}
/* picker, settings, bookmarks, theme and search lists drop down from the top */
.rpicker[hidden], .lpicker[hidden], .rsettings[hidden], .bmtray[hidden], .themepop[hidden], #sres[hidden], #fres[hidden], #hres[hidden], #dres[hidden]{display:none; opacity:0; transform:translateY(-14px)}
@starting-style{ .rpicker:not([hidden]), .lpicker:not([hidden]), .rsettings:not([hidden]), .bmtray:not([hidden]), .themepop:not([hidden]), #sres:not([hidden]), #fres:not([hidden]), #hres:not([hidden]), #dres:not([hidden]){opacity:0; transform:translateY(-14px)} }
/* side panels slide in from the right; on a phone they rise from the foot */
.wpanel[hidden], .cpanel[hidden]{display:none; opacity:0; transform:translateX(100%)}
@starting-style{ .wpanel:not([hidden]), .cpanel:not([hidden]){opacity:0; transform:translateX(100%)} }
@media (max-width:720px){
  .wpanel[hidden], .cpanel[hidden]{transform:translateY(100%)}
  @starting-style{ .wpanel:not([hidden]), .cpanel:not([hidden]){transform:translateY(100%)} }
}
/* the map's place card slides in from the left; its key (a phone's "Key" button) rises from the foot */
.mapcard[hidden]{display:none; opacity:0; transform:translateX(-24px)}
@starting-style{ .mapcard:not([hidden]){opacity:0; transform:translateX(-24px)} }
.maplegend[hidden]{display:none; opacity:0; transform:translateY(12px)}
@starting-style{ .maplegend:not([hidden]){opacity:0; transform:translateY(12px)} }
/* the app's own drop-down list (09-native.js) unrolls downward; a clip, not a transform, so its measured position stays true */
.npick{transition:opacity .18s ease, clip-path .2s ease; clip-path:inset(0 round 10px)}
.npick.out{opacity:0; clip-path:inset(0 0 100% 0 round 10px); pointer-events:none}
@starting-style{ .npick{opacity:0; clip-path:inset(0 0 100% 0 round 10px)} }
/* phone: the key and the tools-bar popups rise from the foot, where they sit */
@media (max-width:720px){
  .maplegend:not(.open){opacity:0; transform:translateY(12px)}
  @starting-style{ .maplegend.open{opacity:0; transform:translateY(12px)} }
}
dialog.reader.btools .rsettings[hidden], dialog.reader.btools .bmtray[hidden]{transform:translateY(14px)}
@starting-style{ dialog.reader.btools .rsettings:not([hidden]), dialog.reader.btools .bmtray:not([hidden]){transform:translateY(14px)} }
@media (prefers-reduced-motion: reduce){
  .rpicker, .lpicker, .rsettings, .bmtray, .themepop, .wpanel, .cpanel, .mapcard, .maplegend, #sres, #fres, #hres, #dres, .npick{transition:none}
}

.dkeys{flex:0 0 100%; margin:6px 0 4px; font-size:12.5px; color:var(--ink-soft)}

/* The header's Google account button (06-notes.js, gdMe): far right while notes are kept in Google Drive */
.gdme{position:relative; flex:none; width:36px; height:36px; padding:0; border:1px solid var(--rule); border-radius:50%; background:var(--surface); color:var(--ink-soft); cursor:pointer; place-items:center}
.gdme:not([hidden]){display:grid}
.gdme:hover{box-shadow:0 0 0 3px var(--gold-wash)}
.gdme:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.gdme img{width:100%; height:100%; border-radius:50%; object-fit:cover}
.gdme .gdinit{font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink)}
.gdme svg{width:20px; height:20px}
.gdme img:not([hidden]) ~ svg, .gdme .gdinit:not([hidden]) ~ svg{display:none}
.gdme .gdbadge{display:none; position:absolute; right:-3px; bottom:-3px; width:13px; height:13px; border-radius:50%; background:var(--gold-strong); border:2px solid var(--surface)}
.gdme.need .gdbadge{display:block}
.gdme.need img, .gdme.need .gdinit{opacity:.55}
@media (max-width:720px){
  .gdme{width:44px; height:44px}
  .controls .gdme{order:2}
  body.gdme-need .controls input#search{flex-basis:calc(100% - 112px)}
  .gdme:not(.need){display:none !important}   /* phones: the account button only when Google needs signing in again */
}
.rbar .gdview{margin-left:auto}
@media (max-width:720px){ .notesdlg .rbar .gdview, .dictdlg .rbar .gdview{order:6} dialog.history .rbar .hzoom, dialog.history .rbar .fprintbtn{order:1} }   /* phone: the account button ends the first row of each view bar */

/* ---- Highlighters, underline pens, and notebooks (06-notes_markers.js). Colors come from each marker as --h/--hs (highlight) or --ucol
   (pen), set inline; the theme sets the lightness (--hll, --ull). Class names start with nm. ---- */
#ncol{position:relative}
.nmsw{display:inline-block; flex:none; vertical-align:middle}
.nmhl{width:22px; height:16px; border-radius:4px; background:hsl(var(--h) calc(var(--hs) * 1%) var(--hll) / var(--hla)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.nmpen{font-family:var(--serif); font-size:16px; font-weight:700; line-height:1; color:var(--ink)}
.nmpen u.ult{text-decoration-thickness:2.5px; text-underline-offset:.22em}
.nmhl.nmbig{width:42px; height:30px; border-radius:7px}
.nmpen.nmbig{font-size:24px}
.nmpen.nmbig u.ult{text-decoration-thickness:3px}
.nmhl.nmdot{width:13px; height:13px; border-radius:50%}
.nmpen.nmdot{font-size:12px}
.nmplus{width:22px; height:22px; border-radius:50%; border:1.5px dashed var(--ink-soft); display:inline-grid; place-items:center; font-size:14px; color:var(--ink-soft); line-height:1}
.nmpicks{display:flex; gap:4px; overflow-x:auto; scrollbar-width:thin; padding:2px 0 4px}
.nmpick{flex:none; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; width:66px; min-height:52px; padding:5px 2px 3px; border:1px solid transparent; border-radius:10px; background:none; color:var(--ink); cursor:pointer; font:inherit}
.nmpick:hover{background:var(--gold-wash)}
.nmpick[aria-pressed="true"]{border-color:var(--gold); background:var(--gold-wash)}
.nmpick .nmhl{width:30px; height:22px; border-radius:5px}
.nmpick .nmpen{font-size:19px; height:22px}
.nmpname{font-size:11.5px; line-height:1.15; text-align:center; max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word}
#hltool{width:min(560px, calc(100vw - 16px))}
#hltool .hlmrow{flex-wrap:nowrap; align-items:center}
#hltool .hlmrow .hlcap{width:5.6em}
#hltool .hlmrow .nmpicks{flex:1; min-width:0}
#hltool .hlfoot{justify-content:flex-end}
#hltool .hlfoot .hlnotebtn{margin-left:0}
.ncard .nmpicks{margin:0 0 8px}
.ncard .nmpick{width:58px; min-height:46px}
.nmchip{display:inline-flex; align-items:center; gap:5px}
/* the two tabs */
.nmseg{display:flex; margin:4px 0 16px; padding:3px; border:1px solid var(--rule); border-radius:22px; background:var(--surface); max-width:440px}
.nmseg button{flex:1; display:flex; align-items:center; justify-content:center; gap:7px; height:40px; border:0; border-radius:19px; background:none; font:inherit; font-family:var(--sans); font-size:16px; font-weight:700; color:var(--ink-soft); cursor:pointer}
.nmseg button svg{width:18px; height:18px}
.nmseg button[aria-selected="true"]{background:var(--gold-wash); color:var(--ink); box-shadow:inset 0 0 0 1px var(--gold)}
.nmsub{display:flex; align-items:center; gap:10px; margin:18px 2px 8px; font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.nmsub::after{content:""; flex:1; border-top:1px solid var(--rule)}
.nmadd{display:flex; align-items:center; gap:12px; width:100%; min-height:50px; margin:8px 0; padding:6px 10px; border:1px dashed var(--rule); border-radius:12px; background:none; font:inherit; font-family:var(--sans); font-size:16.5px; color:var(--ink); cursor:pointer}
.nmadd:hover{background:var(--gold-wash); border-color:var(--gold)}
.nmplusc{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--gold); color:var(--gold-strong); font-size:18px; font-weight:700; line-height:1}
/* a card */
.nmlist{display:flex; flex-direction:column; gap:8px}
.nmcard{position:relative; display:flex; align-items:stretch; min-height:62px; border:1px solid var(--rule); border-radius:12px; background:var(--surface); box-shadow:0 1px 3px rgba(40,26,10,.12); overflow:hidden; font-family:var(--sans)}
.nmcard[style*="--stripe"]::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--stripe)}
.nmcard.nmdrag{z-index:3; box-shadow:0 10px 26px rgba(40,26,10,.28); opacity:.96}
.nmgrip{flex:none; width:30px; display:grid; place-items:center; color:var(--ink-soft); cursor:grab; touch-action:none; opacity:.7}
.nmgrip svg{width:10px; height:18px}
.nmdrag .nmgrip{cursor:grabbing}
.nmlead{flex:none; width:56px; display:grid; place-items:center}
.nmbody{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:3px; padding:9px 4px; border:0; background:none; text-align:left; color:var(--ink); cursor:pointer; font:inherit}
.nmname{font-family:var(--serif); font-size:18px; font-weight:700; line-height:1.2}
.nmmeta{display:flex; flex-wrap:wrap; align-items:center; gap:3px 8px; font-size:13.5px; color:var(--ink-soft)}
.nmbook{display:inline-flex; align-items:center; gap:4px; padding:1px 8px 1px 6px; border-radius:10px; background:var(--gold-wash); color:var(--ink)}
.nmbook svg{width:13px; height:13px}
.nmdots{display:inline-flex; gap:4px; align-items:center}
.nmright{flex:none; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:4px 6px 8px 2px}
.nmmore{width:38px; height:34px; display:grid; place-items:center; border:0; border-radius:17px; background:none; color:var(--ink-soft); cursor:pointer}
.nmmore:hover, .nmmore[aria-expanded="true"]{background:var(--gold-wash); color:var(--ink)}
.nmmore svg{width:20px; height:20px}
.nmcount{font-size:15px; font-weight:700; color:var(--ink-soft)}
.nmmenu{position:absolute; z-index:20; min-width:230px; padding:6px; border:1px solid var(--rule); border-radius:12px; background:var(--surface); box-shadow:0 12px 34px rgba(40,26,10,.3); font-family:var(--sans)}
.nmmenu[hidden]{display:none}
.nmmenu button{display:flex; align-items:center; width:100%; min-height:44px; padding:0 12px; border:0; border-radius:8px; background:none; font:inherit; font-size:16px; color:var(--ink); text-align:left; cursor:pointer}
.nmmenu button:hover, .nmmenu button:focus-visible{background:var(--gold-wash); outline:0}
.nmmenu .nmdel{color:var(--accent)}
.lhead .nmsw{margin-right:12px}
/* a notebook's filter chips */
.nmfilters{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 14px}
.nmfilters button{display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 13px; border:1px solid var(--rule); border-radius:17px; background:var(--surface); font:inherit; font-family:var(--sans); font-size:14.5px; color:var(--ink); cursor:pointer}
.nmfilters button[aria-pressed="true"]{border-color:var(--gold); background:var(--gold-wash); font-weight:700}
/* the editor */
.nmedit{width:min(440px, 94vw); max-height:calc(100dvh - 24px - 2 * max(env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px))); overflow-y:auto}
.nmedit h3{margin-bottom:4px}
.nmlab{display:block; margin:14px 0 5px; font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.nmedit select{display:block; width:100%; height:42px; padding:0 10px; border:1px solid var(--rule); border-radius:8px; background:var(--surface); color:var(--ink); font:inherit; font-size:16px}
.nmstyles{display:flex; gap:8px}
.nmsty{flex:1; height:42px; border:1px solid var(--rule); border-radius:10px; background:none; color:var(--ink); font-family:var(--serif); font-size:16px; cursor:pointer}
.nmsty[aria-pressed="true"]{border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); background:var(--gold-wash)}
.nmsty u{text-decoration-thickness:2px}
.nmwheelrow{display:flex; gap:14px; align-items:center}
.nmwheel{position:relative; flex:none; width:180px; height:180px; touch-action:none; cursor:crosshair; border-radius:50%}
.nmwheel:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.nmwheel canvas{display:block; width:100%; height:100%; border-radius:50%; box-shadow:0 0 0 1px var(--rule)}
.nmknob{position:absolute; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35); pointer-events:none}
.nmside .nhint{margin:8px 0 0; font-size:13px}
.nmquick{display:grid; grid-template-columns:repeat(4, 30px); gap:8px}
.nmq{width:30px; height:30px; padding:0; border-radius:50%; border:0; cursor:pointer; background:hsl(var(--h) calc(var(--hs) * 1%) var(--hll)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.nmq:hover{transform:scale(1.1)}
.nmq.nmink{background:var(--surface); box-shadow:inset 0 0 0 5px var(--ink)}
.nmprev{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px}
.nmpv{margin:0; padding:9px 11px; border-radius:10px; font-family:var(--serif); font-size:15px; line-height:1.45; border:1px solid var(--rule)}
.nmpv small{display:block; font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.7; margin-bottom:3px}
.nmpv.light{background:#FAF4E4; color:#2E2418; --ink:#2E2418; --hll:70%; --hla:.62; --ull:40%}
.nmpv.dark{background:#2A221A; color:#E9DDC4; --ink:#E9DDC4; --hll:40%; --hla:.55; --ull:68%}
.nmacts{display:flex; gap:10px; justify-content:flex-end; margin-top:18px}
.nmacts button{min-width:96px}
@media (max-width:420px){ .nmwheelrow{flex-direction:column; align-items:flex-start} .nmquick{grid-template-columns:repeat(9, 28px)} .nmq{width:28px; height:28px} }

/* Biblica's maps: in event popups and the reader's side panel, and the full-screen viewer (06-biblica.js) */
.bibmaps{margin:18px 0 8px}
.bibmaps h3{margin:0 0 8px}
.bibrow{display:flex;flex-wrap:wrap;gap:12px}
.bibthumb{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:6px;background:var(--page);border:1px solid var(--rule);border-radius:8px;color:var(--ink);font:inherit;font-size:14px;cursor:zoom-in;text-align:left;max-width:100%}
.bibthumb img{display:block;max-width:100%;height:auto;border-radius:4px}
.bibthumb:hover{border-color:var(--gold)}
.bibcredit{font-size:12.5px;color:var(--ink-soft);margin:8px 0 0}
dialog.bibview{width:min(1400px,96vw);height:calc(100vh - 2 * max(16px, env(safe-area-inset-top), env(safe-area-inset-bottom)));max-height:none;max-width:none;padding:0;display:none;flex-direction:column;background:var(--bg);color:var(--ink);border:1px solid var(--rule);border-radius:10px}
dialog.bibview[open]{display:flex}
dialog.bibview::backdrop{background:rgba(0,0,0,.6)}
.bibbar{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;border-bottom:1px solid var(--rule)}
.bibtitle{flex:1;margin:0;font-family:var(--serif, Alegreya, Georgia, serif);font-size:18px;font-weight:700}
.bibclose{width:40px;height:40px;font-size:24px;line-height:1;border:1px solid var(--rule);border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}
.bibscroll{flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--lane-alt)}
.bibscroll img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in}
.bibscroll.full{overflow:auto;display:block}
.bibscroll.full img{max-width:none;max-height:none;cursor:zoom-out}
.bibview .bibcredit{padding:6px 16px 10px;margin:0}
.bib-chapter{margin:16px 0 4px}
.bib-chapter h3{font-size:16px}
.bib-chapter .bibrow{flex-direction:column;gap:8px}
.bib-chapter .bibthumb{width:100%;font-size:13.5px}
.bib-chapter .bibthumb img{width:100%;height:auto}