/* Class 9 Ganita Manjari Part 2 - chapter UI.
   Mobile-first. One accent, warm paper, hairline rules, no decorative colour. */

:root{
  color-scheme:light;

  /* Ink and paper */
  --ink:#16201f;
  --ink-2:#3d4c4a;
  --muted:#5d6b69;
  --paper:#fffdf9;
  --canvas:#f3f1ea;
  --line:#ded9cb;
  --line-2:#ece8dd;

  /* One accent */
  --accent:#0f766e;
  --accent-deep:#0b4f49;
  --accent-tint:#e9f3f1;
  --focus:#b45309;

  /* Meaning only */
  --ok:#146b31;
  --ok-tint:#e9f4eb;
  --ok-line:#b7dcc1;
  --no:#a42218;
  --no-tint:#fbeceb;
  --no-line:#eec3bd;
  --mark:#8a5a09;
  --mark-tint:#faf2e3;
  --mark-line:#e8d7ae;

  /* 4px rhythm */
  --s1:4px;
  --s2:8px;
  --s3:12px;
  --s4:16px;
  --s5:20px;
  --s6:24px;
  --s7:32px;
  --s8:40px;

  --gutter:16px;
  --pad:var(--s4);
  --gap:var(--s3);
  --r-sm:4px;
  --r-md:8px;

  /* Seven type steps, nothing between */
  --t-label:11px;
  --t-xs:12px;
  --t-sm:13px;
  --t-md:15px;
  --t-base:16px;
  --t-h3:clamp(15px,3.7vw,16px);
  --t-h2:clamp(17.5px,4.6vw,20px);
  --t-h1:clamp(21px,6.2vw,30px);

  --sans:"Source Sans 3",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --shell:43rem;
  --sticky-top:0px;
  --tabbar:46px;
  --subbar:46px;
  --shadow-bar:0 8px 18px -14px rgba(22,32,31,.5);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}

button,input,select,textarea{font:inherit}

html{
  background:var(--canvas);
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  scroll-behavior:smooth;
}

body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-base);
  line-height:1.62;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

.skip{
  position:absolute;
  left:var(--s3);
  top:-120px;
  z-index:60;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:var(--s2) var(--s3);
  background:var(--paper);
  color:var(--accent-deep);
  border-radius:var(--r-sm);
  font-size:var(--t-sm);
  font-weight:700;
  text-decoration:none;
  box-shadow:var(--shadow-bar);
}
.skip:focus{top:var(--s2)}

/* Exponents and indices must stay legible at 360px. */
sup,sub{
  position:relative;
  font-size:.78em;
  font-weight:600;
  line-height:0;
  vertical-align:baseline;
}
sup{top:-.45em}
sub{bottom:-.28em}

/* ---------- Masthead ---------- */
.top{
  background:var(--accent-deep);
  color:#eaf4f2;
  padding:var(--s4) var(--gutter) var(--s5);
}
.top .hero{max-width:var(--shell);margin:0 auto}

.crumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s2);
  font-size:var(--t-xs);
  line-height:1.5;
  color:#9dbdb8;
}
.crumb a{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  color:#e2f0ee;
  text-decoration:none;
  border-bottom:1px solid rgba(226,240,238,.35);
}
.crumb a:hover{border-bottom-color:#e2f0ee}

.top h1{
  font-family:var(--serif);
  font-size:var(--t-h1);
  font-weight:600;
  line-height:1.16;
  letter-spacing:-.005em;
  color:#fff;
  margin:var(--s2) 0 var(--s2);
  text-wrap:balance;
}
.top .sub{
  font-size:var(--t-sm);
  line-height:1.55;
  color:#a8c7c2;
  max-width:60ch;
}

/* ---------- Shell ---------- */
.wrap{
  max-width:var(--shell);
  margin:0 auto;
  padding:var(--s4) var(--gutter) var(--s8);
}

/* ---------- Main tabs: full-bleed toolbar, no sideways scroll ---------- */
.tabs{
  position:sticky;
  top:var(--sticky-top);
  z-index:30;
  display:flex;
  gap:var(--s1);
  min-height:var(--tabbar);
  margin-inline:calc(var(--gutter) * -1);
  padding:var(--s1) var(--gutter);
  background:var(--paper);
  border:0;
  border-top:1px solid transparent;
  border-bottom:1px solid var(--line);
}
.tabbtn{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:var(--s1) var(--s2);
  border:0;
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:clamp(11.5px,3.3vw,13.5px);
  font-weight:600;
  letter-spacing:-.005em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.tabbtn:hover{background:var(--canvas);color:var(--ink)}
.tabbtn,.subtab{text-decoration:none}
.tabbtn.on{background:var(--accent);color:#fff;font-weight:700}
.tabbtn:active{transform:translateY(1px)}

/* ---------- Exercise sub-tabs: one row, equal chips ---------- */
.subtabs{
  position:sticky;
  top:calc(var(--sticky-top) + var(--tabbar));
  z-index:25;
  display:flex;
  gap:var(--s1);
  min-height:var(--subbar);
  margin-inline:calc(var(--gutter) * -1);
  padding:var(--s1) var(--gutter);
  background:var(--paper);
  border:0;
  border-top:1px solid transparent;
  border-bottom:1px solid var(--line);
  margin-bottom:var(--gap);
}
.subtab{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:var(--s1) var(--s2);
  border:1px solid transparent;
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:clamp(11px,3.1vw,13px);
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.subtab:hover{background:var(--canvas);color:var(--ink)}
.subtab.on{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-deep);font-weight:700}

/* Source HTML includes every lesson. No-JS readers and crawlers receive the
   complete document; enhanced browsers see one selected panel at a time. */
.panel,.subpanel{display:block}
html.chapter-tabs-ready .panel:not(.on),
html.chapter-tabs-ready .subpanel:not(.on){display:none}
.panel{margin-block:var(--s6)}
.chapter-neighbours{display:grid;gap:var(--s3);padding-block:var(--s5);border-top:1px solid var(--line)}
.chapter-neighbours a{color:var(--accent-deep);line-height:1.5;overflow-wrap:anywhere}
.subpanel{margin-block:var(--s5)}
.exercise-stepper{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:var(--s2);
  margin-top:var(--s5);
  padding-top:var(--s4);
  border-top:1px solid var(--line);
}
.exercise-stepper-button{
  min-height:44px;
  padding:var(--s2) var(--s3);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--paper);
  color:var(--accent-deep);
  font:inherit;
  font-size:var(--t-sm);
  font-weight:700;
  cursor:pointer;
}
.exercise-stepper-button:first-child{justify-self:start}
.exercise-stepper-next{justify-self:end;background:var(--accent);border-color:var(--accent);color:#fff}
.exercise-stepper-button:hover:not(:disabled){filter:brightness(.96)}
.exercise-stepper-button:disabled{opacity:.48;cursor:default}
.exercise-stepper-position{color:var(--muted);font-size:var(--t-xs);font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}

/* Every scroll target clears the sticky toolbar. */
:where(.panel,.subpanel,[id]){scroll-margin-top:calc(var(--sticky-top) + var(--tabbar) + var(--s3))}
#p-exercises .subpanel{scroll-margin-top:calc(var(--sticky-top) + var(--tabbar) + var(--subbar) + var(--s3))}

/* ---------- Cards ---------- */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--pad);
  margin-bottom:var(--gap);
}
.card:last-child{margin-bottom:0}

.card>h2{
  font-family:var(--serif);
  font-size:var(--t-h2);
  font-weight:600;
  line-height:1.28;
  color:var(--ink);
  letter-spacing:-.005em;
  margin-bottom:var(--s3);
  padding-left:var(--s8);
  text-indent:calc(var(--s8) * -1);
  text-wrap:pretty;
}
.card>h2:first-child{margin-top:0}
.card h3{
  font-family:var(--serif);
  font-size:var(--t-h3);
  font-weight:600;
  line-height:1.35;
  color:var(--ink);
  margin:var(--s4) 0 var(--s2);
}
.card p,.card li,.db p,.db li{
  font-size:var(--t-base);
  line-height:1.62;
  color:var(--ink-2);
}
.card p+p,.db p+p{margin-top:var(--s3)}
.card ul,.card ol,.db ul,.db ol{padding-left:var(--s5)}
.card li+li,.db li+li{margin-top:var(--s2)}

.muted{color:var(--muted);font-size:var(--t-sm);line-height:1.55}
.lede{font-size:var(--t-base);line-height:1.6;color:var(--ink-2)}

.eyebrow{
  font-size:var(--t-label);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:var(--s1);
}

.section-no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:var(--r-sm);
  background:var(--accent-tint);
  color:var(--accent-deep);
  font-family:var(--sans);
  font-size:var(--t-xs);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  vertical-align:middle;
  margin-right:var(--s3);
}

