/* ============================================================
   Indian Knowledge Systems — shared stylesheet
   Typography and palette follow darshanas-introduction.html
   ============================================================ */
:root{
  --paper:#FAF9F5; --ink:#1B1A17; --ink2:#4A4740; --ink3:#7C786D;
  --rule:#DFDACC; --rule2:#EDEAE0; --wash:#F2F0E9;
  --indigo:#27406B; --indigo-bg:#E7ECF4;
  --verd:#356249;  --verd-bg:#E4EDE7;
  --verm:#A2372A;  --verm-bg:#F6E7E3;
  --orp:#A5730F;   --orp-bg:#F6EEDA;
  --aub:#57376A;   --aub-bg:#EEE6F2;
  --steel:#395C69; --steel-bg:#E4EDF0;
  --teal:#1F6F6B;  --teal-bg:#DFEDEC;
  --measure:44rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:64px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 18px/1.62 'Gentium Book Plus',Georgia,serif;
  font-feature-settings:"kern" 1,"liga" 1;
}
.dev{font-family:'Noto Serif Devanagari','Gentium Book Plus',serif; font-size:.94em; color:var(--ink2)}
.wrap{max-width:1040px; margin:0 auto; padding:0 28px}
.col{max-width:var(--measure)}
.wide{max-width:none}

