/* ============================================================
   SVREAD — Scaife mirror. Tokens lifted from scaife-viewer
   (MIT, PerseusDL) + gita-quotes skeleton (MIT).
   --sa-size / --measure change with the TEXT SIZE + TEXT WIDTH
   widgets; everything else is fixed Scaife chrome.
   ============================================================ */
@import url(https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i&subset=greek,greek-ext,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Noto+Serif+Devanagari:wght@400;500;600&subset=devanagari,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
:root{
  --white:#fff; --g100:#f8f9fa; --g200:#e9ecef; --g300:#dee2e6;
  --g400:#ced4da; --g500:#adb5bd; --g600:#868e96; --g700:#495057;
  --g800:#343a40; --g900:#212529; --black:#000;
  --red:#B45141; --blue:#007bff; --cyan:#17a2b8;
  --hi:#FEA; --hi-lt:#fff3c4; --sel:#DEF;
  --serif:'Noto Serif',Georgia,serif;
  --deva:'Noto Serif Devanagari','Noto Serif',Georgia,serif;
  --sans:'Noto Sans',system-ui,sans-serif;
  --measure:46rem;
  --sa-size:1.25rem;
  --en-size:1rem;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--white);color:var(--g900);
  font:16px/1.5 var(--sans)}
body.reader{background:var(--white)}

