/* Eight Verses — study site */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Tibetan:wght@400;600&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#14161a; --bg2:#1a1d22; --bg3:#21252b;
  --fg:#e8e4dc; --dim:#9aa0a8; --dim2:#6e747c;
  --line:#2c3138;
  --accent:#d9a441;
  --noun:#6fb1e0; --verb:#e0705f; --adj:#7fc99a; --quant:#b39ae0;
  --part:#e0b05f; --mood:#d98fd0; --neutral:#8a919a;
  --maxw:860px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg);
  font-family:'Source Serif 4',Georgia,serif;
  font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.tib,.s-t,.gp-tib,.k-tib,.v-tib,.fc-tib,.qtib,.buildtib,.gtib,.e-t{
  font-family:'Noto Serif Tibetan','Kailasa','Jomolhari','Microsoft Himalaya','DDC Uchen','Tibetan Machine Uni',serif;
  line-height:2.2;
}

/* ---------- layout ---------- */
header.site{
  border-bottom:1px solid var(--line); background:var(--bg2);
  position:sticky; top:0; z-index:50;
}
header.site .inner{
  max-width:var(--maxw); margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.brand{font-weight:600; font-size:17px; letter-spacing:.3px; color:var(--fg); text-decoration:none; white-space:nowrap}
.brand span{color:var(--accent)}
nav.site{display:flex; gap:18px; flex-wrap:wrap}
nav.site a{
  font-family:Inter,system-ui,sans-serif; font-size:14px; color:var(--dim);
  text-decoration:none; padding:3px 0; border-bottom:2px solid transparent;
}
nav.site a:hover{color:var(--fg)}
nav.site a.on{color:var(--accent); border-bottom-color:var(--accent)}

main{max-width:var(--maxw); margin:0 auto; padding:40px 22px 90px}
section{margin-bottom:46px}

h1{font-size:34px; line-height:1.25; font-weight:600; margin-bottom:10px; letter-spacing:-.4px}
h2{font-size:23px; font-weight:600; margin:38px 0 14px; letter-spacing:-.2px}
h3{font-size:18px; font-weight:600; margin:24px 0 8px; font-family:Inter,sans-serif}
p{margin-bottom:14px}
.lede{font-size:20px; color:var(--dim); margin-bottom:26px; line-height:1.6}
a{color:var(--accent)}
em{font-style:italic}
strong{font-weight:600; color:#fff}

.card{background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:20px 22px; margin-bottom:18px}
.card.tight{padding:14px 16px}
.note{border-left:3px solid var(--accent); background:var(--bg2); padding:13px 17px; margin:16px 0; font-size:16px; color:var(--dim)}
.note strong{color:var(--fg)}

/* ---------- home tiles ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:22px}
.tile{
  display:block; background:var(--bg2); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px; text-decoration:none; color:var(--fg); transition:.15s;
}
.tile:hover{border-color:var(--accent); transform:translateY(-2px)}
.tile b{display:block; font-size:17px; margin-bottom:5px}
.tile span{font-size:14.5px; color:var(--dim); font-family:Inter,sans-serif; line-height:1.5}

/* ---------- verse picker ---------- */
.picker{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:26px}
.picker button{
  font-family:Inter,sans-serif; font-size:14px; cursor:pointer;
  background:var(--bg2); color:var(--dim); border:1px solid var(--line);
  border-radius:7px; padding:8px 14px; transition:.12s;
}
.picker button:hover{color:var(--fg); border-color:var(--dim2)}
.picker button.on{background:var(--accent); color:#1a1205; border-color:var(--accent); font-weight:600}

/* ---------- interactive verse ---------- */
.verseblock{margin:8px 0 12px}
.vline{
  padding:12px 0; border-bottom:1px dashed var(--line);
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:2px;
}
.vline:last-child{border-bottom:none}
.lineno{
  font-family:Inter,sans-serif; font-size:11px; color:var(--dim2);
  width:100%; margin-bottom:4px; letter-spacing:.7px; text-transform:uppercase;
}
.syl{
  cursor:pointer; border-radius:6px; padding:3px 5px 1px;
  border-bottom:2.5px solid transparent; transition:.12s; position:relative;
}
.syl .s-t{font-size:25px; display:block; line-height:1.9}
.syl .s-p{font-family:Inter,sans-serif; font-size:11px; color:var(--dim2); display:block; text-align:center; margin-top:-3px}
.syl:hover{background:var(--bg3)}
.syl.sel{background:var(--bg3); box-shadow:0 0 0 1px var(--dim2)}

.syl[data-r=noun]{border-bottom-color:var(--noun)}
.syl[data-r=verb]{border-bottom-color:var(--verb)}
.syl[data-r=adj],.syl[data-r=quant]{border-bottom-color:var(--adj)}
.syl[data-r=mood]{border-bottom-color:var(--mood)}
.syl[data-r=dat],.syl[data-r=abl],.syl[data-r=instr],.syl[data-r=gen],
.syl[data-r=term],.syl[data-r=nom],.syl[data-r=topic],.syl[data-r=conj],
.syl[data-r=neg],.syl[data-r=plural],.syl[data-r=cond]{border-bottom-color:var(--part)}

/* gloss panel */
.glosspanel{
  background:var(--bg3); border:1px solid var(--line); border-radius:9px;
  padding:16px 18px; min-height:104px; margin-top:6px;
}
.glosspanel .gp-empty{color:var(--dim2); font-size:15px; font-family:Inter,sans-serif}
.gp-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:7px}
.gp-tib{font-size:29px}
.gp-wylie{font-family:'Inter',monospace; font-size:13px; color:var(--dim); background:var(--bg); padding:2px 8px; border-radius:4px}
.gp-phon{font-style:italic; color:var(--dim)}
.gp-role{
  font-family:Inter,sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.8px;
  padding:3px 9px; border-radius:20px; background:var(--bg); color:var(--dim);
}
.gp-gloss{font-size:19px; margin-bottom:6px}
.gp-note{font-size:15.5px; color:var(--dim); line-height:1.6}
.gp-link{font-family:Inter,sans-serif; font-size:13px; margin-top:9px; display:inline-block}

/* legend */
.legend{display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 6px}
.legend span{
  font-family:Inter,sans-serif; font-size:12px; color:var(--dim);
  border-bottom:2.5px solid var(--neutral); padding:2px 7px 3px;
}
.legend span.l-noun{border-color:var(--noun)}
.legend span.l-verb{border-color:var(--verb)}
.legend span.l-adj{border-color:var(--adj)}
.legend span.l-part{border-color:var(--part)}
.legend span.l-mood{border-color:var(--mood)}

/* ---------- build-up ---------- */
.buildrow{
  display:flex; gap:14px; align-items:baseline; padding:11px 0;
  border-bottom:1px solid var(--line); opacity:.28; transition:.35s;
}
.buildrow.show{opacity:1}
.buildrow:last-child{border-bottom:none}
.buildstep{
  font-family:Inter,sans-serif; font-size:11px; color:var(--dim2);
  min-width:22px; padding-top:4px;
}
.buildtib{font-size:20px; flex:0 0 auto; max-width:46%}
.builden{flex:1; font-size:16.5px; color:var(--dim)}
.buildrow.show .builden{color:var(--fg)}
.builden em{color:var(--accent); font-style:normal; font-weight:600}
.btn{
  font-family:Inter,sans-serif; font-size:14px; cursor:pointer; background:var(--accent);
  color:#1a1205; border:none; border-radius:7px; padding:9px 18px; font-weight:600;
}
.btn.ghost{background:transparent; color:var(--dim); border:1px solid var(--line)}
.btn:hover{filter:brightness(1.08)}
.btnrow{display:flex; gap:9px; margin-top:14px; flex-wrap:wrap}

/* ---------- skeleton table ---------- */
.skel{width:100%; border-collapse:collapse; font-size:16px}
.skel td{padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top}
.skel td:first-child{
  font-family:Inter,sans-serif; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.7px; color:var(--accent); white-space:nowrap; width:1%; padding-right:18px;
}
.skel td.k-tib{font-size:19px}
.skel td:last-child{color:var(--dim)}

/* ---------- glossary ---------- */
.gitem{background:var(--bg2); border:1px solid var(--line); border-radius:10px; margin-bottom:14px; overflow:hidden}
.gitem > summary{
  cursor:pointer; padding:15px 20px; list-style:none; display:flex;
  align-items:baseline; gap:12px; flex-wrap:wrap;
}
.gitem > summary::-webkit-details-marker{display:none}
.gitem > summary::after{content:'+'; margin-left:auto; color:var(--dim2); font-size:20px}
.gitem[open] > summary::after{content:'–'}
.gitem > summary:hover{background:var(--bg3)}
.gterm{font-size:19px; font-weight:600}
.gtib{font-size:20px; color:var(--accent)}
.gshort{font-size:15px; color:var(--dim); width:100%; font-family:Inter,sans-serif; line-height:1.5}
.gbody{padding:4px 20px 20px; border-top:1px solid var(--line)}
.gbody p{font-size:16.5px}
.geg{background:var(--bg); border-radius:7px; padding:11px 14px; margin:9px 0; display:flex; gap:14px; align-items:baseline; flex-wrap:wrap}
.geg .e-t{font-size:21px}
.geg .e-n{font-size:15px; color:var(--dim); flex:1; min-width:180px}
.ganalogy{font-style:italic; color:var(--accent); font-size:16px; margin-top:12px}
.ganalogy b{font-style:normal; font-family:Inter,sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--dim2); display:block; margin-bottom:3px}

/* ---------- vocab table ---------- */
.controls{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; align-items:center}
input[type=search],select{
  font-family:Inter,sans-serif; font-size:14px; background:var(--bg2); color:var(--fg);
  border:1px solid var(--line); border-radius:7px; padding:9px 13px;
}
input[type=search]{flex:1; min-width:190px}
input[type=search]:focus,select:focus{outline:none; border-color:var(--accent)}
.count{font-family:Inter,sans-serif; font-size:13px; color:var(--dim2)}

table.vocab{width:100%; border-collapse:collapse; font-size:16px}
table.vocab th{
  text-align:left; font-family:Inter,sans-serif; font-size:11px; text-transform:uppercase;
  letter-spacing:.8px; color:var(--dim2); padding:8px; border-bottom:1px solid var(--line); font-weight:500;
}
table.vocab td{padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top}
table.vocab tr:hover td{background:var(--bg2)}
td.v-tib{font-size:23px; white-space:nowrap}
td.v-wylie{font-family:Inter,monospace; font-size:13px; color:var(--dim)}
td.v-phon{font-style:italic; color:var(--dim); font-size:15px}
td.v-role{font-family:Inter,sans-serif; font-size:11px; color:var(--dim2); text-transform:uppercase; letter-spacing:.5px}
td.v-vs{font-family:Inter,sans-serif; font-size:12px; color:var(--dim2)}

/* ---------- flashcards ---------- */
.card3d{
  background:var(--bg2); border:1px solid var(--line); border-radius:14px;
  min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:34px 26px; text-align:center; cursor:pointer; user-select:none;
}
.card3d:hover{border-color:var(--dim2)}
.fc-tib{font-size:52px; line-height:1.8}
.fc-prompt{font-family:Inter,sans-serif; font-size:13px; color:var(--dim2); margin-top:16px}
.fc-ans{font-size:26px; margin-bottom:8px}
.fc-sub{font-size:15px; color:var(--dim); font-family:Inter,sans-serif}
.fc-note{font-size:15px; color:var(--dim); margin-top:14px; max-width:460px; line-height:1.6}
.progress{font-family:Inter,sans-serif; font-size:13px; color:var(--dim2); text-align:center; margin-top:14px}

/* ---------- quiz ---------- */
.q{background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:20px 22px; margin-bottom:16px}
.qtext{font-size:18px; margin-bottom:6px}
.qtib{font-size:27px; margin:8px 0 14px}
.opts{display:flex; flex-direction:column; gap:8px}
.opt{
  font-family:Inter,sans-serif; font-size:15px; text-align:left; cursor:pointer;
  background:var(--bg3); color:var(--fg); border:1px solid var(--line);
  border-radius:8px; padding:11px 15px; transition:.12s;
}
.opt:hover:not(:disabled){border-color:var(--dim2)}
.opt:disabled{cursor:default}
.opt.right{background:rgba(127,201,154,.16); border-color:var(--adj); color:#bfe8cf}
.opt.wrong{background:rgba(224,112,95,.15); border-color:var(--verb); color:#f0b3a9}
.qfb{margin-top:12px; font-size:15.5px; color:var(--dim); display:none; line-height:1.6}
.qfb.show{display:block}

footer.site{
  border-top:1px solid var(--line); margin-top:40px; padding:26px 22px 50px;
  font-family:Inter,sans-serif; font-size:13.5px; color:var(--dim2); line-height:1.7;
}
footer.site .inner{max-width:var(--maxw); margin:0 auto}
footer.site a{color:var(--dim)}

@media (max-width:640px){
  body{font-size:17px}
  h1{font-size:27px}
  main{padding:26px 16px 70px}
  .buildrow{flex-direction:column; gap:5px}
  .buildtib{max-width:100%}
  .fc-tib{font-size:40px}
  header.site .inner{gap:12px; padding:12px 16px}
  nav.site{gap:13px}
}