/* ---------- reading-progress bar ---------- */
#progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:60;
  background:var(--verm); transition:width .1s linear;
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50; background:rgba(250,249,245,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--rule); font-size:.82rem;
}
.topbar .wrap{display:flex; align-items:center; gap:14px; height:44px}
.topbar a{color:var(--ink2); text-decoration:none}
.topbar a:hover{color:var(--verm)}
.topbar .home{font-weight:700; color:var(--ink)}
.topbar .sep{color:var(--rule); }
.topbar .now{color:var(--ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topbar .spacer{flex:1}
.topbar .chip{
  border:1px solid var(--rule); border-radius:999px; padding:2px 10px; color:var(--ink3);
  white-space:nowrap;
}

/* ---------- masthead ---------- */
.mast{padding:70px 0 40px; border-bottom:2px solid var(--ink)}
.mast .sub{font-size:1.05rem; color:var(--ink3); letter-spacing:.02em}
.mast .kicker{
  display:inline-block; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c,var(--verm)); border:1px solid currentColor; border-radius:999px;
  padding:4px 13px; margin-bottom:20px; font-weight:700;
}
.mast h1{
  font-size:clamp(2.4rem,6vw,4.2rem); line-height:1.02; font-weight:700;
  margin:.1em 0 .1em; letter-spacing:-.015em;
}
.mast .devbig{
  font-family:'Noto Serif Devanagari',serif; font-weight:600;
  font-size:clamp(1.6rem,4vw,2.7rem); line-height:1.3; color:var(--c,var(--indigo));
  margin:0 0 .5em;
}
.mast p{max-width:38rem; color:var(--ink2); margin:.9em 0 0}

/* ---------- contents ---------- */
nav.toc{
  margin:34px 0 0; padding:26px 0 30px; border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  columns:3; column-gap:34px; font-size:.92rem;
}
nav.toc a{display:block; color:var(--ink2); text-decoration:none; padding:3px 0; break-inside:avoid}
nav.toc a:hover{color:var(--verm); text-decoration:underline}
nav.toc a.on{color:var(--verm); font-weight:700}
nav.toc .grp{font-weight:700; color:var(--ink); margin-top:.7em; break-inside:avoid}
nav.toc .grp:first-child{margin-top:0}

/* ---------- sections ---------- */
section{padding:60px 0 8px; border-top:1px solid var(--rule2)}
section:first-of-type{border-top:none}
h2{font-size:2.05rem; line-height:1.12; font-weight:700; margin:0 0 .1em; letter-spacing:-.01em}
h2 .num{color:var(--ink3); font-weight:400; margin-right:.5em}
h2 .dv{font-family:'Noto Serif Devanagari',serif; font-weight:400; font-size:.72em; color:var(--ink3); margin-left:.45em}
h3{font-size:1.28rem; font-weight:700; margin:2.1em 0 .35em}
h4{font-size:1.02rem; font-weight:700; margin:1.6em 0 .2em; color:var(--ink2)}
p{margin:0 0 1.05em; max-width:var(--measure)}
ul,ol{max-width:var(--measure); padding-left:1.15em; margin:0 0 1.1em}
li{margin:.3em 0}
em{font-style:italic}
a{color:var(--verm)}
.lede{font-size:1.12rem; color:var(--ink2); max-width:40rem}
.tagline{
  font-size:1.02rem; color:var(--ink2); margin:.5em 0 1.4em; max-width:40rem;
  padding-bottom:1.1em; border-bottom:1px solid var(--rule);
}
.tagline b{color:var(--c)}
.acc{border-left:4px solid var(--c,var(--ink)); padding-left:22px; margin-left:-26px}
.acc h2{color:var(--c)}

/* ---------- figures ---------- */
figure{margin:34px 0 38px; max-width:100%}
figure svg{width:100%; height:auto; display:block}
figcaption{font-size:.86rem; color:var(--ink3); margin-top:10px; max-width:40rem; line-height:1.5}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}
.scroll-x svg{min-width:640px}
.n-t{font:700 14px 'Gentium Book Plus',serif}
.n-d{font:400 13px 'Noto Serif Devanagari',serif}
.n-s{font:400 11.5px 'Gentium Book Plus',serif}
.n-xs{font:400 10px 'Gentium Book Plus',serif}
.n-l{font:700 11.5px 'Gentium Book Plus',serif; letter-spacing:.04em}
.n-b{font:700 13px 'Gentium Book Plus',serif}
.n-num{font:700 22px 'Gentium Book Plus',serif}
.arr{stroke:#8C887C; stroke-width:1.1; fill:none}

/* ---------- tables ---------- */
.tbl{margin:26px 0 32px; overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:.93rem}
caption{text-align:left; font-size:.86rem; color:var(--ink3); padding-bottom:9px}
th,td{text-align:left; padding:9px 14px 9px 0; vertical-align:top; border-bottom:1px solid var(--rule2)}
thead th{border-bottom:1.5px solid var(--ink); font-weight:700; font-size:.84rem; color:var(--ink)}
tbody tr:hover{background:var(--wash)}
td.dv,th.dv{font-family:'Noto Serif Devanagari',serif; white-space:nowrap; color:var(--ink2)}
td.ia{white-space:nowrap; font-weight:700}
td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- notes / callouts ---------- */
.note{
  background:var(--bg,var(--wash)); border-radius:3px; padding:18px 22px;
  margin:26px 0; max-width:var(--measure); font-size:.95rem; line-height:1.56;
}
.note b{display:block; margin-bottom:.25em}
.note p{max-width:none}
.note p:last-child{margin-bottom:0}
.note.tip{--bg:var(--verd-bg)}
.note.caution{--bg:var(--verm-bg)}
.note.src{--bg:var(--orp-bg)}
.note.idea{--bg:var(--aub-bg)}
.note.cool{--bg:var(--steel-bg)}

.sutra{font-family:'Noto Serif Devanagari',serif; font-size:1.06rem; line-height:1.75; color:var(--ink); margin:.2em 0 .35em; overflow-wrap:anywhere}
.sutra-t{font-style:italic; color:var(--ink2); font-size:.98rem; margin:0 0 .3em}
.sutra-r{font-size:.84rem; color:var(--ink3)}
blockquote{margin:24px 0; padding-left:20px; border-left:2px solid var(--rule); max-width:40rem; color:var(--ink2)}

/* ---------- cards ---------- */
.grid{display:grid; gap:18px; margin:28px 0 34px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  border:1px solid var(--rule); border-radius:5px; padding:18px 20px; background:#fff;
  border-top:3px solid var(--c,var(--ink3));
}
.card h4{margin:0 0 .35em; color:var(--c,var(--ink)); font-size:1.02rem}
.card .dv{display:block; font-size:.86rem; margin:-.2em 0 .5em}
.card p{font-size:.9rem; margin:0 0 .6em; color:var(--ink2); max-width:none; line-height:1.5}
.card p:last-child{margin-bottom:0}
.card ul{font-size:.88rem; margin:0; max-width:none; color:var(--ink2)}

/* ---------- stat strip ---------- */
.stats{display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1.5px solid var(--ink); border-bottom:1px solid var(--rule); margin:30px 0 34px}
.stat{padding:16px 18px 15px; border-left:1px solid var(--rule2)}
.stat:first-child{border-left:none}
.stat b{display:block; font-size:1.85rem; line-height:1.1; color:var(--c,var(--verm)); font-weight:700; letter-spacing:-.02em}
.stat span{display:block; font-size:.8rem; color:var(--ink3); margin-top:5px; line-height:1.35}

/* ---------- timeline ---------- */
.tl{margin:30px 0 36px; max-width:var(--measure); position:relative; padding-left:26px}
.tl:before{content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--rule)}
.tl .ev{position:relative; margin:0 0 20px}
.tl .ev:before{content:""; position:absolute; left:-26px; top:8px; width:9px; height:9px; border-radius:50%;
  background:var(--paper); border:2px solid var(--c,var(--verm))}