/* ---------- Learning map / rules: one accent, never a rainbow ---------- */
.concept-grid,.rule-grid{display:grid;gap:var(--s2);margin-top:var(--s3);grid-template-columns:1fr}
.concept-card,.rule{
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  background:var(--canvas);
  border-radius:var(--r-sm);
  padding:var(--s3);
}
.concept-card b,.rule b{
  display:block;
  font-family:var(--sans);
  font-size:var(--t-sm);
  font-weight:700;
  color:var(--ink);
  margin-bottom:2px;
}
.concept-card span,.rule span{
  display:block;
  font-size:var(--t-sm);
  line-height:1.5;
  color:var(--muted);
}

/* ---------- Lists ---------- */
ul.t{list-style:none;padding-left:0}
ul.t li{padding-left:var(--s4);position:relative;margin:0}
ul.t li+li{margin-top:var(--s2)}
ul.t li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:1px;
  background:var(--accent);
}

/* ---------- Callouts: neutral + three meanings, nothing else ---------- */
.box{
  background:var(--canvas);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:var(--s3);
  margin:var(--s3) 0;
  font-size:var(--t-md);
  line-height:1.58;
}
.formula{
  font-family:var(--serif);
  font-size:clamp(16px,4.4vw,19px);
  line-height:1.5;
  color:var(--ink);
  text-align:center;
}
.arrow{color:var(--accent);font-weight:700;padding:0 2px}

