/* site.css — house style for the Gita Supersite archive (reader, compare, landing).
   Palette/idiom mirrors Web/Sanskrit/skt-common.css so the pages match the sibling project.
   Kept self-contained so GitaSupersite deploys independently. */

:root{
  --bg:#f5eedb; --panel:#fbf6ea; --card:#fffdf6;
  --ink:#2b2540; --ink-soft:#5c5468; --line:#e3d8bf;
  --accent:#8a3a1c; --accent-soft:#b9603c; --gold:#a8841e;
  --shadow:0 2px 10px rgba(70,50,20,.12);
  --sans:#1f5fa8;      /* Sanskrit commentaries */
  --hindi:#a8341e;     /* Hindi */
  --english:#1f7a4d;   /* English */
  --content-scale:1;
  --font-dev:"Noto Serif Devanagari","Tiro Devanagari Sanskrit",serif;
  --font-iast:"Gentium Plus","Cormorant Garamond",serif;
  --font-ui:"Inter",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font-ui); background:var(--bg); color:var(--ink);
  line-height:1.55; font-size:17px; -webkit-text-size-adjust:100%;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ---- top bar ---------------------------------------------------------- */
.top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.6rem 1rem; background:rgba(251,246,234,.94); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line); box-shadow:var(--shadow);
}
.top .brand{ font-weight:600; font-size:1.05rem; white-space:nowrap; }
.top .brand .dev{ font-family:var(--font-dev); color:var(--accent); margin-left:.35rem; }
.top nav{ display:flex; gap:.15rem; flex-wrap:wrap; }
.top nav a{ padding:.32rem .6rem; border-radius:8px; color:var(--ink-soft); font-size:.9rem; }
.top nav a:hover{ background:var(--card); text-decoration:none; }
.top nav a.on{ background:var(--accent); color:#fff; }
.top .spacer{ flex:1 }

/* ---- controls --------------------------------------------------------- */
.controls{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding:.7rem 1rem; border-bottom:1px solid var(--line); background:var(--panel);
}
.controls label{ font-size:.82rem; color:var(--ink-soft); }
select,.btn{
  font-family:var(--font-ui); font-size:.9rem; cursor:pointer; color:var(--ink);
  border:1px solid var(--line); background:var(--card);
  border-radius:9px; padding:.4rem .7rem; transition:background .12s,border-color .12s;
}
select:hover,.btn:hover{ border-color:var(--accent-soft); }
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.small{ padding:.28rem .55rem; font-size:.82rem; }
.btn[disabled]{ opacity:.45; cursor:default; }

/* segmented control */
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--card); }
.seg button{ border:0; border-right:1px solid var(--line); background:transparent; color:var(--ink);
  padding:.4rem .7rem; font-size:.85rem; cursor:pointer; font-family:var(--font-ui); }
.seg button:last-child{ border-right:0; }
.seg button.on{ background:var(--accent); color:#fff; }

/* ---- reader top bar (brand + controls + collapsible picker) ----------- */
.topbar{ position:sticky; top:0; z-index:30; background:var(--panel);
  box-shadow:var(--shadow); transition:transform .25s ease; }
.topbar.scrolled-hidden{ transform:translateY(-100%); }
.topbar .top{ position:static; box-shadow:none; border-bottom:1px solid var(--line); }
.topbar .controls{ border-bottom:1px solid var(--line); }

/* collapsible commentary panel, tucked inside the sticky bar */
.commpanel{ max-height:0; overflow:hidden; background:var(--panel);
  transition:max-height .22s ease; }
.topbar.panel-open .commpanel{ max-height:56vh; overflow:auto; border-bottom:1px solid var(--line); }
.commpanel .inner{ padding:.8rem 1rem 1rem; }
.commpanel .ptop{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.5rem; }
.commpanel .ptop .lbl{ font-size:.78rem; color:var(--ink-soft); }
.commpanel .ptop .title{ font-weight:600; font-size:.95rem; }
/* make the show/hide toggle stand out so it's easy to find */
#commToggle{ border-color:var(--accent-soft); font-weight:600; }
.topbar.panel-open #commToggle{ background:var(--accent); color:#fff; border-color:var(--accent); }
/* language columns: Sanskrit | English | Hindi, each stacking its own commentaries */
.commpanel .cols{ display:flex; flex-wrap:wrap; gap:.4rem 1.8rem; align-items:flex-start; }
.commpanel .pcol{ flex:1 1 170px; min-width:150px; }
.commpanel .group-h{ margin:0 0 .2rem; font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); border-bottom:1px solid var(--line); padding-bottom:.15rem; }
.commpanel .opt{ display:flex; align-items:center; gap:.45rem; padding:.03rem .1rem; font-size:.88rem;
  line-height:1.28; cursor:pointer; }