.tl .yr{font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--c,var(--verm)); font-weight:700}
.tl .ti{font-weight:700; font-size:1rem}
.tl p{font-size:.92rem; color:var(--ink2); margin:.15em 0 0}

/* ---------- tabs ---------- */
.tabs{margin:28px 0 34px; border:1px solid var(--rule); border-radius:5px; overflow:hidden; background:#fff}
.tabs .bar{display:flex; flex-wrap:wrap; gap:0; background:var(--wash); border-bottom:1px solid var(--rule)}
.tabs .bar button{
  font:inherit; font-size:.88rem; border:none; background:none; cursor:pointer; padding:11px 17px;
  color:var(--ink3); border-bottom:2px solid transparent; white-space:nowrap;
}
.tabs .bar button:hover{color:var(--ink)}
.tabs .bar button[aria-selected="true"]{color:var(--c,var(--verm)); border-bottom-color:var(--c,var(--verm)); font-weight:700; background:#fff}
.tabs .pane{padding:20px 22px 8px; display:none}
.tabs .pane.on{display:block}
.tabs .pane > :first-child{margin-top:0}

/* ---------- accordion ---------- */
details.qa{border-bottom:1px solid var(--rule2); padding:12px 0; max-width:var(--measure)}
details.qa summary{cursor:pointer; font-weight:700; font-size:1rem; list-style:none; display:flex; gap:10px; align-items:baseline}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary:before{content:"+"; color:var(--verm); font-weight:700; width:14px; flex:none}
details.qa[open] summary:before{content:"–"}
details.qa .body{padding:.6em 0 .2em 24px; font-size:.95rem; color:var(--ink2)}
details.qa .body p{max-width:none}

/* ---------- self-check quiz ---------- */
.quiz{border:1px solid var(--rule); border-radius:5px; background:#fff; padding:20px 22px; margin:30px 0 34px; max-width:var(--measure)}
.quiz > b{display:block; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--verm); margin-bottom:14px}
.quiz .q{margin:0 0 18px; padding-bottom:16px; border-bottom:1px solid var(--rule2)}
.quiz .q:last-child{margin-bottom:0; padding-bottom:0; border-bottom:none}
.quiz .q p{font-weight:700; font-size:.98rem; margin:0 0 .55em; max-width:none}
.quiz .opt{
  display:block; width:100%; text-align:left; font:inherit; font-size:.92rem;
  border:1px solid var(--rule); background:var(--paper); border-radius:4px;
  padding:8px 13px; margin:0 0 7px; cursor:pointer; color:var(--ink2);
}
.quiz .opt:hover{border-color:var(--ink3)}
.quiz .opt.right{background:var(--verd-bg); border-color:var(--verd); color:var(--verd); font-weight:700}
.quiz .opt.wrong{background:var(--verm-bg); border-color:var(--verm); color:var(--verm); text-decoration:line-through}
.quiz .why{font-size:.88rem; color:var(--ink3); margin:.4em 0 0; display:none}
.quiz .why.on{display:block}

/* ---------- misc ---------- */
.pill{display:inline-block; font-size:.74rem; letter-spacing:.07em; text-transform:uppercase; font-weight:700;
  color:var(--c,var(--ink3)); background:var(--bg,var(--wash)); border-radius:999px; padding:3px 11px; margin:0 6px 6px 0}
.kicker{font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink3); font-weight:700}
.two{columns:2; column-gap:34px}
.two li{break-inside:avoid}
hr.dot{border:none; border-top:1px dotted var(--rule); margin:34px 0; max-width:var(--measure)}
.nextprev{display:flex; gap:16px; flex-wrap:wrap; margin:44px 0 0; padding-top:26px; border-top:1px solid var(--rule)}
.nextprev a{
  flex:1 1 240px; text-decoration:none; border:1px solid var(--rule); border-radius:5px;
  padding:14px 18px; color:var(--ink); background:#fff;
}
.nextprev a:hover{border-color:var(--verm)}
.nextprev span{display:block; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3)}
.nextprev b{display:block; font-size:1rem; margin-top:3px}
footer{padding:54px 0 90px; border-top:2px solid var(--ink); margin-top:56px; color:var(--ink3); font-size:.9rem}
footer p{max-width:44rem}