.nt,.tp,.warn,.cv,.exercise-note{
  border-radius:var(--r-sm);
  padding:var(--s3);
  margin:var(--s3) 0;
  font-size:var(--t-md);
  line-height:1.58;
}
.nt{background:var(--mark-tint);border:1px solid var(--mark-line);border-left:3px solid var(--mark);color:#5a3e07}
.tp{background:var(--accent-tint);border:1px solid #bedcd8;border-left:3px solid var(--accent);color:#0a4742}
.warn{background:var(--no-tint);border:1px solid var(--no-line);border-left:3px solid var(--no);color:#7c1c15}
.cv{background:var(--accent-tint);border-left:3px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink-2)}
.exercise-note{background:var(--mark-tint);border-left:3px solid var(--mark);border-radius:0 var(--r-sm) var(--r-sm) 0;color:#5a3e07}
.project{border-left-color:var(--accent);background:var(--accent-tint);color:#0a4742}
.figure-note{
  background:var(--canvas);
  border:1px dashed var(--line);
  border-radius:var(--r-sm);
  padding:var(--s3);
  margin:var(--s3) 0;
  font-size:var(--t-sm);
  line-height:1.55;
  color:var(--muted);
}

/* ---------- Tables ---------- */
.data-table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s3) 0}
table{
  width:100%;
  min-width:100%;
  border-collapse:collapse;
  font-size:var(--t-sm);
  font-variant-numeric:tabular-nums;
  margin:var(--s3) 0;
}
th,td{border:1px solid var(--line);padding:var(--s2) var(--s3);text-align:left;vertical-align:top}
th{background:var(--accent-tint);color:var(--accent-deep);font-weight:700;font-size:var(--t-sm)}
tbody tr:nth-child(even){background:var(--canvas)}

/* ---------- True / False markers ---------- */
.pi{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:1px var(--s2);
  border-radius:var(--r-sm);
  font-size:var(--t-xs);
  font-weight:700;
  line-height:1.4;
  font-variant-numeric:tabular-nums;
  vertical-align:1px;
  margin:0 var(--s1) var(--s1) 0;
}
.T{background:var(--ok-tint);color:var(--ok);border:1px solid var(--ok-line)}
.F{background:var(--no-tint);color:var(--no);border:1px solid var(--no-line)}

/* ---------- Question accordion ---------- */
details{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  margin:0 0 var(--s2);
  overflow:hidden;
}
summary{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:flex-start;
  gap:var(--s3);
  min-height:52px;
  padding:var(--s3);
  background:var(--canvas);
  color:var(--ink);
  font-size:var(--t-md);
  font-weight:600;
  line-height:1.5;
  cursor:pointer;
  list-style:none;
  overflow-wrap:break-word;
  word-break:normal;
  transition:background .15s ease;
}
summary::-webkit-details-marker{display:none}
summary::marker{content:""}
summary:hover{background:var(--line-2)}
summary::after{
  content:"";
  width:8px;
  height:8px;
  margin-top:8px;
  flex-shrink:0;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
  transition:transform .18s ease;
}
details[open] summary{background:var(--paper);border-bottom:1px solid var(--line)}
details[open] summary::after{transform:rotate(225deg)}

.q-content{
  display:block;
  min-width:0;
  width:100%;
}
.qn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:26px;
  margin-top:2px;
  flex-shrink:0;
  padding:0 var(--s1);
  border-radius:var(--r-sm);
  background:var(--accent-tint);
  color:var(--accent-deep);
  font-family:var(--sans);
  font-size:var(--t-xs);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.db{padding:var(--s3);overflow-wrap:anywhere}
.db>*+*{margin-top:var(--s3)}
.db ul,.db ol{margin-top:var(--s2)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s1);
  min-height:44px;
  padding:0 var(--s4);
  border:1px solid transparent;
  border-radius:var(--r-md);
  font-family:var(--sans);
  font-size:var(--t-md);
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btnp{background:var(--accent);color:#fff}
.btnp:hover{background:var(--accent-deep)}
.btng{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btng:hover{background:var(--canvas);border-color:#cfc9b8}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- Answers ---------- */
.an{
  display:block;
  background:var(--ok-tint);
  border:1px solid var(--ok-line);
  border-left:3px solid var(--ok);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:var(--s3);
  margin-top:var(--s2);
  font-size:var(--t-md);
  line-height:1.6;
  color:#134c26;
  white-space:pre-line;
}
.sh .an,.sh>.an{display:block}
.tog{display:none}
.answer-ready .tog{display:inline-flex}
.answer-ready:not(.sh) .an{display:none}

.answer-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s2);
  flex-wrap:wrap;
  margin-top:var(--s3);
  padding-top:var(--s3);
  border-top:1px dashed var(--line);
}
.answer-kicker{
  font-size:var(--t-label);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ok);
}
.answer-text{white-space:pre-line}

/* ---------- Worksheet levels ---------- */
.ws{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  margin-bottom:var(--s2);
  overflow:hidden;
}
.wh{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  width:100%;
  min-height:52px;
  padding:var(--s3);
  background:var(--canvas);
  color:var(--ink);
  border:0;
  text-align:left;
  font:inherit;
  font-size:var(--t-md);
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease;
}
.wh:hover{background:var(--line-2)}
.wh h3{font-family:var(--serif);font-size:var(--t-h3);font-weight:600;line-height:1.35;margin:0}
.wh::after{
  content:"";
  flex:0 0 auto;
  width:8px;
  height:8px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.ws.opn .wh{background:var(--accent-tint);color:var(--accent-deep)}
.ws.opn .wh::after{transform:rotate(225deg);border-color:var(--accent-deep)}
.wb{display:none;padding:var(--s3);border-top:1px solid var(--line)}
.ws.opn .wb{display:block}

/* ---------- Study links ---------- */
.study-links{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s2);
  margin-top:var(--s4);
  padding-top:var(--s3);
  border-top:1px solid var(--line);
}
.study-links-label{
  width:100%;
  font-size:var(--t-label);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}
.exercise-link{
  display:inline-flex;
  align-items:center;
  flex:1 1 8rem;
  min-width:0;
  min-height:44px;
  padding:var(--s2) var(--s3);
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:var(--r-sm);
  background:var(--paper);
  color:var(--accent-deep);
  font-size:var(--t-sm);
  font-weight:600;
  text-decoration:none;
  transition:background .15s ease,border-color .15s ease;
}
.exercise-link:hover{background:var(--accent-tint);border-color:#bedcd8}
.exercise-link:active{transform:translateY(1px)}

/* ---------- Mini test ---------- */
#quiz{margin-top:var(--gap)}

.mc{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s3);
  margin-bottom:var(--s2);
  counter-reset:option;
}
.mc h4{
  font-family:var(--sans);
  font-size:var(--t-md);
  font-weight:600;
  line-height:1.5;
  color:var(--ink);
  margin-bottom:var(--s3);
}
/* Worksheet cards: a full-width answer toggle reads better than a floating chip. */
.mc>.tog{width:100%}
.op{
  counter-increment:option;
  display:flex;
  align-items:flex-start;
  gap:var(--s2);
  width:100%;
  min-height:44px;
  padding:var(--s2) var(--s3);
  margin-bottom:var(--s1);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--paper);
  color:var(--ink-2);
  font:inherit;
  font-size:var(--t-md);
  font-weight:400;
  line-height:1.5;
  text-align:left;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.op:last-child{margin-bottom:0}
.op::before{
  content:counter(option,upper-alpha);
  flex:0 0 auto;
  width:22px;
  height:22px;
  margin-top:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--canvas);
  color:var(--muted);
  font-size:var(--t-xs);
  font-weight:700;
}
.op:hover:not(:disabled){background:var(--accent-tint);border-color:#bedcd8}
.op.ok{background:var(--ok-tint);border-color:var(--ok);color:#134c26;font-weight:600}
.op.ok::before{background:var(--ok);border-color:var(--ok);color:#fff}
.op.no{background:var(--no-tint);border-color:var(--no);color:#7c1c15;font-weight:600}
.op.no::before{background:var(--no);border-color:var(--no);color:#fff}
.op:disabled{cursor:default}

.pb{height:6px;background:var(--line-2);border-radius:999px;overflow:hidden;margin-top:var(--s3)}
.pb i,.pb span,.pb #tbar{display:block;height:100%;width:0;background:var(--accent);transition:width .25s ease}

.sb{
  position:static;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s2);
  margin:var(--s4) calc(var(--gutter) * -1) 0;
  padding:var(--s2) var(--gutter) calc(var(--s2) + env(safe-area-inset-bottom,0px));
  background:var(--accent-deep);
  color:#fff;
  font-size:var(--t-sm);
  font-weight:600;
}
.sb>span:last-child{display:flex;gap:var(--s2)}
.sb .btn{min-height:40px;padding:0 var(--s3);font-size:var(--t-sm)}
.sb .btnp{background:#fff;color:var(--accent-deep)}
.sb .btnp:hover{background:var(--accent-tint)}
.sb .btng{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.sb .btng:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ---------- Chapter map ---------- */
.toc{
  background:var(--canvas);
  border:1px dashed var(--line);
  border-radius:var(--r-md);
  margin-top:var(--s4);
}
.toc>summary{
  min-height:44px;
  padding:var(--s2) var(--s3);
  background:transparent;
  font-size:var(--t-sm);
  font-weight:700;
  color:var(--ink-2);
}
.toc>summary:hover{background:var(--line-2)}
.toc[open]>summary{border-bottom:1px dashed var(--line)}
.toc-count{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.toc-list{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s1);
  padding:var(--s3);
  list-style:none;
  margin:0;
}
.toc-list a{
  display:inline-flex;
  align-items:baseline;
  gap:var(--s2);
  min-height:44px;
  padding:0 var(--s3);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--paper);
  color:var(--ink-2);
  font-size:var(--t-sm);
  font-weight:600;
  text-decoration:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.toc-list a:hover{background:var(--accent-tint);border-color:#bedcd8;color:var(--accent-deep)}
.toc-n{color:var(--accent);font-size:var(--t-xs);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- Diagrams: ink + one accent, ratio never distorted ---------- */
.geo-diagram{
  margin:var(--s3) 0;
  padding:var(--s2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--canvas);
}
.geo-diagram svg{display:block;width:100%;height:auto;max-width:100%}
.geo-diagram text{
  font-family:var(--sans);
  font-size:13px;
  fill:var(--ink);
}
.geo-diagram .shape{fill:var(--accent-tint);stroke:var(--ink);stroke-width:2}
.geo-diagram .guide{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:6 5}
.geo-diagram .line{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.geo-diagram .accent-line{fill:none;stroke:var(--mark);stroke-width:3;stroke-linecap:round}
.geo-diagram .rise{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.geo-diagram .run{fill:none;stroke:var(--mark);stroke-width:3;stroke-linecap:round}
.geo-diagram .point{fill:var(--mark);stroke:var(--paper);stroke-width:2}
.geo-diagram .axis{stroke:var(--muted);stroke-width:1.5}
.geo-diagram .gridline{stroke:var(--line-2);stroke-width:1}

footer{
  max-width:var(--shell);
  margin:0 auto;
  padding:var(--s6) var(--gutter) var(--s7);
  text-align:center;
  color:var(--muted);
  font-size:var(--t-sm);
  line-height:1.55;
}
code{
  font-family:var(--mono);
  font-size:.9em;
  background:var(--canvas);
  border:1px solid var(--line-2);
  padding:1px 5px;
  border-radius:var(--r-sm);
}

/* ---------- Shared Notes & Interactive Utilities ---------- */
summary{align-items:flex-start}
.qn{margin-top:2px;flex-shrink:0}
summary::after{margin-top:8px;flex-shrink:0}
.q-content{display:block;width:100%;min-width:0;overflow-wrap:break-word;word-break:normal}

.proof-steps{margin:var(--s2) 0;padding-left:var(--s5)}
.proof-steps li{margin-bottom:var(--s2);line-height:1.6}

.code-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3);font-family:var(--mono);font-size:var(--t-sm);line-height:1.6;margin:var(--s2) 0;overflow-x:auto}
.ladder-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3);margin:var(--s2) 0;font-family:var(--mono);line-height:1.4;overflow-x:auto}
.scroll-list{max-height:160px;overflow-y:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s2);font-family:var(--mono);font-size:0.85rem;line-height:1.5}
.stage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s3);margin:var(--s2) 0}
.stage-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s2);text-align:center}
.stage-card pre{font-family:var(--mono);margin:0;font-size:1rem;line-height:1.3}

.tiling-svg{max-width:100%;height:auto;margin:var(--s3) auto;display:block}
.fig-box{margin:var(--s3) auto;text-align:center;max-width:260px}
.fig-box img{max-width:100%;height:auto;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;display:block;margin:0 auto;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.fig-box figcaption{font-size:var(--t-xs);color:var(--muted);margin-top:var(--s1);font-weight:600}

.tag-pill{display:inline-block;padding:2px 8px;border-radius:var(--r-sm);font-size:var(--t-xs);font-weight:700;margin-bottom:var(--s1)}
.tag-p{background:var(--accent-tint);color:var(--accent-deep);border:1px solid #bedcd8}
.tag-q{background:var(--canvas);color:var(--ink-2);border:1px solid var(--line)}

/* ---------- Room to breathe from 560px ---------- */
@media (min-width:560px){
  :root{
    --gutter:20px;
    --pad:var(--s5);
    --sticky-top:var(--s2);
  }
  .tabs{
    margin-inline:0;
    padding:var(--s1);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    box-shadow:var(--shadow-bar);
  }
  .subtabs{
    margin-inline:0;
    padding:var(--s1);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    box-shadow:var(--shadow-bar);
  }
  .sb{margin-inline:0;border-radius:var(--r-md);padding:var(--s3) var(--s4)}
  .concept-grid,.rule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .geo-diagram svg{max-width:34rem;margin-inline:auto}
}

@media (min-width:860px){
  :root{
    --pad:var(--s6);
    --t-h1:clamp(26px,3.4vw,31px);
  }
  .top{padding:var(--s6) var(--gutter) var(--s7)}
  .wrap{padding-top:var(--s5)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

@media print{
  .tabs,.subtabs,.sb,.skip,.toc,.study-links{display:none}
  .panel,.subpanel{display:block!important}
  .an{display:block}
  .wb{display:block}
  details{border-color:#999}
  summary{background:#fff}
  body{background:#fff;color:#000}
  .card{break-inside:avoid}
}