/* ---------- dark nav, Scaife exact ---------- */
header nav{background:var(--g800);color:#fff}
.topbar-container{max-width:1200px;margin:0 auto;display:flex;
  align-items:center;gap:1.2rem;padding:.5rem 1rem}
.brand{font-family:var(--deva);color:#fff !important;text-decoration:none;
  font-size:1.25rem}
.main-bar{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.main-bar.right{margin-left:auto}
.main-bar a.support{font-size:.82rem;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:.15rem .7rem}
.main-bar a.support:hover{border-color:#fff}
.main-bar a{color:rgba(255,255,255,.75);text-decoration:none;font-size:.95rem}
.main-bar a:hover{color:#fff}

/* ---------- 3-zone layout: gutter | text | rail ---------- */
.layout{display:flex;max-width:1400px;margin:0 auto;align-items:stretch}
.pgutter{flex:0 0 60px}
.pgutter a{display:block;color:transparent;text-align:center;
  padding:10px;height:100%;text-decoration:none;font-size:48px}
.pgutter a:hover{color:var(--g300)}
.pgutter span{display:block;position:sticky;top:38%}
.reader-main{flex:1;min-width:0;max-width:var(--measure);margin:0 auto;padding:0 .5rem}

/* ---------- passage heading ---------- */
.passage-heading{margin-bottom:20px;font-family:var(--serif);color:var(--g600)}
.passage-heading h1{margin:0;font-weight:normal;font-size:24px}
.passage-heading h1 a{color:inherit;text-decoration:none}
.passage-heading h2{margin:0;font-weight:normal;font-style:italic;font-size:16px;line-height:24px}
.passage-heading h3{margin:0;font-size:14px;line-height:18px;color:var(--g500);font-weight:normal}

/* ---------- parallel columns ---------- */
.overall{display:flex}
.col{flex:10;padding:0 .5em;min-width:0}
.col.right{border-left:1px solid var(--g300)}
.col.hidden{display:none}
.verbar{position:relative;display:flex;align-items:flex-start;gap:.2rem;margin-bottom:10px}
.verdrop{border:0;background:var(--white);color:var(--g600);cursor:pointer;
  padding:.2rem .5rem .2rem .3rem;font-size:1rem}
.verdrop:hover{color:var(--black)}
.version-select{padding:.5rem .75rem .5rem 0;text-align:left;font-size:14px;line-height:16px}
.version-select .vlab{font-weight:700}
.version-select .vdesc{color:var(--g600);font-size:12px}
.version-select .vmeta{color:var(--g500);font-size:11px}
.side-delete{margin-left:auto;color:var(--g400);text-decoration:none;font-size:1.2rem}
.side-delete:hover{color:var(--g700)}
.dropdown-menu{display:none;position:absolute;top:100%;left:0;z-index:50;
  background:#fff;border:1px solid var(--g300);border-radius:.25rem;
  min-width:260px;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.dropdown-menu.show{display:block}
.dropdown-item{display:flex;gap:.5rem;padding:.5rem .75rem;text-decoration:none;color:var(--g900)}
.dropdown-item:hover{background:var(--g100)}
.dropdown-item .side{color:var(--red);font-weight:700;min-width:1em}
.dropdown-item .label{font-size:14px}
.dropdown-item .description{font-size:12px;color:var(--g600)}
.dropdown-item .metadata{font-size:11px;color:var(--g500)}
.dropdown-divider{border-top:1px solid var(--g200)}
.dropdown-item.remove{color:var(--red)}

/* ---------- text proper ---------- */
.text{font-family:var(--serif)}
.text .sa{font-family:var(--deva);font-size:var(--sa-size);line-height:1.8}
.text .ro{font-size:.9em;font-style:italic;color:var(--g600);margin:.1rem 0 .6rem}
.text .enp{font-size:var(--en-size);line-height:1.6}
.text .verse{margin:0 0 1.4em}
.text .w.sing{background:var(--hi)}
.text .verse.now{box-shadow:-3px 0 0 var(--red);padding-left:.5em}
a.vref{color:inherit;text-decoration:none;cursor:pointer}
a.vref:hover{color:var(--red)}
.text .vref{font-size:80%;font-style:italic;color:var(--g500);margin-bottom:.2em;display:inline-block}
.text .w{cursor:pointer;border-radius:.15em;padding:0 .05em}
body.highlight .text .w:hover{background:var(--hi-lt)}
.text .w.sel{background:var(--sel)}
.text .milestone{font-size:80%;font-style:italic;text-align:center;color:var(--g500)}
.text .note{color:var(--g600);cursor:pointer}
.text .unclear{text-decoration:underline dotted}
.text .c1sec p{font-size:.92em}
.cmp-note{font-size:12px;color:var(--g500);font-family:var(--sans)}

/* ---------- right rail widgets ---------- */
.rail{flex:0 0 300px;border-left:1px solid var(--g200);
  padding:0 8px 40px;margin-left:1rem;max-height:calc(100vh - 60px);
  overflow-y:auto;position:sticky;top:0}
/* ---------- library rail (left) ---------- */
.lib{flex:0 0 210px;border-right:1px solid var(--g200);
  padding:0 12px 40px;margin-right:1rem;max-height:calc(100vh - 60px);
  overflow-y:auto;position:sticky;top:0}
.lib h2{font-size:14px;margin:0;padding:15px 0 5px;color:var(--g600);
  text-transform:uppercase;letter-spacing:.2em;font-weight:400}
.lib .m{margin:0}
.lib .mrow{display:flex;align-items:center;gap:.3rem;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;padding:.28rem .2rem;font-size:13px;
  color:var(--g900);font-family:var(--sans)}
.lib .mrow:hover{color:var(--red)}
.lib .mrow .car{color:var(--g400);font-size:10px;min-width:.8em}
.lib .mrow.on{font-weight:700}
.lib .wlist{display:none;margin:0 0 .3rem 1em}
.lib .m.open .wlist{display:block}
.lib .wlist a{display:block;font-size:12.5px;color:var(--g700);
  text-decoration:none;padding:.16rem .2rem;border-left:2px solid transparent}
.lib .wlist a:hover{color:var(--red)}
.lib .wlist a.cur{color:var(--red);border-left-color:var(--red);font-weight:700}
@media (max-width:1000px){.lib{display:none}.pgutter{flex-basis:34px}.pgutter a{font-size:32px}}
.widget{padding:0 8px 8px;border-bottom:1px solid var(--g200)}
.widget:first-of-type{border-top:1px solid var(--g200)}
.widget h2{background:var(--white);padding:15px 0 5px;display:flex;
  justify-content:space-between;font-size:14px;margin:0;color:var(--g600);
  text-transform:uppercase;letter-spacing:.2em;cursor:pointer;font-weight:400}
.widget h2 .tog{color:var(--g400);min-width:1.5em}
.widget .wbody{font-size:13px;color:var(--g700)}
.widget .wbody a{color:var(--blue)}
.widget.closed .wbody{display:none}
.tsize{display:flex;gap:.4rem;align-items:baseline}
.tsize button{border:1px solid var(--g300);background:#fff;border-radius:4px;
  cursor:pointer;font-family:var(--serif);padding:.1rem .5rem}
.tsize button.on{border-color:var(--red);color:var(--red)}
.twidth{display:flex;gap:.4rem;flex-wrap:wrap}
.twidth button{border:1px solid var(--g300);background:#fff;border-radius:4px;
  cursor:pointer;font-size:13px;padding:.2rem .6rem}
.twidth button.on{border-color:var(--red);color:var(--red)}
.tmode{display:flex;gap:.4rem;margin-bottom:.4rem}
.tmode button{border:1px solid var(--g300);background:#fff;border-radius:4px;
  cursor:pointer;font-size:13px;padding:.2rem .6rem}
.tmode button.on{border-color:var(--red);color:var(--red)}
.vref-list{display:flex;flex-wrap:wrap;gap:.25rem}
.vref-list a{border:1px solid var(--g300);border-radius:4px;padding:.05rem .45rem;
  text-decoration:none;color:var(--g700);font-family:var(--serif)}
.vref-list a:hover{border-color:var(--red);color:var(--red)}
.wsearch{display:flex;gap:.3rem}
.wsearch input{flex:1;min-width:0;border:1px solid var(--g300);border-radius:4px;
  padding:.3rem .5rem;font-size:13px}
.wsearch button{border:1px solid var(--g300);background:#fff;border-radius:4px;
  cursor:pointer;font-size:13px;padding:.3rem .6rem}
.wtable{width:100%;border-collapse:collapse;font-size:12px}
.wtable td{border-top:1px solid var(--g200);padding:.25rem .3rem;vertical-align:top}
.wtable td:first-child{color:var(--g500)}
.varbox textarea{width:100%;min-height:4.5rem;font:13px var(--serif);
  padding:.4rem;border:1px solid var(--g300);border-radius:4px}
.savebtn{border:1px solid var(--g300);background:#fff;border-radius:4px;
  cursor:pointer;font-size:13px;padding:.3rem .7rem;margin-top:.3rem}
.savebtn:hover{border-color:var(--red);color:var(--red)}
.yours{border-left:3px solid var(--red);padding-left:.6rem;margin-top:.5rem}
#err{color:var(--g600);padding:2rem 0;font-family:var(--serif)}
.loading{color:var(--g500)}