:root{
  --paper:#F7F5EF;
  --surface:#FFFFFF;
  --surface-2:#FBFAF6;
  --ink:#171817;
  --muted:#74716A;
  --line:#E6E1D6;
  --navy:#173A5E;
  --navy-2:#214A73;
  --navy-soft:#EAF0F6;
  --gold:#A47D36;
  --words-of-christ-red:#A6192E;
  --reader-size:20px;
  --text-scale:1;
  --app-version:"v2.4.1";
  --reader-line:1.62;
  --reader-width:720px;
  --shadow:0 18px 60px rgba(20,30,40,.14);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  background:var(--paper);
  color:var(--ink);
  --scripture-font:Georgia,"Times New Roman",serif;
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.locked{overflow:hidden}
button,input{font:inherit}
button{cursor:pointer}
button,input{touch-action:manipulation}
button:focus-visible,input:focus-visible{
  outline:3px solid rgba(23,58,94,.22);
  outline-offset:2px;
}
button:disabled{opacity:.42;cursor:not-allowed}

/* CLICK TO OPEN ANYWHERE BAR */
.open-anywhere{
  display:flex;align-items:center;justify-content:center;
  width:100%;
  min-height:28px;
  padding:6px 12px;
  padding-top:calc(6px + var(--safe-top));
  border:0;
  border-bottom:1px solid var(--line);
  background:var(--navy-soft);
  color:var(--navy);
  font-size:calc(13px * var(--text-scale));
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(23,58,94,.10);
}
.open-anywhere:hover{background:#DDE8F3;color:#12375A}
.open-anywhere:active{background:#D0DEEF}
.open-anywhere:focus-visible{outline:3px solid rgba(23,58,94,.28);outline-offset:-3px}
@media(hover:none) and (pointer:coarse){
  .open-anywhere{min-height:44px}
}

/* APP SHELL */
.app{min-height:100%;}
.top-shell{
  position:sticky;
  top:0;
  z-index:60;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  padding-top:var(--safe-top);
  background:rgba(247,245,239,.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar{
  min-height:60px;
  max-width:1600px;
  margin:auto;
  padding:8px max(10px,var(--safe-right)) 8px max(10px,var(--safe-left));
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}
.brand{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:max-content;
  color:var(--ink);
  user-select:none;
}
.brand-badge{
  width:48px;
  height:36px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:var(--navy);
  color:#fff;
  font-size:calc(15px * var(--text-scale));
  font-weight:900;
  letter-spacing:.035em;
}
.brand-word{font-size:calc(17px * var(--text-scale));font-weight:850;letter-spacing:-.01em}
.search-wrap{position:relative;min-width:0}
.search{
  width:100%;
  min-height:44px;
  padding:0 42px 0 42px;
  border:1px solid #DCD7CB;
  border-radius:13px;
  background:#fff;
  color:var(--ink);
  font-size:calc(16px * var(--text-scale));
  outline:none;
  box-shadow:0 2px 8px rgba(0,0,0,.025);
}
.search:focus{
  border-color:#8FA7BF;
  box-shadow:0 0 0 4px rgba(23,58,94,.09);
}
.search-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:#76736D;font-size:calc(18px * var(--text-scale));pointer-events:none
}
.search-clear{
  display:none;
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:#8B877E
}
.search-clear.show{display:block}
.header-actions{display:flex;gap:6px}
.icon-btn{
  min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:12px;background:#fff;color:#3F3E39;font-weight:850
}
.icon-btn:hover{background:#FBFAF7}

/* NAVIGATE STATE */
.nav-shell{
  max-width:1600px;
  margin:auto;
  background:#FCFBF8;
}
.nav-shell-inner{
  padding:7px max(10px,var(--safe-right)) 0 max(10px,var(--safe-left));
}
.nav-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.segmented{
  flex:0 0 auto;
  display:inline-flex;
  gap:2px;
  padding:3px;
  border-radius:11px;
  background:#EFEEE9;
}
.segmented button{
  min-width:62px;
  height:38px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#716E67;
  font-size:calc(12px * var(--text-scale));
  font-weight:850;
}
.segmented button.active{
  background:#fff;
  color:var(--navy);
  box-shadow:0 1px 5px rgba(0,0,0,.07);
}
/* One persistent pill follows the existing Testament state. */
#testamentToggle{position:relative;isolation:isolate}
#testamentToggle .segmented-slider{
  position:absolute;left:3px;top:3px;bottom:3px;
  width:calc((100% - 8px)/2);
  border-radius:9px;background:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.07);
  pointer-events:none;transform:translateX(0);
  transition:transform 200ms ease;
}
#testamentToggle[data-active="nt"] .segmented-slider{transform:translateX(calc(100% + 2px))}
#testamentToggle button{position:relative;z-index:1;flex:1}
#testamentToggle button.active{background:transparent;box-shadow:none}
@media(prefers-reduced-motion:reduce){
  #testamentToggle .segmented-slider{transition:none}
}
.book-ribbon{
  min-width:0;
  display:flex;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;
  padding:6px 0 9px;
}
.book-ribbon::-webkit-scrollbar{display:none}
.ribbon-controls{display:contents}
.ribbon-scroll{display:none}
@media(min-width:900px) and (hover:hover) and (pointer:fine){
  .ribbon-controls{display:flex;align-items:center;min-width:0;gap:6px}
  .book-ribbon-controls{flex:1}
  .chapter-ribbon-controls{max-width:1600px;margin:auto;background:#fff}
  .ribbon-controls .book-ribbon,.ribbon-controls .chapter-strip{flex:1;min-width:0}
  .ribbon-scroll{
    display:block;flex:0 0 28px;width:28px;height:38px;padding:0;
    border:0;border-radius:9px;background:transparent;color:var(--navy);
    font:inherit;font-size:calc(22px * var(--text-scale));cursor:pointer;
  }
  .ribbon-scroll:hover:not(:disabled){background:var(--navy-soft)}
  .ribbon-scroll:disabled{opacity:.25;cursor:default}
}

.book-pill{
  flex:0 0 auto;
  min-width:44px;
  min-height:44px;
  border:1px solid transparent;
  border-radius:11px;
  padding:0 12px;
  background:#F1EFE9;
  color:#4B4944;
  font-size:calc(12px * var(--text-scale));
  font-weight:850;
  scroll-snap-align:start;
}
.book-pill:hover{background:var(--navy-soft)}
.book-pill.active{background:var(--navy);color:#fff}
.chapter-bar{
  border-top:1px solid var(--line);
  background:#fff;
}
.chapter-bar-inner{
  max-width:1600px;
  margin:auto;
  padding:7px max(10px,var(--safe-right)) 8px max(10px,var(--safe-left));
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
}
.chapter-arrow{
  width:44px;height:44px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#FBFAF7;
  color:var(--navy);
  font-size:calc(22px * var(--text-scale));
}
.current-ref{
  min-width:0;
  height:44px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:#252521;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  padding:0 14px;
  font-weight:900;
}
.current-ref .book-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.current-ref small{font-size:calc(10px * var(--text-scale));color:#8A867D}
.chapter-strip{
  max-width:1600px;
  margin:auto;
  display:flex;
  gap:5px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:0 20px 9px;
  background:#fff;
}
.chapter-strip::-webkit-scrollbar{display:none}
.chapter-chip{
  flex:0 0 40px;
  height:38px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#6C6962;
  font-size:calc(12px * var(--text-scale));
  font-weight:800;
}
.chapter-chip:hover{background:#F0EEE8}
.chapter-chip.active{background:#191A18;color:#fff}

/* READ STATE: compact header */
.compact-bar{
  display:none;
  max-width:1600px;
  margin:auto;
  align-items:center;
  gap:6px;
  padding:6px max(10px,var(--safe-right)) 7px max(10px,var(--safe-left));
}
.compact-logo{
  width:44px;height:38px;border-radius:10px;
  display:grid;place-items:center;background:var(--navy);color:#fff;font-size:calc(12px * var(--text-scale));font-weight:900
}
.compact-ref{
  flex:1;min-width:0;height:38px;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:#252521;font-weight:850;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.compact-btn{
  width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);font-weight:900
}

/* READER */
.workspace{
  max-width:1600px;
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr);
}
.reader-column{min-width:0}
.reader{
  width:min(100%,var(--reader-width));
  margin:0 auto;
  padding:30px 16px calc(112px + var(--safe-bottom));
}
.eyebrow{
  margin:0 0 7px;
  color:var(--gold);
  font-size:calc(10px * var(--text-scale));
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.chapter-title{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(34px,6vw,48px);
  line-height:1.04;
  letter-spacing:-.025em;
}
.chapter-meta{
  margin:10px 0 25px;
  color:var(--muted);
  font-size:calc(12px * var(--text-scale));
}
.verse{
  position:relative;
  padding:6px 8px 6px 42px;
  border-radius:11px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:var(--reader-size);
  line-height:var(--reader-line);
  transition:background .12s ease,box-shadow .12s ease;
}
.verse:hover{background:#FBFAF6}
.verse.focused{background:#F1F5F8;box-shadow:inset 3px 0 0 var(--navy)}
.vnum{
  position:absolute;
  left:4px;top:9px;
  min-width:32px;min-height:32px;
  border:0;border-radius:9px;
  background:transparent;
  color:#A09C93;
  font-family:Inter,ui-sans-serif,sans-serif;
  font-size:calc(10px * var(--text-scale));font-weight:900;
}
.vnum:hover,.verse.focused .vnum{background:var(--navy-soft);color:var(--navy)}
.mock-note{
  margin-top:30px;
  padding:16px;
  border:1px dashed #D8D2C4;
  border-radius:14px;
  background:#FBFAF7;
  color:#6B675F;
  font-size:calc(12px * var(--text-scale));
  line-height:1.55;
}

/* MOBILE READING DOCK */
.read-dock{
  position:fixed;
  z-index:45;
  left:50%;
  bottom:calc(10px + var(--safe-bottom));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:4px;
  padding:5px;
  border:1px solid rgba(220,215,203,.96);
  border-radius:15px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(16px);
  box-shadow:0 12px 34px rgba(20,30,40,.14);
}
.read-dock button{
  min-width:54px;height:44px;
  border:0;border-radius:11px;background:transparent;color:#44413C;font-weight:850;font-size:calc(12px * var(--text-scale))
}
.read-dock .brain-dock{min-width:96px;background:var(--navy);color:#fff}

/* STUDY PANEL */
.study-panel{
  position:fixed;
  z-index:95;
  inset:0 0 0 auto;
  width:min(400px,92vw);
  padding-top:var(--safe-top);
  background:#FAF9F5;
  border-left:1px solid var(--line);
  box-shadow:-18px 0 54px rgba(20,30,40,.14);
  transform:translateX(103%);
  transition:transform .2s ease;
  display:flex;
  flex-direction:column;
}
.study-panel.open{transform:translateX(0)}
.study-head{
  min-height:60px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.study-head strong{font-size:calc(17px * var(--text-scale))}
.close-btn{
  width:42px;height:42px;border:0;border-radius:11px;background:#F2F0EA;color:#4B4943;font-size:calc(20px * var(--text-scale));
  display:flex;align-items:center;justify-content:center;line-height:1
}
.study-body{padding:14px;overflow:auto}
.study-card{
  margin-bottom:10px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
}
.study-card h3{margin:0 0 8px;font-size:calc(13px * var(--text-scale))}
.study-card p{margin:0;color:#706D66;font-size:calc(12px * var(--text-scale));line-height:1.55}
.study-actions{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.study-actions button{
  min-height:44px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#FBFAF7;
  color:#3F3D38;
  font-size:calc(12px * var(--text-scale));
  font-weight:800;
}

/* OVERLAY + NAV SHEET */
.overlay{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(16,24,32,.28);
  backdrop-filter:blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.overlay.open{opacity:1;pointer-events:auto}
.nav-sheet{
  position:absolute;
  left:0;right:0;bottom:0;
  max-height:min(78vh,760px);
  padding-bottom:var(--safe-bottom);
  border-radius:22px 22px 0 0;
  background:#fff;
  box-shadow:0 -20px 60px rgba(0,0,0,.18);
  transform:translateY(102%);
  transition:transform .22s ease;
  overflow:hidden;
}
.overlay.open .nav-sheet{transform:translateY(0)}
.sheet-head{
  min-height:62px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sheet-head h2{margin:0;font-size:calc(16px * var(--text-scale))}
.sheet-body{padding:14px 16px 24px;max-height:calc(78vh - 62px);overflow:auto}
.book-grid{
  column-count:2;
  column-gap:8px;
}
.book-option{
  display:block;
  width:100%;
  break-inside:avoid;
  margin-bottom:8px;
  min-height:50px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#FBFAF7;
  text-align:left;
  color:#363530;
  font-weight:800;
}
.book-option.active{background:var(--navy-soft);border-color:#AFC0D1;color:var(--navy)}
.chapter-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.chapter-option{
  aspect-ratio:1;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#FBFAF7;
  color:#4F4C46;
  font-weight:850;
}
.chapter-option.active{background:var(--navy);border-color:var(--navy);color:#fff}


/* ORIGINAL-LANGUAGE WORD INTERACTION */
.word-token{
  display:inline;
  padding:0 1px;
  margin:0;
  border:0;
  border-radius:4px;
  background:transparent;
  color:inherit;
  font:inherit;
  line-height:inherit;
  text-align:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(23,58,94,.10);
}
.word-token.selected{
  background:var(--navy-soft);
  box-shadow:inset 0 -1px 0 rgba(23,58,94,.24);
}
/* Words-of-Christ presentation overlay: annotation only (prototypes/app.js
   tokenizeVerse()), gated by the Account -> Settings toggle. OFF leaves
   Scripture appearance unchanged; ON recolors only annotated words. */
html.words-of-christ-enabled .word-token.words-of-christ{
  color:var(--words-of-christ-red);
}
@media(hover:hover) and (pointer:fine){
  .word-token:hover{
    background:var(--navy-soft);
    box-shadow:inset 0 -1px 0 rgba(23,58,94,.24);
  }
}

.word-panel-card{
  container-type:inline-size;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  overflow:hidden;
}
.word-panel-top{
  padding:14px 14px 12px;
  border-bottom:1px solid var(--line);
}
.word-english{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:calc(26px * var(--text-scale));
  line-height:1.05;
}
.word-ref{
  margin-top:5px;
  color:var(--muted);
  font-size:calc(11px * var(--text-scale));
}
.word-panel-body{
  padding:13px 14px 15px;
}
.word-line{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:6px 16px;
  padding:8px 0;
  border-bottom:1px solid #F0EEE8;
}
.word-line:last-of-type{border-bottom:0}
.word-label{
  min-width:0;
  overflow-wrap:anywhere;
  color:#858078;
  font-size:calc(11px * var(--text-scale));
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.word-value{
  min-width:0;
  overflow-wrap:anywhere;
  color:#35342F;
  font-size:calc(13px * var(--text-scale));
  line-height:1.45;
}
@container (max-width:400px){
  .word-line{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .word-line{grid-template-columns:minmax(0,1fr)}
}
.original-script{
  font-family:Georgia,"Times New Roman",serif;
  font-size:calc(18px * var(--text-scale));
}
.explore-word{
  display:none;
  width:100%;
  min-height:44px;
  margin-top:12px;
  border:1px solid var(--navy);
  border-radius:11px;
  background:var(--navy);
  color:#fff;
  font-weight:850;
}
.word-empty{
  color:#6E6A63;
  font-size:calc(12px * var(--text-scale));
  line-height:1.55;
}


.verse-word-list{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.verse-word-list h4{
  margin:0 0 10px;
  color:#3F3D38;
  font-size:calc(12px * var(--text-scale));
  font-weight:900;
  letter-spacing:.02em;
}
.verse-word-items{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.verse-word-item{
  width:100%;
  text-align:left;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#FBFAF7;
  color:#2F2E2A;
}
.verse-word-item:hover{
  background:#F4F7FA;
  border-color:#C7D6E5;
}
.verse-word-item.active{
  background:var(--navy-soft);
  border-color:#AFC0D1;
}
.verse-word-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.verse-word-english{
  font-size:calc(14px * var(--text-scale));
  font-weight:850;
}
.verse-word-strongs{
  color:#7B776F;
  font-size:calc(11px * var(--text-scale));
  font-weight:800;
}
.verse-word-bottom{
  margin-top:6px;
  color:#66635C;
  font-size:calc(12px * var(--text-scale));
  line-height:1.45;
}
.verse-word-original{
  color:#2F2E2A;
  font-weight:700;
}

/* MOBILE / TABLET PORTRAIT WORD SHEET */
.word-overlay{
  position:fixed;
  inset:0;
  z-index:94;
  background:rgba(16,24,32,.20);
  backdrop-filter:blur(1.5px);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
}
.word-overlay.open{
  opacity:1;
  pointer-events:auto;
}
.word-sheet{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  height:auto;
  max-height:none;
  padding-top:var(--safe-top);
  padding-bottom:var(--safe-bottom);
  border-radius:0;
  background:#FAF9F5;
  box-shadow:0 -18px 56px rgba(0,0,0,.16);
  transform:translateY(102%);
  transition:transform .2s ease;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.word-overlay.open .word-sheet{
  transform:translateY(0);
}
.word-sheet-head{
  flex:0 0 auto;
  min-height:58px;
  padding:9px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line);
  background:#fff;
  position:relative;
  z-index:2;
}
.word-sheet-head strong{
  font-size:calc(14px * var(--text-scale));
}
.word-sheet-body{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  padding:12px 12px 18px;
}

/* Desktop/iPad landscape: word study lives in the existing right study area */
@media(min-width:900px){
  .word-overlay{display:none}
}

/* SEARCH RESULTS */

/* READING SETTINGS — moved out of the header's floating Aa popover into
   Account → Settings (prototypes/auth.js); no longer a fixed overlay. */
.settings{
  display:block;
  width:100%;
  max-width:340px;
  margin-top:18px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow);
}
.settings h3{margin:0 0 10px;font-size:calc(13px * var(--text-scale))}
.setting-row{
  padding:9px 0;
  border-bottom:1px solid #F0EEE8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.setting-row:last-child{border-bottom:0}
.setting-row span{font-size:calc(12px * var(--text-scale));color:#66635D}
.setting-group{display:flex;gap:5px}
.setting-group button{
  min-width:42px;height:38px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#FBFAF7;
  font-weight:800
}
.setting-group button.active{background:var(--navy);color:#fff}
.setting-row-toggle{align-items:flex-start}
.setting-copy{display:flex;flex-direction:column;gap:2px}
.setting-copy small{font-size:calc(11px * var(--text-scale));color:#89857D;font-weight:400;line-height:1.35}
.setting-checkbox{width:20px;height:20px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--navy)}

/* TABLET / DESKTOP */
@media(min-width:700px){
  .reader{padding-left:24px;padding-right:24px}
  .book-grid{column-count:3}
  .chapter-grid{grid-template-columns:repeat(7,1fr)}
}
@media(min-width:900px){
  .chapter-bar{display:none}
  .chapter-strip{display:flex}
  .topbar,.nav-shell-inner{padding-left:20px;padding-right:20px}
  .read-dock{display:none}
  .reader{padding-top:40px;padding-bottom:90px}
  .workspace.with-study{
    grid-template-columns:minmax(0,1fr) 360px;
  }
  .workspace.with-study .study-inline{display:flex}
  .study-inline{
    display:none;
    position:sticky;
    top:var(--desktop-brain-top, 132px);
    height:calc(100svh - var(--desktop-brain-top, 132px));
    align-self:start;
    border-left:1px solid var(--line);
    background:#FAF9F5;
    overflow:hidden;
    flex-direction:column;
  }
  .study-inline-head{
    flex:0 0 auto;
    min-height:54px;
    padding:8px 10px 8px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:#fff;
    border-bottom:1px solid var(--line);
  }
  .study-inline-head strong{font-size:calc(15px * var(--text-scale))}
  .study-inline .close-btn{width:44px;height:44px;flex:0 0 auto}
  .study-inline-actions{display:flex;align-items:center;gap:6px}
  .study-inline-body{flex:1 1 auto;overflow:auto;padding:18px}
  .study-inline .study-card{margin-bottom:10px}
  .study-panel{display:none}
}
/* FULL-SCREEN EXPAND (desktop/tablet study side panel) */
.workspace.with-study.expanded{grid-template-columns:minmax(0,1fr)}
.study-inline.expanded .study-inline-body{min-height:0}
.study-inline.expanded{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  margin:0;
  width:100%;
  max-width:none;
  height:100dvh;
  min-height:0;
  border-left:none;
  background:#FAF9F5;
  box-shadow:0 28px 90px rgba(20,30,40,.3);
  z-index:96;
}

@media(min-width:1200px){
  .book-grid{column-count:4}
  :root{--reader-width:740px}
  .reader{padding-left:32px;padding-right:32px}
  .workspace.with-study{
    grid-template-columns:minmax(0,1fr) 390px;
  }
}
@media(min-width:1700px){
  :root{--reader-width:760px}
}

/* MOBILE / COMPACT */
@media(max-width:899px){
  .chapter-strip{display:none}
  .study-inline{display:none}
  .header-actions .study-header{display:none}
  .top-shell.compact .topbar,
  .top-shell.compact .nav-shell,
  .top-shell.compact .chapter-bar{display:none}
  .top-shell.compact .compact-bar{display:none}
}
@media(max-width:560px){
  .brand-word{display:none}
  .brand-badge{width:46px}
  .topbar{gap:8px}
  .reader{padding-left:13px;padding-right:13px}
  .verse{padding-left:40px}
  .book-grid{column-count:2}
  .chapter-grid{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:380px){
  .icon-btn{min-width:42px;padding:0 9px}
  .read-dock button{min-width:48px}
  .read-dock .brain-dock{min-width:88px}
}

/* IPAD-LIKE LANDSCAPE: keep reader dominant, study optional */
@media(min-width:900px) and (max-width:1180px) and (orientation:landscape){
  :root{--reader-width:690px}
  .workspace.with-study{grid-template-columns:minmax(0,1fr) 330px}
}

/* TOUCH */
@media(hover:none) and (pointer:coarse){
  .book-pill,.chapter-arrow,.current-ref,.icon-btn,.compact-btn,.vnum,.read-dock button{min-height:44px}
}

/* REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}
/* Deterministic search stays within the existing reader column. */
[hidden]{display:none!important}
.search-help{font-size:calc(12px * var(--text-scale));margin-top:5px}
.search-help summary{cursor:pointer;display:inline-block;padding:4px 0}
.search-history{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin-top:4px;color:var(--muted);font-size:calc(12px * var(--text-scale))}
.search-history button{border:0;background:none;color:inherit;padding:5px 0;white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;text-align:left}
.search-history button:hover{text-decoration:underline;color:var(--navy)}
.search-help-content{position:absolute;left:0;z-index:30;background:var(--paper,#fff);border:1px solid var(--line);border-radius:10px;padding:48px 14px 14px;box-shadow:0 8px 24px #0002;width:min(600px,100%);max-height:55vh;overflow:auto;overscroll-behavior:contain;line-height:1.5}
.search-help-content dl{margin:0;display:grid;gap:10px 18px}
.search-help-close{position:absolute;right:4px;top:4px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:calc(24px * var(--text-scale));line-height:1}
.search-help-close:hover{background:var(--surface-2);color:var(--ink)}
@media(min-width:900px){.search-help-content dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
.search-help-content dt{font-weight:650;margin:0;color:var(--ink)}
.search-help-content dt:first-child{margin-top:0}
.search-help-content dd{margin:2px 0 0;color:var(--muted)}
.search-help-content h3,.search-help-content h4{margin:14px 0 6px;font-size:inherit;font-weight:700;color:var(--ink)}
.search-help-content h3:first-of-type{margin-top:0}
.search-help-content p{margin:10px 0 0;color:var(--muted);overflow-wrap:anywhere}
.search-help-content ul{margin:6px 0 0;padding-left:18px;color:var(--muted)}
.search-help-content li{margin:6px 0;overflow-wrap:anywhere}
.search-wrap .search-icon,.search-wrap .search-clear{top:23px}
.search-submit{border:0;background:none;cursor:pointer;pointer-events:auto}
.search-results{padding:24px clamp(13px,4vw,40px);overflow-wrap:anywhere}
.search-results h1{font-size:1.35rem;line-height:1.4;margin:14px 0}
.search-results p{line-height:1.6}
#searchBookBreakdown{color:var(--muted);font-size:calc(14px * var(--text-scale))}
.search-result{display:block;padding:16px 0;min-height:48px;border-bottom:1px solid #ddd;color:inherit;text-decoration:none;white-space:pre-wrap;line-height:1.65}
.search-result strong{display:block;color:var(--accent,#76552b);font-size:calc(15px * var(--text-scale))}
.search-result:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.search-results button{min-height:44px;padding:8px 14px;cursor:pointer;border:1px solid #ccc;border-radius:8px;background:transparent;color:inherit}
.search-pages{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:20px}
/* Scoped BDB study content. */
.bdb-section{border-top:1px solid var(--line,#ddd);margin-top:24px;padding-top:18px;overflow-wrap:anywhere;min-width:0;direction:ltr}
.bdb-section h4,.word-study-heading{font-size:calc(12px * var(--text-scale));letter-spacing:.08em;margin:0 0 14px}
.bdb-section h5{font-size:calc(13px * var(--text-scale));margin:0 0 8px}
.bdb-section .bdb-article{border-top:1px solid var(--line,#ddd);padding:14px 0;font-size:calc(15px * var(--text-scale));line-height:1.65}
.bdb-section .bdb-context,.bdb-section .bdb-status,.bdb-section .bdb-attribution{font-size:calc(12px * var(--text-scale));color:var(--muted,#666)}
.bdb-section .bdb-sense{display:block;margin:8px 0 8px 12px}
.bdb-section .bdb-def,.bdb-section .bdb-sense-number{font-weight:600}
.bdb-section .bdb-em{font-style:italic}
.bdb-section .bdb-w,.bdb-section .bdb-foreign{unicode-bidi:isolate}
.bdb-section .bdb-status{display:block;margin-top:8px}
.bdb-section .bdb-ref{text-decoration:underline dotted}
.bdb-section .bdb-error{color:#a52a2a}
.bdb-section button{min-height:44px;padding:8px 14px}
/* Scoped Thayer study content. */
.thayer-section{border-top:1px solid var(--line,#ddd);margin-top:24px;padding-top:18px;overflow-wrap:anywhere;min-width:0;direction:ltr}
.thayer-section h5{font-size:calc(13px * var(--text-scale));margin:0 0 8px}
.thayer-section .thayer-article{border-top:1px solid var(--line,#ddd);padding:14px 0;font-size:calc(15px * var(--text-scale));line-height:1.65}
.thayer-section .thayer-context,.thayer-section .thayer-attribution,.thayer-section .thayer-unavailable{font-size:calc(12px * var(--text-scale));color:var(--muted,#666)}
.thayer-section .thayer-line{margin:8px 0;white-space:pre-wrap}
.thayer-section .thayer-error{color:#a52a2a}
.thayer-section button{min-height:44px;padding:8px 14px}
.thayer-section .thayer-toggle,.thayer-section .thayer-source-toggle{display:block;border:0;background:none;padding:0;margin:12px 0 0;color:var(--navy,#173A5E);font-size:calc(13px * var(--text-scale));line-height:1.45;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:0;width:auto}
.thayer-section .thayer-source-toggle{margin:10px 0 0}
.thayer-section .thayer-details{margin-top:8px}
.thayer-section .thayer-preview{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
.thayer-section .thayer-article[data-expanded] .thayer-preview{display:block;overflow:visible;-webkit-line-clamp:none}



/* =========================================================
   KJV BRAIN — MIDNIGHT MANUSCRIPT THEME
   Presentation-only overrides based on supplied reference.
   No JavaScript, data, navigation, search, BDB, Thayer,
   or study functionality is changed.
   ========================================================= */

:root{
  --paper:#010305;
  --surface:#07172B;
  --surface-2:#0B2441;
  --ink:#F6F1E7;
  --muted:#929EAB;
  --line:rgba(213,173,85,.22);
  --navy:#07172B;
  --navy-2:#0B2441;
  --navy-soft:#0A213A;
  --gold:#D5AD55;
  --gold-soft:#F2D58B;
  --red:#B11E2C;
  --words-of-christ-red:#E85D6A;
  --reader-size:20px;
  --reader-line:1.62;
  --reader-width:720px;
  --shadow:0 20px 50px rgba(0,0,0,.42);
}

/* Base canvas */
html,
body{
  background:#010305;
  color:var(--ink);
}

body{
  background:
    linear-gradient(
      180deg,
      #061426 0%,
      #020609 54%,
      #010203 100%
    );
}

/* Focus states */
button:focus-visible,
input:focus-visible{
  outline:2px solid rgba(242,213,139,.72);
  outline-offset:2px;
}

/* Open Anywhere */
.open-anywhere{
  background:#02060B;
  color:var(--gold-soft);
  border-bottom:1px solid rgba(213,173,85,.18);
}
.open-anywhere:hover{
  background:#07172B;
  color:#FFF4CE;
}
.open-anywhere:active{
  background:#0B2441;
}
.open-anywhere:focus-visible{
  outline-color:rgba(242,213,139,.7);
}

/* Header / top navigation */
.top-shell{
  background:rgba(2,6,11,.94);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(213,173,85,.18);
}

.brand{
  color:var(--white,#F6F1E7);
}

.brand-badge,
.compact-logo{
  background:#07101B;
  color:var(--gold-soft);
  border:1px solid rgba(213,173,85,.58);
  box-shadow:none;
}

.brand-word{
  color:#F6F1E7;
}

.search{
  border:1px solid rgba(213,173,85,.22);
  background:#071A2E;
  color:#F6F1E7;
  box-shadow:none;
}
.search::placeholder{
  color:#7F8C99;
}
.search:focus{
  border-color:rgba(213,173,85,.7);
  box-shadow:0 0 0 3px rgba(213,173,85,.08);
}
.search-icon,
.search-clear{
  color:#8D99A5;
}

.icon-btn{
  border:1px solid rgba(255,255,255,.10);
  background:#07101B;
  color:#F6F1E7;
}
.icon-btn:hover{
  background:#0A213A;
  border-color:rgba(213,173,85,.35);
}

/* Navigation ribbons */
.nav-shell,
.chapter-bar,
.chapter-strip,
.chapter-ribbon-controls{
  background:#02060B;
}

.segmented{
  background:#03070C;
  border:1px solid rgba(255,255,255,.07);
}
.segmented button{
  color:#75818D;
}
.segmented button.active{
  color:var(--gold-soft);
}
#testamentToggle .segmented-slider{
  background:#0A213A;
  border:1px solid rgba(213,173,85,.18);
  box-shadow:none;
}

.ribbon-scroll{
  color:var(--gold-soft)!important;
}
.ribbon-scroll:hover:not(:disabled){
  background:#0A213A!important;
}

.book-pill{
  background:#06101B;
  color:#929EAB;
  border:1px solid rgba(255,255,255,.07);
}
.book-pill:hover{
  background:#0A213A;
  border-color:rgba(213,173,85,.22);
}
.book-pill.active{
  background:#0A213A;
  color:var(--gold-soft);
  border-color:rgba(213,173,85,.42);
}

.chapter-bar{
  border-top-color:rgba(213,173,85,.18);
}

.chapter-arrow,
.current-ref,
.compact-ref,
.compact-btn{
  border:1px solid rgba(213,173,85,.22);
  background:#071A2E;
  color:#F6F1E7;
}
.chapter-arrow,
.compact-btn{
  color:var(--gold-soft);
}
.current-ref small{
  color:var(--gold-soft);
}

.chapter-chip{
  color:#75818D;
}
.chapter-chip:hover{
  background:#0A213A;
}
.chapter-chip.active{
  background:#0A213A;
  color:var(--gold-soft);
  box-shadow:inset 0 0 0 1px rgba(213,173,85,.18);
}

/* Reader canvas */
.workspace{
  background:transparent;
}

.reader-column{
  background:transparent;
}

.reader{
  position:relative;
}

.eyebrow{
  color:var(--gold);
}

.chapter-title{
  color:#F6F1E7;
}

/* Subtle gold / red accent under chapter heading */
.chapter-title::after{
  content:"";
  display:block;
  width:72px;
  height:1px;
  margin-top:14px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(213,173,85,.85) 25%,
    rgba(213,173,85,.85) 75%,
    transparent
  );
}

.chapter-meta{
  color:var(--muted);
}

/* Verse cards */
.verse{
  margin:0 0 10px;
  padding:10px 12px 10px 46px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:
    linear-gradient(
      90deg,
      rgba(8,24,42,.96) 0%,
      rgba(4,10,17,.96) 100%
    );
  color:#F5EFE4;
  box-shadow:none;
  transition:
    background .12s ease,
    border-color .12s ease,
    box-shadow .12s ease;
}

.verse:hover{
  background:
    linear-gradient(
      90deg,
      #0A213A 0%,
      #06101B 100%
    );
  border-color:rgba(213,173,85,.28);
}

/* Selected/focused verse gets the full gold perimeter */
.verse.focused{
  background:
    linear-gradient(
      90deg,
      #0B2441 0%,
      #06101B 100%
    );
  border-color:rgba(213,173,85,.72);
  box-shadow:
    0 0 0 1px rgba(213,173,85,.07),
    0 16px 34px rgba(0,0,0,.22);
}

.vnum{
  color:var(--gold-soft);
}

.vnum:hover,
.verse.focused .vnum{
  background:rgba(213,173,85,.08);
  color:var(--gold-soft);
}

/* Scripture word interaction */
.word-token.selected{
  color:var(--gold-soft);
  background:rgba(213,173,85,.09);
  box-shadow:inset 0 -1px 0 rgba(213,173,85,.5);
}

@media(hover:hover) and (pointer:fine){
  .word-token:hover{
    color:var(--gold-soft);
    background:rgba(213,173,85,.07);
    box-shadow:inset 0 -1px 0 rgba(213,173,85,.35);
  }
}

.mock-note{
  border:1px dashed rgba(213,173,85,.18);
  background:#06101B;
  color:#7E8B98;
}

/* Mobile reading dock */
.read-dock{
  border:1px solid rgba(213,173,85,.22);
  background:rgba(1,4,7,.96);
  backdrop-filter:blur(18px);
  box-shadow:0 12px 34px rgba(0,0,0,.36);
}
.read-dock button{
  color:#687581;
}
.read-dock .brain-dock{
  background:linear-gradient(180deg,#DDBA61,#B7892D);
  color:#080B0F;
}

/* Study panels */
.study-panel,
.study-inline,
.study-inline.expanded{
  background:
    linear-gradient(
      180deg,
      #0A2139 0%,
      #03070B 48%,
      #020406 100%
    )!important;
  border-color:rgba(213,173,85,.22)!important;
}

.study-head,
.study-inline-head{
  color:#F6F1E7;
  border-bottom:1px solid rgba(213,173,85,.18)!important;
}

.close-btn{
  background:#050B11;
  color:#F6F1E7;
  border:1px solid rgba(255,255,255,.10);
}
.close-btn:hover{
  color:var(--gold-soft);
  border-color:rgba(213,173,85,.4);
}

.study-card,
.word-panel-card{
  border:1px solid rgba(255,255,255,.07);
  background:#06101B;
  color:#F6F1E7;
}

.study-card p{
  color:#8D99A5;
}

.study-actions button{
  border:1px solid rgba(213,173,85,.18);
  background:#07172B;
  color:#F6F1E7;
}
.study-actions button:hover{
  border-color:rgba(213,173,85,.42);
}

.word-panel-top{
  border-bottom-color:rgba(213,173,85,.18);
}
.word-ref,
.word-label{
  color:#929EAB;
}
.word-value{
  color:#F6F1E7;
}
.word-line{
  border-bottom-color:rgba(255,255,255,.06);
}
.original-script{
  color:#F5EFE4;
}

.verse-word-list{
  border-top-color:rgba(213,173,85,.18);
}
.verse-word-list h4{
  color:#F6F1E7;
}
.verse-word-item{
  border:1px solid rgba(255,255,255,.07);
  background:#06101B;
  color:#F6F1E7;
}
.verse-word-item:hover{
  background:#081B30;
  border-color:rgba(213,173,85,.25);
}
.verse-word-item.active{
  background:#0A213A;
  border-color:rgba(213,173,85,.42);
}
.verse-word-strongs{
  color:var(--gold);
}
.verse-word-bottom{
  color:#8D99A5;
}
.verse-word-original{
  color:#F6F1E7;
}

/* Bottom sheets / overlays */
.overlay{
  background:rgba(0,0,0,.72);
}

.nav-sheet,
.word-sheet{
  background:
    linear-gradient(
      180deg,
      #0A2139 0%,
      #03070B 48%,
      #020406 100%
    );
  border-color:rgba(213,173,85,.22);
  box-shadow:0 -20px 60px rgba(0,0,0,.42);
}

.sheet-head,
.word-sheet-head{
  border-bottom:1px solid rgba(213,173,85,.18);
  background:transparent;
  color:#F6F1E7;
}

.sheet-head h2{
  color:#F6F1E7;
}

.book-option,
.chapter-option{
  border:1px solid rgba(255,255,255,.07);
  background:#06101B;
  color:#929EAB;
}

.book-option.active,
.chapter-option.active{
  background:#0A213A;
  border-color:rgba(213,173,85,.42);
  color:var(--gold-soft);
}

/* Search / settings surfaces */
.settings,
.search-help-content{
  background:#06101B!important;
  border:1px solid rgba(213,173,85,.22)!important;
  color:#F6F1E7!important;
  box-shadow:var(--shadow);
}

.search-history{
  color:#929EAB;
}
.search-history button:hover{
  color:var(--gold-soft);
}

.search-help-close:hover{
  background:#081B30;
  color:#F6F1E7;
}
.search-help-content dt{
  color:#F6F1E7;
}
.search-help-content dd{
  color:#929EAB;
}

.setting-row{
  border-bottom-color:rgba(255,255,255,.06);
}
.setting-row span{
  color:#929EAB;
}
.setting-copy small{
  color:#8D99A5;
}
.setting-checkbox{
  accent-color:var(--gold-soft);
}
.setting-group button{
  border:1px solid rgba(213,173,85,.18);
  background:#06101B;
  color:#929EAB;
}
.setting-group button.active{
  background:#0A213A;
  color:var(--gold-soft);
  border-color:rgba(213,173,85,.42);
}

/* Search results */
.search-results{
  color:#F6F1E7;
}
.search-result{
  border-bottom-color:rgba(255,255,255,.07);
}
.search-result strong{
  color:var(--gold-soft);
}
.search-results button{
  border:1px solid rgba(213,173,85,.18);
  background:#06101B;
  color:#F6F1E7;
}

/* BDB + Thayer */
.bdb-section,
.thayer-section{
  border-top-color:rgba(213,173,85,.22)!important;
  color:#F5EFE4;
}

.bdb-section .bdb-article,
.thayer-section .thayer-article{
  border-top-color:rgba(255,255,255,.07)!important;
}

.bdb-section .bdb-context,
.bdb-section .bdb-status,
.bdb-section .bdb-attribution,
.thayer-section .thayer-context,
.thayer-section .thayer-attribution,
.thayer-section .thayer-unavailable{
  color:#8D99A5!important;
}

.thayer-section .thayer-toggle,
.thayer-section .thayer-source-toggle{
  color:var(--gold)!important;
}

.bdb-section .bdb-error,
.thayer-section .thayer-error{
  color:#D86C77!important;
}

/* Scrollbars */
.study-inline-body,
.study-body,
.word-sheet-body,
.sheet-body,
.search-help-content{
  scrollbar-color:#53606C #03070B;
}

/* Maintain same visual family on smaller screens */
@media(max-width:899px){
  .top-shell{
    background:rgba(2,6,11,.96);
  }
}


/* HEADER ALIGNMENT CLEANUP */
.topbar{
  max-width:1600px;
  margin:0 auto;
  padding:12px 24px 10px;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;
  gap:18px;
}

.brand{
  align-self:start;
  min-height:44px;
  display:flex;
  align-items:center;
  padding-top:1px;
}

.search-wrap{
  display:grid;
  grid-template-columns:1fr;
  align-items:start;
}

.search{
  min-height:44px;
  height:44px;
}

.search-wrap .search-icon,
.search-wrap .search-clear{
  top:22px;
}

.search-history,
.search-help{
  margin-left:0;
}

.search-history{
  margin-top:6px;
  min-height:16px;
}

.search-help{
  margin-top:2px;
}

.header-actions{
  align-self:start;
  display:flex;
  align-items:center;
  gap:8px;
}

.icon-btn{
  height:44px;
  min-height:44px;
}

@media(max-width:899px){
  .topbar{
    padding:10px 12px;
    gap:10px;
  }
}



/* Compact Recent search history — all screen sizes */
.recent-searches{
  position:relative;
  width:max-content;
  max-width:100%;
  margin-top:2px;
}

.recent-search-toggle{
  min-height:0;
  padding:4px 0;
  border:0;
  background:none;
  color:#929EAB;
  font:inherit;
  font-size:calc(15px * var(--text-scale));
  line-height:1.25;
  cursor:pointer;
  text-decoration:none;
}

.recent-search-toggle:hover,
.recent-search-toggle:focus-visible,
.recent-search-toggle[aria-expanded="true"]{
  color:var(--gold-soft);
  text-decoration:underline;
  text-underline-offset:3px;
}

.recent-searches .search-history{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:80;

  display:grid;
  gap:2px;

  width:min(340px, calc(100vw - 24px));
  max-height:min(420px, 60vh);
  overflow:auto;
  overscroll-behavior:contain;

  margin:0;
  padding:8px;

  border:1px solid rgba(213,173,85,.22);
  border-radius:10px;

  background:#06101B;
  box-shadow:var(--shadow);
}

.recent-searches .search-history[hidden]{
  display:none!important;
}

.recent-searches .search-history button{
  display:block;
  width:100%;
  min-height:40px;

  margin:0;
  padding:8px 10px;

  border:0;
  border-radius:7px;

  background:transparent;
  color:#F6F1E7;

  font-size:calc(14px * var(--text-scale));
  line-height:1.35;
  text-align:left;

  cursor:pointer;
  white-space:normal;
  overflow-wrap:anywhere;
}

.recent-searches .search-history button:hover,
.recent-searches .search-history button:focus-visible{
  background:#081B30;
  color:var(--gold-soft);
  text-decoration:none;
}

@media(max-width:899px){
  .recent-searches .search-history{
    width:min(320px, calc(100vw - 24px));
  }
}


/* Shared Recent + Search Help row */
.search-meta-row{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:3px;
  min-height:24px;
}

.search-meta-row .recent-searches,
.search-meta-row .search-help{
  margin:0 !important;
}

.search-meta-row .recent-search-toggle,
.search-meta-row .search-help summary{
  padding:4px 0 !important;
  font-family:inherit;
  font-size:calc(15px * var(--text-scale)) !important;
  line-height:1.25 !important;
  color:#929EAB;
}

.search-meta-row .recent-search-toggle:hover,
.search-meta-row .recent-search-toggle:focus-visible,
.search-meta-row .search-help summary:hover,
.search-meta-row .search-help summary:focus-visible{
  color:var(--gold-soft);
}




/* Recent panel uses Search Help close control */
.recent-searches .search-history {
  padding-top: 48px !important;
}

.recent-searches .search-history > .search-help-close {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;

  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;

  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  border: 0 !important;
  border-radius: 8px !important;

  background: transparent !important;
  color: var(--muted) !important;

  font-size: calc(24px * var(--text-scale)) !important;
  line-height: 1 !important;
}

.recent-searches .search-history > .search-help-close:hover,
.recent-searches .search-history > .search-help-close:focus-visible {
  background: #081B30 !important;
  color: #F6F1E7 !important;
}




/* Recent first item shares row with close X */
.recent-searches .search-history {
  padding: 8px 56px 8px 8px !important;
}

.recent-searches .search-history > .search-help-close {
  top: 4px !important;
  right: 4px !important;
}

.recent-searches .search-history > button:not(.search-help-close):first-of-type {
  margin-top: 0 !important;
}




/* Tighten search meta to reference nav spacing */
.search-meta-row {
  margin-bottom: 0 !important;
}

.reference-nav {
  padding-top: 2px !important;
}


/* BOOK / CHAPTER / VERSE NAVIGATION */
.reference-nav{
  max-width:1600px;
  margin:0 auto;
  padding:10px 20px 12px;
  display:grid;
  grid-template-columns:minmax(180px,1.5fr) minmax(130px,.75fr) minmax(130px,.75fr);
  gap:8px;
  background:#02060B;
  border-bottom:1px solid rgba(213,173,85,.18);
}

.reference-select{
  min-width:0;
  min-height:52px;
  padding:7px 13px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  column-gap:10px;
  align-items:center;
  text-align:left;
  border:1px solid rgba(213,173,85,.24);
  border-radius:12px;
  background:#071A2E;
  color:#F6F1E7;
}

.reference-select:hover{
  background:#0A213A;
  border-color:rgba(213,173,85,.48);
}

.reference-select:focus-visible{
  outline:2px solid rgba(242,213,139,.68);
  outline-offset:2px;
}

.reference-label{
  grid-column:1;
  grid-row:1;
  color:#D5AD55;
  font-size:calc(9px * var(--text-scale));
  line-height:1;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.reference-value{
  grid-column:1;
  grid-row:2;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:3px;
  color:#F6F1E7;
  font-size:calc(14px * var(--text-scale));
  font-weight:800;
}

.reference-caret{
  grid-column:2;
  grid-row:1 / span 2;
  color:#F2D58B;
  font-size:calc(11px * var(--text-scale));
}

.legacy-reference-nav{
  display:none!important;
}

@media(max-width:700px){
  .reference-nav{
    padding:8px 10px 10px;
    grid-template-columns:minmax(0,1.35fr) minmax(0,.75fr) minmax(0,.75fr);
    gap:6px;
  }

  .reference-select{
    min-height:48px;
    padding:6px 9px;
    border-radius:10px;
  }

  .reference-label{
    font-size:calc(8px * var(--text-scale));
    letter-spacing:.09em;
  }

  .reference-value{
    font-size:calc(13px * var(--text-scale));
  }
}

@media(max-width:420px){
  .reference-nav{
    grid-template-columns:1fr 1fr;
  }

  #bookSelect{
    grid-column:1 / -1;
  }
}


/* ALIGN BIBLE NAV SHEETS TO TOP */
.nav-sheet{
  top:0;
  bottom:auto;
  max-height:100svh;
  min-height:0;
  border-radius:0 0 22px 22px;
  transform:translateY(-102%);
}

.overlay.open .nav-sheet{
  transform:translateY(0);
}

.sheet-body{
  max-height:calc(100svh - 62px);
  overflow:auto;
}


/* DESKTOP REFERENCE NAV CLEANUP */
@media(min-width:900px){
  .reference-nav{
    max-width:1180px;
    margin:0 auto;
    padding:8px 20px 10px;
    grid-template-columns:minmax(240px,1.4fr) minmax(180px,.8fr) minmax(180px,.8fr);
    gap:8px;
    border-bottom:0;
  }

  .reference-select{
    min-height:44px;
    padding:6px 12px;
    border-radius:10px;
  }

  .reference-label{
    font-size:calc(8px * var(--text-scale));
    letter-spacing:.11em;
  }

  .reference-value{
    margin-top:2px;
    font-size:calc(13px * var(--text-scale));
  }

  .reference-caret{
    font-size:calc(10px * var(--text-scale));
  }
}


/* COMPACT CHAPTER / VERSE PICKER GRID */
.chapter-grid{
  display:grid;
  grid-template-columns:repeat(8,minmax(64px,1fr));
  gap:8px;
}

.chapter-option{
  aspect-ratio:auto;
  min-height:56px;
  height:56px;
  padding:0 10px;
  border-radius:10px;
  font-size:calc(14px * var(--text-scale));
}

@media(max-width:899px){
  .chapter-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
  }

  .chapter-option{
    min-height:52px;
    height:52px;
    border-radius:10px;
  }
}

@media(max-width:560px){
  .chapter-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:7px;
  }

  .chapter-option{
    min-height:48px;
    height:48px;
    padding:0 6px;
    font-size:calc(13px * var(--text-scale));
  }
}


/* CLEAN OT / NT TOGGLE IN BOOK PICKER */
.nav-sheet .segmented{
  background:#03070C;
  border:1px solid rgba(213,173,85,.16);
  padding:3px;
  border-radius:10px;
}

.nav-sheet .segmented button{
  min-width:62px;
  height:38px;
  border-radius:8px;
  background:transparent;
  color:#7F8C99;
  box-shadow:none;
}

.nav-sheet .segmented button.active{
  background:#0A213A;
  color:#F2D58B;
  border:1px solid rgba(213,173,85,.48);
  box-shadow:none;
}


/* STUDY / FLYOUT READABILITY — TRACK SCRIPTURE SIZE */
.word-panel-body,
.study-body,
.study-inline-body,
.word-sheet-body{
  font-size:calc(var(--reader-size) * .85);
  line-height:1.55;
}

.word-value,
.word-empty,
.verse-word-bottom,
.verse-word-original,
.bdb-section .bdb-article,
.thayer-section .thayer-article,
.thayer-section .thayer-line{
  font-size:calc(var(--reader-size) * .85)!important;
  line-height:1.6;
}

.word-english{
  font-size:calc(var(--reader-size) * 1.25);
}

.word-ref,
.word-label,
.verse-word-strongs,
.bdb-section .bdb-context,
.bdb-section .bdb-status,
.bdb-section .bdb-attribution,
.thayer-section .thayer-context,
.thayer-section .thayer-attribution,
.thayer-section .thayer-unavailable{
  font-size:calc(var(--reader-size) * .65)!important;
}

.verse-word-english,
.bdb-section h5,
.thayer-section h5{
  font-size:calc(var(--reader-size) * .78)!important;
}

.bdb-section h4,
.word-study-heading{
  font-size:calc(var(--reader-size) * .72)!important;
}

.thayer-section .thayer-toggle,
.thayer-section .thayer-source-toggle{
  font-size:calc(var(--reader-size) * .7)!important;
}


/* RICHER GOLD KJV BADGE */
.logo,
.compact-logo{
  color:#8B6728!important;
  border-color:#503812!important;
  background:rgba(80,56,18,.12)!important;
}


/* SEARCH FIELD — WARM OFF-WHITE BORDER */
.search{
  border-color:rgba(216,210,196,.55)!important;
}

.search:focus-within{
  border-color:#D8D2C4!important;
  box-shadow:0 0 0 1px rgba(216,210,196,.18)!important;
}


/* REFERENCE CONTROLS — WHITE RESTING / GOLD HOVER */
.reference-select{
  border-color:rgba(216,210,196,.60)!important;
}

.reference-select:hover,
.reference-select:focus-visible{
  border-color:#D5AD55!important;
  box-shadow:0 0 0 1px rgba(213,173,85,.18)!important;
}


/* MOBILE DOCK PREV / NEXT PRESS FEEDBACK */
#dockPrev,
#dockNext{
  transition:
    background .10s ease,
    color .10s ease,
    border-color .10s ease,
    transform .08s ease,
    box-shadow .10s ease;
}

#dockPrev:hover,
#dockNext:hover{
  color:#F2D58B;
  border-color:rgba(213,173,85,.55);
}

#dockPrev:active,
#dockNext:active,
#dockPrev.is-pressed,
#dockNext.is-pressed{
  background:#D5AD55!important;
  color:#020406!important;
  border-color:#D5AD55!important;
  box-shadow:0 0 0 1px rgba(213,173,85,.20)!important;
  transform:scale(.97);
}


/* MOBILE DOCK — LARGER PREV / NEXT TAP TARGETS */
@media(max-width:899px){
  .bottom-dock{
    display:grid;
    grid-template-columns:minmax(92px,1fr) minmax(110px,1.15fr) minmax(92px,1fr);
    gap:8px;
  }

  #dockPrev,
  #dockNext{
    color:#F2D58B;
    border-color:#D5AD55;
    background:#06101B;
    min-width:92px;
    min-height:48px;
    padding:0 16px;
  }

  #dockPrev:active,
  #dockNext:active,
  #dockPrev.is-pressed,
  #dockNext.is-pressed{
    background:#06101B!important;
    color:#F2D58B!important;
  }

  #dockSearch{
    min-height:48px;
  }
}

@media(max-width:420px){
  .bottom-dock{
    grid-template-columns:minmax(84px,1fr) minmax(104px,1.15fr) minmax(84px,1fr);
    gap:6px;
  }

  #dockPrev,
  #dockNext{
    min-width:84px;
    padding:0 12px;
  }
}


/* MOBILE DOCK — REDUCE HEIGHT */
@media(max-width:899px){
  .bottom-dock{
    padding-top:5px;
    padding-bottom:5px;
  }

  #dockPrev,
  #dockSearch,
  #dockNext{
    min-height:40px!important;
    height:40px!important;
  }
}


/* KJV-BRAIN-STUDY-BOTTOM-CLOSE */


/* Study panel footer: a real flex row in the panel column, never inside the
   scroller, so the bottom Close cannot scroll out of reach. */
.study-bottom-actions{
  flex:0 0 auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:10px 18px;
  border-top:1px solid rgba(213,173,85,.18);
  background:#06101B;
}




.study-bottom-close{
  min-width:auto;
  min-height:44px;
  padding:0 14px;
  border:1px solid rgba(213,173,85,.55);
  border-radius:8px;
  background:rgba(5,11,17,.92);
  color:#F2D58B;
  font:inherit;
  font-size:.82em;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
  backdrop-filter:blur(4px);
}


.study-bottom-close:hover,
.study-bottom-close:focus-visible{
  border-color:#F2D58B;
  background:#0A2139;
  outline:none;
}




/* Brain flyout Add note shortcut */
.study-head {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.study-head > strong {
  justify-self: start;
}

.study-head > .close-btn {
  justify-self: end;
}

.study-add-note {
  justify-self: center;

  min-height: 36px;
  padding: 6px 14px;

  border: 1px solid rgba(213,173,85,.38);
  border-radius: 9px;

  background: #071A2E;
  color: #F2D58B;

  font: inherit;
  font-size: calc(14px * var(--text-scale));
  font-weight: 600;
  line-height: 1;

  cursor: pointer;
}

.study-add-note:hover,
.study-add-note:focus-visible {
  border-color: #F2D58B;
  background: #0A213A;
  outline: none;
}




/* Brain Add note shortcut — all panel sizes */
.study-inline-head {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.study-inline-head > strong {
  justify-self: start;
}

.study-inline-head > .study-add-note {
  justify-self: center;
}

.study-inline-head > .study-inline-actions {
  justify-self: end;
}




/* Brain header always sticky */
.study-head,
.study-inline-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  flex: 0 0 auto !important;
  background: #06101B !important;
  isolation: isolate;
}




/* Full-height Brain flyout on all non-desktop sizes */
@media(max-width:899px){
  .study-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;

    height: 100dvh !important;
    max-height: 100dvh !important;

    margin: 0 !important;
    padding-top: env(safe-area-inset-top) !important;

    overflow: hidden !important;
  }

  .study-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}


/* KJV-BRAIN-MOBILE-STUDY-SCROLL-LOCK */
/* Backdrop for the mobile Brain flyout: keeps the exposed strip of Scripture
   behind the panel non-interactive. Sits below .study-panel (95) and below the
   word overlay (94). Only shown at the mobile flyout breakpoint. */
.study-scrim{
  display:none;
  position:fixed;
  inset:0;
  z-index:93;
  background:rgba(2,6,11,.42);
}

@media(max-width:899px){
  /* The panel is sized by the base fixed inset (top/bottom:0), which tracks the
     visual viewport on iOS. No 100dvh / top / bottom overrides. */
  .study-panel {
    overflow: hidden;
    overscroll-behavior: contain;
  }

  /* The single vertical scroller in the panel column. */
  .study-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .study-bottom-actions {
    padding: 0 14px calc(10px + env(safe-area-inset-bottom));
  }

  .study-panel.open ~ .study-scrim {
    display: block;
  }
}


/* KJV-BRAIN-VERSE-SHARING */
.verse-share-active{
  position:relative;
  background:rgba(213,173,85,.16)!important;
  outline:2px solid rgba(213,173,85,.7);
  outline-offset:3px;
  border-radius:6px;
}

.verse-share-menu{
  position:fixed;
  z-index:140;
  min-width:190px;
  padding:6px;
  border:1px solid rgba(213,173,85,.42);
  border-radius:11px;
  background:#06101B;
  box-shadow:0 12px 34px rgba(0,0,0,.38);
}

.verse-share-menu button{
  width:100%;
  min-height:44px;
  padding:11px 14px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#F2D58B;
  text-align:left;
  font-weight:700;
}

.verse-share-menu button + button{
  margin-top:10px;
}

.verse-share-menu button:hover,
.verse-share-menu button:focus-visible{
  background:#0A2139;
}

.verse-share-toast{
  position:fixed;
  z-index:145;
  left:50%;
  bottom:calc(86px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  padding:9px 14px;
  border:1px solid rgba(213,173,85,.5);
  border-radius:999px;
  background:#06101B;
  color:#F2D58B;
  font-size:14px;
  font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  pointer-events:none;
}

[id^="v"]{
  -webkit-touch-callout:none;
}

@media(hover:none) and (pointer:coarse){
  [id^="v"]{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
  }
}

.verse-share-range{
  background:rgba(213,173,85,.12)!important;
  border-radius:6px;
}

.verse-share-range-start,
.verse-share-range-end{
  outline:2px solid rgba(213,173,85,.7);
  outline-offset:3px;
}

.verse-share-range-bar{
  position:fixed;
  z-index:143;
  left:50%;
  bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:calc(100vw - 24px);
  min-height:52px;
  padding:8px 10px 8px 14px;
  border:1px solid rgba(213,173,85,.48);
  border-radius:14px;
  background:#06101B;
  box-shadow:0 12px 34px rgba(0,0,0,.42);
}

.verse-share-range-label{
  color:#F2D58B;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}

.verse-share-range-actions{
  display:flex;
  gap:6px;
}

.verse-share-range-bar button{
  min-height:40px;
  padding:7px 11px;
  border:1px solid rgba(213,173,85,.35);
  border-radius:9px;
  background:#0A2139;
  color:#F2D58B;
  font-weight:700;
}

.verse-share-range-bar button:hover,
.verse-share-range-bar button:focus-visible{
  background:#10304F;
}

@media(max-width:520px){
  .verse-share-range-bar{
    width:calc(100vw - 24px);
    justify-content:space-between;
  }

  .verse-share-range-label{
    white-space:normal;
  }
}



/* Universal text selection */
::selection {
  background: #D5AD55;
  color: #081426;
}

::-moz-selection {
  background: #D5AD55;
  color: #081426;
}



/* KJV Brain footer */
.site-footer {
  margin-top: 48px;
  background: #02060B;
}

.site-footer-inner {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 18px 0 12px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-bottom: 1px solid rgba(213,173,85,.28);

  color: #8794A1;
  font-size: calc(12px * var(--text-scale));
}

.site-version::before {
  content: var(--app-version);
}

@media(max-width:560px){
  .site-footer {
    margin-top: 36px;
  }

  .site-footer-inner {
    width: calc(100% - 28px);
    padding: 16px 0 10px;
  }
}

/* Non-desktop footer clearance for bottom navigation */
@media(max-width:899px){
  .site-footer {
    padding-bottom: calc(78px + var(--safe-bottom));
  }
}

@media(max-width:899px){
  #dockPrev,
  #dockNext {
    transition:
      transform 120ms ease,
      background-color 120ms ease,
      border-color 120ms ease,
      box-shadow 120ms ease;
  }

  #dockPrev:active,
  #dockNext:active {
    transform: translateY(2px) scale(0.98);
    background: #0b2441 !important;
    border-color: #f2d58b !important;
    box-shadow:
      0 0 0 2px rgba(242, 213, 139, 0.22),
      0 3px 10px rgba(0, 0, 0, 0.30) !important;
    color: #f2d58b !important;
  }
}

/* ======================================================================
   Offline V1 Step 7 — connectivity, sync, and offline-resource status UX
   (prototypes/offline-status.js). Additive only: nothing above this point
   is modified. The header button reuses .icon-btn (defined above, with its
   own light/desktop-dark and mobile-compact responsive rules already) so
   this section only adds what .icon-btn does not already provide.
   ====================================================================== */
.offline-status-btn{
  display:inline-flex;align-items:center;
  font-size:calc(11px * var(--text-scale));
}

.account-sync-panel{
  margin-top:24px;padding-top:24px;border-top:1px solid var(--line);
  max-width:620px;
}
.account-sync-panel h4{
  margin:0 0 10px;font-size:calc(14px * var(--text-scale));font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink);
}
.account-sync-panel h4 + h4{margin-top:26px}
.sync-status-line{
  margin:0;font-size:calc(13px * var(--text-scale));font-weight:700;color:var(--ink);
}
.sync-status-line[data-state="synced"]{color:#34A65B}
.sync-status-line[data-state="saved-local"]{color:#6FA98C}
.sync-status-line[data-state="waiting"]{color:var(--gold)}
.sync-status-line[data-state="attention"]{color:#B3261E}
.sync-detail-line{
  margin:4px 0 0;font-size:calc(12px * var(--text-scale));color:var(--muted);line-height:1.5;
}
.sync-retry-btn{
  margin-top:10px;min-height:44px;padding:0 18px;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  color:#3F3E39;font-weight:800;font-size:calc(13px * var(--text-scale));cursor:pointer;
}
.sync-retry-btn:hover{background:#FBFAF7}
.sync-retry-btn:disabled{opacity:.6;cursor:default}

.resource-status-list{
  list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;
}
.resource-status-item{
  display:flex;justify-content:space-between;align-items:center;gap:16px;min-width:0;
  padding:11px 0;
}
.resource-summary{display:flex;flex-direction:column;gap:3px;min-width:0}
.resource-status-item .resource-name{color:var(--ink);font-weight:700;font-size:calc(15px * var(--text-scale));line-height:1.3}
.resource-status-item .resource-state{color:var(--muted);line-height:1.4;font-size:calc(13px * var(--text-scale))}
.resource-status-item[data-available="true"] .resource-state{color:#2A6B45;font-weight:600}
.resource-progress-bar{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  display:block;width:100%;height:6px;border:0;border-radius:4px;margin-top:4px;
  background:var(--navy-soft);overflow:hidden;
}
.resource-progress-bar::-webkit-progress-bar{background:var(--navy-soft);border-radius:4px}
.resource-progress-bar::-webkit-progress-value{background:var(--navy);border-radius:4px}
.resource-progress-bar::-moz-progress-bar{background:var(--navy);border-radius:4px}
.resource-status-item[data-resource="strongs"]{padding-bottom:19px;border-bottom:1px solid var(--line)}
.resource-download-btn{
  flex:none;min-height:44px;min-width:140px;max-width:170px;padding:8px 14px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:#3F3E39;font:800 calc(12px * var(--text-scale))/1.3 inherit;
  cursor:pointer;white-space:normal;text-align:center;
}
.resource-download-btn:hover{background:#FBFAF7}
.resource-download-btn:disabled{opacity:.6;cursor:default}
.download-all-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.offline-download-all-btn{margin-top:0}
.offline-download-size{flex:none;color:var(--muted);font-size:calc(12px * var(--text-scale))}
.offline-download-status{margin-bottom:4px}
.offline-search-note{margin-top:10px}

@media(hover:none) and (pointer:coarse){
  .sync-retry-btn,.resource-download-btn{min-height:44px}
}
@media(max-width:420px){
  .resource-status-item{align-items:stretch;flex-direction:column;gap:6px}
  .resource-download-btn{width:100%;max-width:none}
  .download-all-row{align-items:flex-start;flex-direction:column;gap:6px}
  .offline-download-all-btn{width:100%}
}


/* Center KJV source credit */
.kjv-source-credit-text {
  display: block;
  width: 100%;
  text-align: center;
}

/* Search status and clarification choices */
.ai-search-status{
  margin:6px 0 0;
  color:var(--gold-soft);
  font-size:calc(14px * var(--text-scale));
  line-height:1.5;
  overflow-wrap:anywhere;
}
.ai-search-choices{
  list-style:none;
  margin:12px 0;
  padding:0;
  display:grid;
  gap:10px;
}
.ai-search-choices[hidden]{display:none}
.ai-search-choices button{
  display:block;
  width:100%;
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.5;
}

/* Super Intelligence: refine the current Search results */
.super-intelligence{
  margin:16px 0;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:13px;
  min-width:0;
}
.super-intelligence[hidden]{display:none}
.search-results .super-intelligence h2{
  margin:0 0 6px;
  font-size:calc(17px * var(--text-scale));
  line-height:1.4;
  color:var(--gold-soft);
}
.search-results .super-intelligence p{margin:6px 0}
.super-intelligence-context{font-weight:700;font-size:calc(15px * var(--text-scale))}
.super-intelligence-status,.super-intelligence-summary{
  font-size:calc(15px * var(--text-scale));
  line-height:1.5;
  overflow-wrap:anywhere;
}
.super-intelligence-status:empty{display:none}
/* Subtle whole-message pulse each time the "Refining..." dot count changes. */
.super-intelligence-status.si-pulse,
.ai-search-pending.si-pulse{animation:si-status-pulse .35s ease-out}
@keyframes si-status-pulse{0%{opacity:.45}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .super-intelligence-status.si-pulse,
  .ai-search-pending.si-pulse{animation:none}
}
.super-intelligence-form{display:flex;gap:8px;align-items:stretch;margin:10px 0}
.super-intelligence-input{
  flex:1 1 auto;
  min-width:0;
  min-height:44px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:max(16px,calc(15px * var(--text-scale)));
}
.super-intelligence-input:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
.search-results .super-intelligence button{
  min-height:44px;
  font:inherit;
  font-size:calc(15px * var(--text-scale));
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:left;
}
.search-results .super-intelligence button:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
.search-results .super-intelligence button:disabled,
.super-intelligence-input:disabled{opacity:.55;cursor:not-allowed}
/* Two explicit actions for the one input: Refine Results (primary, also the Enter action) and New Search (secondary). */
.super-intelligence-submit{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.search-results .super-intelligence .super-intelligence-refine,
.search-results .super-intelligence .super-intelligence-new{
  flex:1 1 auto;
  padding:0 18px;
  font-weight:800;
  text-align:center;
}
.search-results .super-intelligence .super-intelligence-refine{
  border:1px solid var(--gold);
  background:var(--gold);
  color:#02060B;
}
.search-results .super-intelligence .super-intelligence-new{
  border:1px solid var(--gold-soft);
  background:transparent;
  color:inherit;
}
.super-intelligence-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
/* Secondary buttons keep a clear button outline (including when disabled) and stay quieter than Ask. */
.search-results .super-intelligence .super-intelligence-actions button{
  border:1px solid var(--gold-soft);
  background:transparent;
  color:inherit;
  text-align:center;
}
.search-results .super-intelligence .super-intelligence-actions button:disabled{opacity:.5}
/* Screen-reader-only text (the Super Intelligence announcement region): present in the accessibility tree,
   invisible and out of layout. */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}
@media(max-width:560px){
  .super-intelligence{padding:12px}
  .super-intelligence-form{flex-direction:column}
  .super-intelligence-submit{width:100%}
  .search-results .super-intelligence .super-intelligence-refine,
  .search-results .super-intelligence .super-intelligence-new{flex:1 1 140px;min-width:0}
  /* Secondary controls sit side by side under the full-width Ask; targets stay >=44px. */
  .super-intelligence-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .search-results .super-intelligence .super-intelligence-actions button{min-width:0;padding:8px 10px;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .super-intelligence,.super-intelligence *{transition:none;animation:none}
}

/* The approved spectrum, written once (twice across a 200% tile for a seamless loop) and shared by the
   results-page panel ring and the main Search ring. */
:root{--iridescent-ring:linear-gradient(115deg,#D5AD55,#E8863A,#D0489A,#8B5CF6,#3E84E8,#2FC2B0,#D5AD55,#E8863A,#D0489A,#8B5CF6,#3E84E8,#2FC2B0,#D5AD55);}
/* Super Intelligence visual polish: calm dark/gold at rest, a thin iridescent edge when engaged.
   Decorative only: pure CSS, no markup/JS, no layout change (the edge is an overlay on the
   existing 1px border), pointer-events:none, never the only focus indication. */
.super-intelligence{
  position:relative;
  background:linear-gradient(180deg,rgba(213,173,85,.05),rgba(213,173,85,0) 65%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 10px rgba(213,173,85,.07);
  transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.super-intelligence::before{
  content:none;
  position:absolute;
  inset:-1px;
  padding:1px;
  border-radius:13px;
  pointer-events:none;
  opacity:.62;
  transition:opacity .4s ease;
  /* One layer: the approved spectrum written twice across a 200% tile, so one full spectrum is
     always visible across the edge and a one-box-width drift loops seamlessly. */
  background:var(--iridescent-ring);
  background-size:200% 100%;
}
/* The ring needs mask-composite; without it nothing is drawn (never a filled overlay). */
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .super-intelligence::before{
    content:"";
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  }
}
.super-intelligence:focus-within{
  border-color:var(--gold-soft);
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 20px rgba(213,173,85,.14),0 0 26px rgba(139,92,246,.10);
}
.super-intelligence:focus-within::before{
  opacity:.95;
  animation:super-intelligence-drift 10s linear infinite;
}
@keyframes super-intelligence-drift{
  from{background-position:0% 50%}
  to{background-position:100% 50%}
}
/* Refinement pending (class set only while a refinement is in flight): the existing ring drifts slowly,
   a thin decorative ring spins beside the status text, and the input border breathes. Reduced motion
   gets none of it (the static "Refining..." text remains). */
.super-intelligence.si-pending::before{
  opacity:.95;
  animation:super-intelligence-drift 7s linear infinite;
}
.super-intelligence.si-pending .super-intelligence-status::before{
  content:"";
  display:inline-block;
  box-sizing:border-box;
  width:.9em;
  height:.9em;
  margin-right:.55em;
  vertical-align:-.1em;
  border:2px solid rgba(213,173,85,.28);
  border-top-color:var(--gold-soft);
  border-radius:50%;
  animation:si-spinner-rotate 1s linear infinite;
}
.super-intelligence.si-pending .super-intelligence-input{
  animation:si-input-sheen 2.4s ease-in-out infinite;
}
/* Main Search pending (#aiSearchProgress, aria-hidden twin of the live #aiSearchStatus): the same gold spinner as the
   results panel, and the Search field's iridescent border drifts at the panel's pending speed. Reduced motion gets
   the static dots only. */
.ai-search-pending::before{
  content:"";
  display:inline-block;
  box-sizing:border-box;
  width:.9em;
  height:.9em;
  margin-right:.55em;
  vertical-align:-.1em;
  border:2px solid rgba(213,173,85,.28);
  border-top-color:var(--gold-soft);
  border-radius:50%;
  animation:si-spinner-rotate 1s linear infinite;
}
.ai-search-pending[hidden]{display:none}
@keyframes si-spinner-rotate{to{transform:rotate(360deg)}}
@keyframes si-input-sheen{
  0%,100%{border-color:var(--line);box-shadow:0 0 0 rgba(213,173,85,0)}
  50%{border-color:rgba(242,213,139,.6);box-shadow:0 0 8px rgba(213,173,85,.16)}
}
@media(prefers-reduced-motion:reduce){
  .super-intelligence.si-pending::before,
  .super-intelligence.si-pending .super-intelligence-input{animation:none}
  .super-intelligence.si-pending .super-intelligence-status::before{content:none;animation:none}
}
.super-intelligence:focus-within h2{text-shadow:0 0 14px rgba(242,213,139,.30)}
.super-intelligence-input:focus-visible{
  border-color:var(--gold-soft);
  box-shadow:0 0 0 3px rgba(213,173,85,.16),0 0 16px rgba(139,92,246,.14);
}
.super-intelligence:focus-within .super-intelligence-refine:not(:disabled){box-shadow:0 0 14px rgba(213,173,85,.30)}
@media(min-width:700px){
  /* Scale only where there is ample side padding; narrow screens get lift and glow only. */
  .super-intelligence:focus-within{transform:translateY(-1px) scale(1.004)}
}
@media(max-width:560px){
  .super-intelligence:focus-within{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 14px rgba(213,173,85,.14)}
}
@media(prefers-reduced-motion:reduce){
  .super-intelligence,.super-intelligence::before,.super-intelligence:focus-within::before{transition:none;animation:none}
  .super-intelligence:focus-within{transform:none}
}

/* Search action button */
.search-wrap{grid-template-columns:minmax(0,1fr) auto;column-gap:8px}
.search-wrap > *{grid-column:1 / -1}
.search-wrap > .search{grid-column:1}
.search-wrap > .search-action{grid-column:2;grid-row:1}
/* One appearance for Search and Ask (only the label differs; nothing here depends on the mode):
   dark navy with a warm gold tint, a thin gold border, gold/cream text and soft depth. */
.search-action{
  min-height:44px;
  padding:0 16px;
  border:1px solid var(--gold);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(213,173,85,.20),rgba(213,173,85,.07)),#071A2E;
  color:var(--gold-soft);
  font:inherit;
  font-size:calc(15px * var(--text-scale));
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.30),inset 0 1px 0 rgba(242,213,139,.14);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.search-action:focus-visible{
  outline:2px solid var(--gold-soft);
  outline-offset:2px;
  border-color:var(--gold-soft);
  background:linear-gradient(180deg,rgba(213,173,85,.30),rgba(213,173,85,.12)),#0B2038;
  box-shadow:0 3px 12px rgba(0,0,0,.32),0 0 14px rgba(213,173,85,.22),0 0 20px rgba(120,110,240,.08);
}
@media(hover:hover){
  .search-action:hover{
    border-color:var(--gold-soft);
    background:linear-gradient(180deg,rgba(213,173,85,.30),rgba(213,173,85,.12)),#0B2038;
    box-shadow:0 3px 12px rgba(0,0,0,.32),0 0 14px rgba(213,173,85,.22),0 0 20px rgba(120,110,240,.08);
  }
}
.search-action:active{
  background:linear-gradient(180deg,rgba(213,173,85,.12),rgba(213,173,85,.05)),#050F1C;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45);
}
@media(prefers-reduced-motion:reduce){
  .search-action{transition:none}
}
@media(max-width:599px){
  .search-wrap > .search-action{grid-column:1;grid-row:auto;width:100%;margin-top:6px}
}

/* Main header Search: dark + gold with a faint cool accent. Presentation only; the
   iridescent ring belongs to the results-page Super Intelligence panel and is not used here.
   Overrides use !important only where earlier header rules already do. */
/* Phones: identity row on top (brand left, account right), then the Search form full width. */
@media(max-width:599px){
  .topbar{row-gap:8px}
  .topbar > .brand{grid-column:1;grid-row:1}
  .topbar > .header-actions{grid-column:3;grid-row:1}
  .topbar > .search-wrap{grid-column:1 / -1;grid-row:2}
}
/* The Search INPUT owns its iridescent border: a transparent 1px border with the shared spectrum
   painted behind it (border-box), the field's own navy fill on top of it (padding-box), and a
   translucent navy veil between them that dims the spectrum at rest. The border therefore follows
   the field's own 13px corners exactly; there is no overlay, no pseudo-element and no extra box.
   Calmer than the results panel at rest; on input focus the veil is removed (brighter edge). */
.search-wrap .search{
  border-color:transparent!important;
  background-color:#071A2E;
  background-image:
    linear-gradient(#071A2E,#071A2E),
    linear-gradient(rgba(7,26,46,.34),rgba(7,26,46,.34)),
    var(--iridescent-ring);
  background-origin:padding-box,border-box,border-box;
  background-clip:padding-box,border-box,border-box;
  background-size:100% 100%,100% 100%,200% 100%;
  background-repeat:no-repeat,no-repeat,repeat-x;
  box-shadow:0 3px 10px rgba(0,0,0,.28)!important;
}
/* Powered up only by focus in the Search field itself (not Recent / Search Help). Same slow drift
   as the results panel; it moves the spectrum layer only (the two 100% layers cannot move). The
   existing 2px gold focus outline is kept for keyboard visibility. */
.search-wrap .search:focus{
  border-color:transparent!important;
  background-image:
    linear-gradient(#071A2E,#071A2E),
    linear-gradient(rgba(7,26,46,0),rgba(7,26,46,0)),
    var(--iridescent-ring);
  box-shadow:0 0 14px rgba(213,173,85,.12),0 0 20px rgba(120,110,240,.08)!important;
  animation:super-intelligence-drift 10s linear infinite;
}
/* Pending Main Search: the field's spectrum edge is shown at full strength and drifts like the results panel's. */
.search-wrap.ai-pending .search{
  background-image:
    linear-gradient(#071A2E,#071A2E),
    linear-gradient(rgba(7,26,46,0),rgba(7,26,46,0)),
    var(--iridescent-ring);
  animation:super-intelligence-drift 7s linear infinite;
}
@media(prefers-reduced-motion:reduce){
  .search-wrap .search:focus,
  .search-wrap.ai-pending .search{animation:none}
  .ai-search-pending::before{content:none;animation:none}
}

/* Full Search results mode (class set from app.js while the results-page Super Intelligence panel,
   or a Search-all handoff, is active): that panel is the Search interface, so the normal Search
   field, Search/Ask, Recent, Search Help and Book/Chapter/Verse are removed. display:none keeps
   them out of the tab order and the accessibility tree and leaves no spacer, divider or margin.
   Brand and account controls (and the shell itself) are untouched. */
.top-shell.search-results-open .search-wrap,
.top-shell.search-results-open .reference-nav{display:none}
/* In that mode the controls that only scroll to / focus the hidden Search field, and the chapter controls
   that would move the hidden reader, are inert, and look it. */
#compactSearch:disabled,
#dockSearch:disabled,
#dockPrev:disabled,
#dockNext:disabled,
#compactPrev:disabled,
#compactNext:disabled,
#prevMobile:disabled,
#nextMobile:disabled{opacity:.45;cursor:default}

/* Phones: KJV | Search input | Sign In on the first row, the Search/Ask button directly under the
   input. The form joins the top bar's three column tracks (subgrid) so its input sits in the middle
   track, between the brand and the account control, and the button uses that same track. The brand and
   account control sit above the form's empty side cells (z-index) so they stay tappable. Browsers
   without subgrid keep the stacked layout above. */
@media(max-width:599px){
  @supports (grid-template-columns:subgrid){
    .topbar > .search-wrap{grid-row:1;grid-template-columns:subgrid}
    .topbar > .brand,.topbar > .header-actions{position:relative;z-index:1}
    .search-wrap > .search{grid-column:2;grid-row:1}
    /* The icon and clear button are positioned against the input's own track, not the whole form. */
    .search-wrap > .search-icon,.search-wrap > .search-clear{grid-column:2;grid-row:1}
    /* Search/Ask sits directly under the input: the same middle track, same width. */
    .search-wrap > .search-action{grid-column:2;grid-row:2;width:100%;justify-self:stretch}
  }
}

/* Phones, full-results mode: app.js moves the existing Back to reader button into the top bar's
   middle track (brand | Back to reader | account). It keeps the look it has in the results section,
   which no longer applies once it leaves that container. 600px and up are untouched. */
@media(max-width:599px){
  .topbar > #closeResults{
    grid-column:2;
    grid-row:1;
    justify-self:center;
    align-self:start;
    min-height:44px;
    padding:8px 14px;
    border:1px solid rgba(213,173,85,.18);
    border-radius:8px;
    background:#06101B;
    color:#F6F1E7;
    font:inherit;
    font-size:calc(15px * var(--text-scale));
    white-space:nowrap;
    cursor:pointer;
  }
}

/* Push-to-talk microphone (main Search and results Super Intelligence share these rules).
   The mic lives INSIDE a dedicated field container (.search-field / .super-intelligence-field) that
   wraps only the text input and its in-field controls; that container is the positioning context, so
   the mic tracks the input's own box and can never land on the Search / Ask button, which stays outside.
   The button is hidden unless the browser supports speech recognition (app.js adds .has-voice to the
   form only then), so unsupported browsers keep the original padding. Presentation only. */
.search-wrap > .search-field{grid-column:1;grid-row:1;position:relative;min-width:0}
.search-field > .search{display:block}
.search-field > .search-icon,
.search-field > .search-clear,
.search-field > .voice-search-btn{top:50%}
.super-intelligence-field{position:relative;flex:1 1 auto;min-width:0;display:flex}
.super-intelligence-field > .super-intelligence-input{width:100%}
/* Inside the results panel the generic ".search-results button" / ".search-results .super-intelligence
   button" rules (bordered, navy-filled, padded, higher specificity) would otherwise turn this mic into a
   boxed button. Every shared mic rule below is therefore ALSO selected through that scope, with the same declarations, so main and Super Intelligence render one component. */
.voice-search-btn,
.search-results .super-intelligence button.voice-search-btn{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;
  border:0;border-radius:8px;background:transparent;
  color:#8D99A5;cursor:pointer;
}
.voice-search-btn[hidden],
.search-results .super-intelligence button.voice-search-btn[hidden]{display:none}
.voice-search-icon{
  width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;
}
.voice-search-btn:focus-visible,
.search-results .super-intelligence button.voice-search-btn:focus-visible{
  outline:2px solid var(--gold-soft);
  outline-offset:-4px;
  color:var(--gold-soft);
}
@media(hover:hover){
  .voice-search-btn:hover,
  .search-results .super-intelligence button.voice-search-btn:hover{color:var(--gold-soft)}
}
/* Listening: brighter gold, a FILLED microphone body (shape change, not color alone) and a soft
   local glow. aria-pressed / the Stop label carry the state for assistive technology. */
.voice-search-btn.listening,
.search-results .super-intelligence button.voice-search-btn.listening{color:var(--gold-soft)}
.voice-search-btn.listening .voice-search-icon rect{fill:currentColor}
.voice-search-btn.listening .voice-search-icon{
  filter:drop-shadow(0 0 5px rgba(242,213,139,.55));
  animation:voice-listening-glow 2.6s ease-in-out infinite;
}
@keyframes voice-listening-glow{
  0%,100%{opacity:1}
  50%{opacity:.72}
}
@media(prefers-reduced-motion:reduce){
  .voice-search-btn.listening .voice-search-icon{animation:none}
}
/* Inside the field: [clear X][mic], mic farthest right. Padding reserves room for them. */
.search-wrap.has-voice .search-field > .search-clear{right:44px;width:28px}
.search-wrap.has-voice .search{padding-right:46px}
.search-wrap.has-voice:has(.search-clear.show) .search{padding-right:76px}
.super-intelligence-form.has-voice .super-intelligence-input{padding-right:46px}
.voice-search-status{
  margin:6px 0 0;
  color:var(--gold-soft);
  font-size:calc(14px * var(--text-scale));
  line-height:1.5;
  overflow-wrap:anywhere;
}
.voice-search-status[hidden]{display:none}
/* Phones: the field container takes the input's middle track (brand | field | account); the Search
   button stays directly under it in that same track. */
@media(max-width:599px){
  @supports (grid-template-columns:subgrid){
    .search-wrap > .search-field{grid-column:2;grid-row:1}
  }
}

/* Results filter (below the Super Intelligence panel): All / Old Testament / New Testament and the
   book chips. A local view filter, kept visually secondary to the panel: dark and gold, no
   iridescence. Real buttons that wrap naturally; the selected state is marked by a check mark and a
   heavier weight as well as colour (and aria-pressed). */
.results-filter{margin:14px 0}
.results-filter[hidden]{display:none}
.results-filter-testaments,.results-filter-books,.results-filter-actions{display:flex;flex-wrap:wrap;gap:8px}
.results-filter-headrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin:14px 0 8px}
.results-filter-heading{margin:0;font-weight:700;font-size:calc(15px * var(--text-scale));color:var(--gold-soft)}
.results-filter-actions{margin-top:10px}
.results-filter-empty{margin:14px 0 0;font-size:calc(15px * var(--text-scale));color:var(--muted)}
.search-results .results-filter button{
  min-height:44px;
  padding:8px 14px;
  border:1px solid rgba(213,173,85,.28);
  border-radius:10px;
  background:#06101B;
  color:#F6F1E7;
  font:inherit;
  font-size:calc(15px * var(--text-scale));
  line-height:1.3;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
  cursor:pointer;
}
.search-results .results-filter button[aria-pressed="true"]{
  border-color:var(--gold-soft);
  background:rgba(213,173,85,.16);
  font-weight:800;
}
.search-results .results-filter button[aria-pressed="true"]::before{content:"\2713\00a0"}
.search-results .results-filter button:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
/* Clear Filter is a real button styled as a quiet text action (not another chip). */
.search-results .results-filter .results-filter-clear{
  min-height:44px;
  padding:8px 4px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--gold-soft);
  font-weight:600;
  text-decoration:none;
}
.search-results .results-filter .results-filter-clear:hover,
.search-results .results-filter .results-filter-clear:focus-visible{text-decoration:underline}

/* The top bar is a three-track grid (brand | flexible middle | account). The brand and the account
   control are placed in their tracks explicitly so the account control stays at the far right at every
   width and state. Without this, hiding the Search form (full-results mode) let auto-placement move the
   account control into the flexible middle track, next to the brand. */
.topbar > .brand{grid-column:1}
.topbar > .header-actions{grid-column:3;justify-self:end}