/* ============================================================
   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{position:relative;margin-bottom:20px;font-family:var(--serif);color:var(--g600)}
#addcol{position:absolute;top:0;right:0;border:1px solid var(--g300);background:#fff;border-radius:8px;cursor:pointer;color:var(--g600);font-size:15px;line-height:1;padding:.3rem .6rem}
#addcol:hover{border-color:var(--red);color:var(--red)}
.passage-heading h1{margin:0;font-weight:normal;font-size:24px;color:var(--g600)}
#wh2:empty,#wh3:empty{display:none}
.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}
/* drag-to-resize (left master list / right chat rail) */
.layout.dragging{user-select:none;cursor:col-resize}
.layout.dragging *{cursor:col-resize !important}
/* paired rows (reader): both columns share one grid — a verse row's height is
   the TALLER of the two cells, so § markers align to the pixel, forever */
#cols.paired{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:auto}
#cols.paired .col{display:grid;grid-row:1/-1;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr)}
#cols.paired .text{display:contents}
.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)}
.c2box{margin-top:.6rem;border-top:1px solid var(--g200);padding-top:.5rem}
.c2head{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--g500);margin-bottom:.3rem}
.c2row{display:flex;gap:.4rem}
.c2row input{flex:1;font-family:var(--sans);font-size:13px;padding:.45rem .6rem;border:1px solid var(--g300);border-radius:6px;background:#fff;color:var(--g900);min-width:0}
.c2row input:focus{outline:none;border-color:var(--g500)}
.c2btn,.c2save{font-family:var(--sans);font-size:13px;padding:.45rem .8rem;border:1px solid var(--g300);border-radius:6px;background:#fff;color:var(--g900);cursor:pointer;white-space:nowrap}
.c2btn:hover,.c2save:hover{background:var(--g100)}
.c2btn:disabled{opacity:.6;cursor:wait}
.c2out{margin-top:.4rem}
.c2meta{font-size:11px;color:var(--g500);margin:.3rem 0}
.c2save{margin-top:.2rem}
.dgroup{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--g500);padding:.5rem .75rem .25rem}
.tbars{display:flex;gap:.4rem;padding:.25rem .75rem .5rem;flex-wrap:wrap}
.tbar{flex:1 1 0;text-align:center;font-size:13px;padding:.4rem 0;border:1px solid var(--g300);border-radius:6px;color:var(--g900);text-decoration:none;background:#fff;white-space:nowrap}
.tbar:hover{background:var(--g100)}
.tbar.on{background:var(--g900);color:#fff;border-color:var(--g900)}

/* ---------- text proper ---------- */
.text{font-family:var(--serif);overflow-wrap:break-word;-webkit-overflow-wrap:break-word}
.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;position:relative;padding-right:1.9rem}
.splay:hover{border-color:var(--red);color:var(--red);opacity:1}
.text .w.sing{color:var(--red);background:none}   /* current syllable: site red, no block — text stays black otherwise */
.addver{border:1px dashed var(--g400);background:#fff;border-radius:8px;cursor:pointer;
  font-family:var(--sans);font-size:13px;color:var(--g600);padding:.7rem 1rem;width:100%;text-align:center}
.addver:hover{border-color:var(--red);color:var(--red)}
.l0tab{width:100%;border-collapse:collapse;font-size:13px}
.l0tab td{border-top:1px solid var(--g200);padding:.3rem .4rem;vertical-align:top}
.l0tab .l0sa{font-family:var(--deva);font-size:1.15rem;white-space:nowrap}
.l0tab .l0ro{color:var(--g600);font-style:italic}
.l0st{font-size:.65rem;letter-spacing:.1em;color:var(--gold-hi,var(--gold));text-transform:uppercase}
.text .w.hl{background:var(--hi)}
.widget .urn{color:var(--red);font-size:12px;word-break:break-all;font-family:ui-monospace,monospace}
#vcount{color:var(--red);text-decoration:none;font-family:var(--serif)}
.widget .wbody a.redlink{color:var(--red)}
/* display settings: Scaife text links, not buttons */
#wid-display .tsize button{border:0;background:none;padding:.1rem .3rem;color:var(--g500)}
#wid-display .tsize button.on{color:var(--black);font-weight:700}
#wid-mode .tmode button{border:0;background:none;padding:.1rem .4rem;color:var(--g500);font-size:13px;letter-spacing:.08em}
#wid-mode .tmode button.on{color:var(--black);font-weight:700}
.twidth a{color:var(--g500);text-decoration:none;margin-right:.5rem;font-size:12.5px}
.twidth a.on{color:var(--black);font-weight:700}
.twidth a:hover{color:var(--black)}
.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}
.text .w:hover{background:var(--hi-lt)}
.text .kword{white-space:nowrap}
.text .kword .w{padding:0;border-radius:0}
.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 360px;border-left:1px solid var(--g200);
  padding:0 8px 6px;margin-left:1rem;max-height:calc(100vh - 56px);
  overflow-y:auto;position:sticky;top:0;
  scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{width:0;height: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}
/* ---------- rail collapse tabs (Scaife arrows) ---------- */
.railtab{flex:0 0 34px;text-align:center}
.railtab a{display:block;color:var(--g400);text-decoration:none;
  font-size:18px;padding:14px 0}
.railtab a:hover{color:var(--g700)}
.layout.hideL .lib{display:none}
.layout.hideR .rail{display:none}
.layout.hideL #tabL a{transform:scaleX(-1)}
.layout.hideR #tabR a{transform:scaleX(-1)}
@media (max-width:1000px){.lib{display:none}.rail{display:none}.pgutter{flex-basis:34px}.pgutter a{font-size:32px}.railtab{display:none}}
.widget{padding:0 8px 8px;border-bottom:1px solid var(--g200)}
.headbar{display:flex;gap:.8rem;flex-direction:column;
  padding:.1rem 0 .3rem;border-bottom:1px solid var(--g200);margin-bottom:.5rem}
.hbrow{display:flex;align-items:center;gap:.42rem;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;
  align-items:baseline;line-height:1}
.hbg{display:flex;gap:.3rem;align-items:center}
.hbsep{width:1px;height:.95rem;background:var(--g200);opacity:.7}
.hbbtn{border:0;background:none;color:var(--g500);padding:.05rem .18rem;
  cursor:pointer;line-height:1.2;transition:color .12s ease}
#readSa{font-size:.8rem;color:var(--g600)}
#readEn{font-size:.64rem;letter-spacing:.08em;font-weight:600;vertical-align:.05em;color:var(--g600)}
#rcAll{font-size:.74rem;padding:.1rem .38rem;color:var(--g600)}
.hbbtn:hover{color:var(--red)}
.hbbtn.hbsel{color:var(--red);font-weight:700}
.hbmsg:empty{display:none}
.hbmsg{display:inline;margin-left:.4rem;font-size:11px;color:var(--g500);
  max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.verse.paused .vref{color:var(--red);font-weight:700}
.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}
/* ask-the-text chat: small sharp retrieval answers (SPEC.md) */
#convo{flex:1;min-height:50vh;max-height:none;overflow-y:auto;display:flex;flex-direction:column;gap:.35rem;
  scrollbar-width:none;-ms-overflow-style:none}