@media (max-width:860px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  body{font-size:17px}
  nav.toc{columns:1}
  .acc{margin-left:0; padding-left:16px}
  .wrap{padding:0 20px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .two{columns:1}
  .mast{padding:44px 0 32px}
  .topbar .now{display:none}
  .topbar .chip{display:none}
  /* a long breadcrumb scrolls inside the bar rather than widening the page */
  .topbar .wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .topbar .wrap::-webkit-scrollbar{display:none}
  .topbar a,.topbar .sep{flex:none; white-space:nowrap}
}
@media print{
  body{background:#fff; font-size:10.5pt}
  .topbar,#progress,.nextprev,.quiz .opt{display:none}
  nav.toc{columns:2}
  section{page-break-inside:auto; padding-top:30px}
  figure,table,.note,.card{page-break-inside:avoid}
  h2,h3{page-break-after:avoid}
  .tabs .pane{display:block !important}
  details.qa{display:block}
  details.qa .body{display:block !important}
}

/* ============================================================
   Darśana tier-2 / tier-3 additions
   ============================================================ */

/* ---------- spec sheet for a school ---------- */
.facts{
  border-top:1.5px solid var(--c,var(--ink)); border-bottom:1px solid var(--rule);
  margin:30px 0 34px; font-size:.93rem;
}
.facts .row{display:flex; gap:20px; padding:11px 0; border-top:1px solid var(--rule2)}
.facts .row:first-child{border-top:none}
.facts .k{
  flex:0 0 152px; font-size:.76rem; letter-spacing:.11em; text-transform:uppercase;
  font-weight:700; color:var(--c,var(--ink3)); padding-top:.18em;
}
.facts .v{flex:1; color:var(--ink2)}
.facts .v b{color:var(--ink)}
.facts .v .dev{display:inline}
@media (max-width:640px){ .facts .row{flex-direction:column; gap:3px} .facts .k{flex:none} }

/* ---------- objection / reply ---------- */
.dialog{margin:28px 0 34px; max-width:var(--measure)}
.dialog .turn{
  border-left:3px solid var(--rule); padding:2px 0 2px 20px; margin:0 0 18px;
  font-size:.95rem; line-height:1.58;
}
.dialog .turn:last-child{margin-bottom:0}
.dialog .turn.obj{border-left-color:var(--verm)}
.dialog .turn.rep{border-left-color:var(--verd)}
.dialog .who{
  display:block; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; margin-bottom:.3em;
}
.dialog .turn.obj .who{color:var(--verm)}
.dialog .turn.rep .who{color:var(--verd)}
.dialog p{margin:0 0 .6em; max-width:none}
.dialog p:last-child{margin-bottom:0}

/* ---------- comparison matrix ---------- */
.mtx{margin:28px 0 34px; overflow-x:auto}
.mtx table{min-width:720px; font-size:.88rem}
.mtx th[scope="row"]{
  position:sticky; left:0; background:var(--paper); z-index:1;
  font-weight:700; padding-right:16px; border-right:1px solid var(--rule2);
  font-size:.84rem;
}
.mtx thead th{vertical-align:bottom; padding-bottom:8px}
.mtx td{padding:9px 14px 9px 0}
.mtx tbody tr:hover th[scope="row"]{background:var(--wash)}

/* ---------- hub cards ---------- */
.hub{display:grid; gap:18px; grid-template-columns:repeat(2,1fr); margin:26px 0 8px}
a.hcard{
  display:block; text-decoration:none; color:inherit; background:#fff;
  border:1px solid var(--rule); border-radius:6px; border-left:5px solid var(--c,var(--ink3));
  padding:18px 20px; transition:border-color .15s, transform .15s;
}
a.hcard:hover{border-color:var(--c,var(--verm)); transform:translateY(-2px)}
a.hcard .hd{display:flex; align-items:baseline; gap:10px; margin-bottom:.35em}
a.hcard h3{font-size:1.16rem; margin:0; color:var(--ink); line-height:1.2}
a.hcard .dv{font-family:'Noto Serif Devanagari',serif; font-size:.92rem; color:var(--c,var(--ink3))}
a.hcard .tag{
  margin-left:auto; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c,var(--ink3)); border:1px solid currentColor; border-radius:999px; padding:2px 9px; white-space:nowrap;
}
a.hcard p{font-size:.9rem; color:var(--ink2); margin:0; max-width:none; line-height:1.5}
a.hcard .meta{font-size:.78rem; color:var(--ink3); margin-top:.6em; display:block}
a.hcard .hk{
  display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--c,var(--ink3)); margin-bottom:.45em;
}
a.hcard .terms{margin:.75em 0 0}
@media (max-width:760px){ .hub{grid-template-columns:1fr} }