.commpanel .opt input{ accent-color:var(--accent); width:15px; height:15px; }
.commpanel .opt .dot{ width:8px; height:8px; border-radius:50%; flex:none; }

/* commentary card grid (reader) — capped at 3 columns, extras wrap below */
.comm-grid{ display:grid; gap:1rem; align-items:start;
  grid-template-columns:repeat(var(--cols,1),minmax(0,1fr)); }
.comm-grid .comm{ margin-bottom:0; }
@media(max-width:720px){ .comm-grid{ grid-template-columns:1fr; } }

/* ---- layout ----------------------------------------------------------- */
.wrap{ max-width:1180px; margin:0 auto; padding:1rem; }
.reader-grid{ display:grid; grid-template-columns:260px 1fr; gap:1.2rem; align-items:start; }
@media(max-width:860px){ .reader-grid{ grid-template-columns:1fr; } }

.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }

/* commentary picker (sidebar) */
.picker{ padding:.9rem; position:sticky; top:64px; }
.picker h3{ margin:.2rem 0 .6rem; font-size:.95rem; }
.picker .row-btns{ display:flex; gap:.4rem; margin-bottom:.6rem; }
.picker .group{ margin:.7rem 0 .3rem; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.picker .opt{ display:flex; align-items:center; gap:.5rem; padding:.22rem .1rem; font-size:.9rem; cursor:pointer; }
.picker .opt input{ accent-color:var(--accent); width:15px; height:15px; }
.picker .opt .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.dot.sanskrit{ background:var(--sans) } .dot.hindi{ background:var(--hindi) } .dot.english{ background:var(--english) }

/* verse block */
.verse{ padding:1.1rem 1.3rem; text-align:center; margin-bottom:1rem; }
.verse .label{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.verse .mula{ font-family:var(--font-dev); font-size:calc(1.35rem*var(--content-scale));
  line-height:1.65; color:var(--accent); margin-top:.4rem; }
.verse .mula p{ margin:0; }
.verse .mula .spk{ font-style:italic; }   /* speaker attributions: ...उवाच */

/* commentary cards */
.comm{ margin-bottom:1rem; overflow:hidden; }
.comm > .head{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding:.55rem .9rem; border-bottom:1px solid var(--line); background:var(--panel); }
.comm .badge{ width:9px; height:9px; border-radius:50%; flex:none; }
.comm .who{ font-weight:600; font-size:.95rem; }
.comm .meta{ font-size:.78rem; color:var(--ink-soft); }
.comm .lang-chip{ margin-left:auto; font-size:.7rem; padding:.12rem .5rem; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-soft); text-transform:capitalize; }
.comm .body{ padding:.85rem 1.1rem; font-size:calc(1rem*var(--content-scale)); }
.comm .body.dev{ font-family:var(--font-dev); line-height:1.95; }
.comm .body p{ margin:.35rem 0 }
.comm .body b{ color:var(--accent-soft); font-weight:600 }

/* accent per language (left border) */
.comm.sanskrit{ border-left:4px solid var(--sans) }
.comm.hindi{ border-left:4px solid var(--hindi) }
.comm.english{ border-left:4px solid var(--english) }
.badge.sanskrit{ background:var(--sans) } .badge.hindi{ background:var(--hindi) } .badge.english{ background:var(--english) }

/* ---- compare page ----------------------------------------------------- */
.cmp-verse{ position:sticky; top:56px; z-index:10; }
.cmp-cols{ display:grid; gap:1rem; grid-auto-flow:column; grid-auto-columns:minmax(320px,1fr);
  overflow-x:auto; padding-bottom:.5rem; align-items:start; }
.cmp-cols.stack{ grid-auto-flow:row; grid-auto-columns:1fr; }
@media(max-width:720px){ .cmp-cols{ grid-auto-flow:row; grid-auto-columns:1fr; } }

/* chips (compare picker) */
.chips{ display:flex; gap:.4rem; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .6rem; border-radius:999px;
  border:1px solid var(--line); background:var(--card); font-size:.82rem; cursor:pointer; }
.chip .dot{ width:8px; height:8px; border-radius:50%; }
.chip.on{ background:var(--accent); color:#fff; border-color:var(--accent); }
.chip.on .dot{ box-shadow:0 0 0 2px rgba(255,255,255,.6) inset; }

/* ---- compact reader (mula-only verse index) --------------------------- */
.controls input{ font-family:var(--font-ui); font-size:.9rem; color:var(--ink);
  border:1px solid var(--line); background:var(--card); border-radius:9px; padding:.4rem .7rem; }
.controls input:hover{ border-color:var(--accent-soft); }
.sarch{ flex:1; min-width:140px; max-width:340px; }
.vmeta{ font-size:.82rem; color:var(--ink-soft); white-space:nowrap; }
.vgrid{ display:grid; gap:.6rem; align-items:start; grid-template-columns:1fr; }  /* one verse per row */
.csec{ grid-column:1/-1; margin:.9rem 0 .1rem; font-size:.74rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); border-bottom:1px solid var(--line); padding-bottom:.25rem; }
.vcard{ display:block; padding:.7rem .85rem; color:inherit;
  transition:border-color .12s, box-shadow .12s, transform .04s; }
.vcard:hover{ border-color:var(--accent-soft); text-decoration:none; box-shadow:0 3px 14px rgba(70,50,20,.18); }
.vcard:active{ transform:translateY(1px); }
.vkey{ display:inline-block; font-size:.72rem; font-weight:600; color:var(--accent);
  background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:.04rem .4rem; margin-bottom:.35rem; }
.vmula{ font-family:var(--font-dev); font-size:calc(1.12rem*var(--content-scale)); line-height:1.8;
  color:var(--ink); text-align:center; user-select:text; -webkit-user-select:text; }
.vmula p{ margin:0; text-align:center; }
.vmula .spk{ font-style:italic; color:var(--ink-soft); }
#sentinel{ grid-column:1/-1; height:1px; }
@media(max-width:720px){ .vgrid{ grid-template-columns:1fr; } }

/* ---- script switch (Devanagari / Bengali / IAST) ---------------------- */
html.script-bn{ --font-dev:"Noto Serif Bengali","Noto Sans Bengali","Vrinda",serif; }
html.script-iast{ --font-dev:"Gentium Plus","Cormorant Garamond",Georgia,"Times New Roman",serif; }

/* ---- verse actions (reader): copy / link / bookmark ------------------- */
.vactions{ display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; margin-top:.7rem; }
.iconbtn{ font-family:var(--font-ui); border:1px solid var(--line); background:var(--card); border-radius:8px;
  padding:.25rem .6rem; font-size:.8rem; color:var(--ink-soft); cursor:pointer; }
.iconbtn:hover{ border-color:var(--accent-soft); color:var(--ink); }
.iconbtn.on{ color:var(--gold); border-color:var(--gold); }

/* ---- bookmark star on compact cards ----------------------------------- */
.vcard{ position:relative; }
.vstar{ position:absolute; top:.35rem; right:.45rem; font-size:1rem; line-height:1; color:var(--line);
  cursor:pointer; user-select:none; padding:.05rem .2rem; }
.vstar:hover{ color:var(--gold); }
.vstar.on{ color:var(--gold); }
.vkey{ user-select:text; }
@keyframes flashv{ 0%{ box-shadow:0 0 0 3px var(--gold), var(--shadow); } 100%{ box-shadow:0 0 0 0 rgba(168,132,30,0), var(--shadow); } }
.vcard.flash{ animation:flashv 1.8s ease-out; }

/* ---- full-text search page -------------------------------------------- */
.sresult{ padding:.8rem 1rem; margin-bottom:.75rem; display:block; color:inherit; }
.sresult:hover{ border-color:var(--accent-soft); text-decoration:none; box-shadow:0 3px 14px rgba(70,50,20,.18); }
.sresult .shd{ display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap; margin-bottom:.3rem; }
.sresult .skey{ font-size:.72rem; font-weight:600; color:var(--accent); background:var(--panel);
  border:1px solid var(--line); border-radius:6px; padding:.04rem .4rem; }
.sresult .ssrc{ font-size:.76rem; color:var(--ink-soft); }
.sresult .snip{ font-family:var(--font-dev); line-height:1.65; font-size:calc(1rem*var(--content-scale)); }
.sresult .snip.en{ font-family:var(--font-ui); }
mark{ background:#f7e39c; color:inherit; padding:0 .12rem; border-radius:3px; }

/* misc */
.muted{ color:var(--ink-soft); }
.empty{ padding:2rem 1rem; text-align:center; color:var(--ink-soft); }
.notice{ margin:1rem; padding:1rem 1.2rem; border-left:4px solid var(--gold); background:#fdf6e3;
  border-radius:10px; font-size:.92rem; }
.notice code{ background:#efe6cf; padding:.1rem .35rem; border-radius:5px; }
footer.foot{ text-align:center; color:var(--ink-soft); font-size:.82rem; padding:2rem 1rem; }