#convo::-webkit-scrollbar{width:0;height:0}
.layout .rail{display:flex;flex-direction:column}
#wid-chat{flex:1;min-height:0;display:flex;flex-direction:column;border-bottom:none}
#wid-chat .wbody{flex:1;min-height:0;display:flex;flex-direction:column}
#wid-chat .wsearch{margin-top:auto;padding-top:.5rem;border-top:1px solid var(--g200)}
/* chat box: a tall box (not a bar) reaching near the page bottom,
   two circles stacked to its right: voice input above, send arrow below */
#wid-chat{padding-bottom:5px}
#wid-chat .wsearch.wsbox{gap:.5rem;align-items:stretch}
#wid-chat .wsbox textarea{flex:1;min-width:0;min-height:3.7rem;resize:none;
  font:13.5px var(--serif);line-height:1.45;padding:.55rem .65rem;
  border:1px solid var(--g300);border-radius:9px;background:#fff;color:var(--g900)}
#wid-chat .wsbox textarea:focus{outline:none;border-color:var(--g500)}
#wid-chat .wsbox textarea::placeholder{color:var(--g500);font-style:italic}
.wsrow{display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:.8rem;width:2.6rem;flex:0 0 auto}
#wid-chat .wsbox button.circbtn{width:2.5rem;height:2.5rem;border-radius:50%;
  border:1px solid var(--g300);background:#fff;color:var(--g600);cursor:pointer;
  font-size:.95rem;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