/* ---------- inline term pills ---------- */
.terms{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 1.1em; max-width:var(--measure)}
.terms span{
  font-size:.76rem; color:var(--ink2); background:var(--wash);
  border-radius:3px; padding:4px 9px;
}
.terms b{color:var(--c,var(--ink)); font-weight:700}

/* ---------- site-map tree ---------- */
.treebar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:26px 0 6px; padding:12px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
#tq{
  flex:1 1 280px; min-width:0; font:inherit; font-size:.95rem; color:var(--ink);
  background:#fff; border:1px solid var(--rule); border-radius:4px; padding:8px 12px;
}
#tq:focus{outline:none; border-color:var(--c,var(--verm)); box-shadow:0 0 0 3px rgba(162,55,42,.10)}
.tbtn{
  font:inherit; font-size:.8rem; letter-spacing:.04em; color:var(--ink2); cursor:pointer;
  background:#fff; border:1px solid var(--rule); border-radius:4px; padding:7px 12px;
}
.tbtn:hover{border-color:var(--c,var(--verm)); color:var(--c,var(--verm))}
.t-stat{font-size:.78rem; color:var(--ink3); margin-left:auto; white-space:nowrap}

.tree{font-size:.92rem; margin:4px 0 8px; line-height:1.45}
.tree ul{list-style:none; margin:0; padding:0}
.tree .t-root{padding:0}
.tree .t-root > li{margin:0 0 4px}
.tree details > ul{
  margin:2px 0 6px 10px; padding-left:14px;
  border-left:1px solid var(--rule2);
}
.tree summary{
  display:flex; align-items:baseline; gap:9px; cursor:pointer; list-style:none;
  padding:4px 8px 4px 20px; border-radius:4px; position:relative;
}
.tree summary::-webkit-details-marker{display:none}
.tree summary::before{
  content:""; position:absolute; left:6px; top:.62em;
  border:4px solid transparent; border-left-color:var(--c,var(--ink3));
  transition:transform .12s; transform-origin:2px 4px;
}
.tree details[open] > summary::before{transform:rotate(90deg)}
.tree summary:hover{background:var(--wash)}
.tree summary a{color:var(--ink); text-decoration:none; font-weight:700}
.tree summary a:hover{color:var(--c,var(--verm)); text-decoration:underline}
.tree .t-k{
  flex:none; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:var(--c,var(--ink3)); border:1px solid currentColor; border-radius:999px;
  padding:1px 7px; position:relative; top:-1px;
}
.tree .t-n{margin-left:auto; flex:none; font-size:.74rem; color:var(--ink3); white-space:nowrap}
.tree .dv{font-family:'Noto Serif Devanagari',serif; font-size:.82rem; color:var(--ink3)}

.tree .t-part > details > summary{font-size:1.02rem; padding-top:7px; padding-bottom:7px}
.tree .t-part > details > summary a{font-size:1.06rem}
.tree .t-tier > details > summary{background:var(--wash)}

.tree li.t-sec{margin:0}
.tree li.t-sec > a{
  display:flex; align-items:baseline; gap:9px; text-decoration:none; color:var(--ink2);
  padding:3px 8px 3px 20px; border-radius:4px;
}
.tree li.t-sec > a:hover{background:var(--wash); color:var(--c,var(--verm))}
.tree li.t-sec i{
  flex:none; font-style:normal; font-variant-numeric:tabular-nums;
  font-size:.74rem; color:var(--ink3); min-width:1.4em; text-align:right;
}
.tree li.t-sec .t-t{flex:0 1 auto}
.tree li.t-hubsec > a{color:var(--ink3)}

.tree .t-hide{display:none}
.tree .t-hit > a, .tree .t-hit > details > summary{background:#FBF0CE}
.tree .t-hit > details > summary a, .tree .t-hit > a{color:var(--ink)}
.t-empty{padding:18px 4px; color:var(--ink3); font-size:.92rem}

@media (max-width:760px){
  .tree details > ul{margin-left:2px; padding-left:10px}
  .tree summary{padding-left:18px; flex-wrap:wrap; gap:6px}
  .tree .t-n{margin-left:0; flex-basis:100%}
  .tree li.t-sec > a{padding-left:18px}
  .t-stat{margin-left:0; flex-basis:100%}
}
@media print{
  .treebar{display:none}
  .tree details{display:block}
  .tree details > ul{display:block}
}
.tree .t-why{
  margin-left:8px; font-size:.76rem; color:var(--ink3); font-style:italic;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:26em;
}
.tree .t-why::before{content:"↳ "; font-style:normal}