#wid-chat .wsbox button.circbtn:hover{border-color:var(--red);color:var(--red)}
#wid-chat .wsbox button.circbtn.on{border-color:var(--red);color:var(--red);background:#fff4f4}
#wid-chat .wsbox button.trident{width:1.7rem;height:1.7rem;border:none;background:none;
  border-radius:0;color:var(--g500);font-size:1rem}
#wid-chat .wsbox button.trident:hover{color:var(--red)}
#wid-chat .wsbox button.trident .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.qbub{font-size:12.5px;line-height:1.45;color:var(--g900)}
.qbub.q{color:var(--g600)}
.qbub.q::before{content:'› ';color:var(--red);font-weight:700}
.qbub a{color:var(--blue)}
.qbub.thinking{color:var(--g400);letter-spacing:.2em}
.qsug{margin-top:.35rem;font-size:12px;color:var(--g600)}
.qsug a{color:var(--blue)}
.qref{font-size:.85em;white-space:nowrap}
#qdocov{border:1px solid var(--g300);border-radius:8px;background:#fff;margin-top:.5rem;max-height:46vh;display:flex;flex-direction:column}
#qdocov .qdochead{display:flex;justify-content:space-between;align-items:center;padding:.3rem .55rem;border-bottom:1px solid var(--g200);font-size:12px;color:var(--g600);font-family:ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#qdocov .qdochead a{color:var(--red);text-decoration:none;font-size:14px}
#qdocov .qdocbody{overflow-y:auto;padding:.55rem;font-size:12.5px;line-height:1.5;white-space:pre-wrap}
.tsize{display:flex;gap:0;align-items:baseline}
.tsize button{border:0;background:none;border-radius:0;padding:.1rem .13rem!important;
  cursor:pointer;font-family:var(--serif);padding:.1rem .5rem}
.tsize button.on{color:var(--black);font-weight:700}
.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)}

/* Sanskrit hub (?view=sanskrit) — scoped. Lesson pages are vendored verbatim
   in an iframe (own styles inline); only the svread-side index needs these. */
.sk-rulebox{border:1px solid var(--g200);border-radius:6px;padding:.55rem .8rem;margin:.5rem 0;background:#fff}
.sk-rulebox .sk-rb-t{font-weight:600;margin-bottom:.25rem}
#sk-frame{background:#fff}
.sk-table{width:100%;border-collapse:collapse;font-size:.85rem;margin:.6rem 0}
.sk-table th{text-align:left;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--g500);border-bottom:1px solid var(--g200);padding:.3rem .4rem;position:sticky;top:0;background:var(--paper,#fff)}
.sk-table td{border-top:1px solid var(--g200);padding:.3rem .4rem;vertical-align:top}
.sk-badge{font-size:.7rem;letter-spacing:.05em;border:1px solid var(--g300);border-radius:4px;padding:.05rem .4rem;white-space:nowrap}