/* ============================================================
   math_relearn — additions on top of base.css
   (base.css is the exact stylesheet from your ML notebook so the
   two sites look like one family)
   ============================================================ */

:root{ --accent-bg:#eef2ff; }
[data-theme="dark"]{ --accent-bg:#1c1b3a; }

.t-accent{ --tc:var(--accent); --tc-bg:var(--accent-bg); }

/* ============ PAGE HEAD (module pages) ============ */
.page-head{margin-bottom:20px}
.crumb{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-size:12.5px; font-weight:600; color:var(--ink2);
}
.crumb a{color:var(--ink2)}
.crumb a:hover{color:var(--accent)}
.crumb .dot{opacity:.45}
.crumb .pill{
  background:var(--tc-bg,var(--surface2)); color:var(--tc,var(--accent));
  border-radius:99px; padding:2px 10px; font-size:11px; font-weight:800;
  letter-spacing:.7px; text-transform:uppercase;
}
.page-head h1{font-size:34px; line-height:1.16; letter-spacing:-1px; margin:9px 0 7px}
.page-head p.sub{font-size:16.5px; color:var(--ink2); margin:0; max-width:78ch}
.head-tools{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:15px}

details.toc{
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  padding:0; margin-top:14px; font-size:13.6px;
}
details.toc summary{
  cursor:pointer; list-style:none; padding:9px 14px; font-weight:650; color:var(--ink2);
  display:flex; align-items:center; gap:8px;
}
details.toc summary::-webkit-details-marker{display:none}
details.toc summary::before{content:"☰"; opacity:.6}
details.toc[open] summary{border-bottom:1px solid var(--line)}
details.toc ul{
  list-style:none; margin:0; padding:8px 14px 12px;
  columns:2; column-gap:22px;
}
details.toc li{margin:3px 0; break-inside:avoid}
details.toc li.sub{padding-left:12px}
details.toc a{color:var(--ink2)}
details.toc a:hover{color:var(--accent)}

/* ============ PHASE BANNERS (Remember → Understand → Implement) ============ */
.phase{
  display:flex; align-items:center; gap:13px; flex-wrap:wrap;
  margin:38px 0 12px; padding-bottom:9px; border-bottom:2px solid var(--line);
}
.phase .pnum{
  flex:none; font-size:10.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  background:var(--tc-bg,var(--surface2)); color:var(--tc,var(--accent));
  padding:5px 11px; border-radius:99px;
}
.phase h2{font-size:20.5px; letter-spacing:-.45px; margin:0}
.phase .phint{font-size:12.8px; color:var(--ink2); margin-left:auto; text-align:right}

/* ============ THE ONE-SENTENCE VERSION ============ */
.oneliner{
  position:relative; background:var(--surface2); border:1px dashed var(--tc,var(--accent));
  border-radius:11px; padding:26px 17px 13px; margin:16px 0; font-size:16.5px; font-weight:640;
}
.oneliner::before{
  content:"The one-sentence version"; position:absolute; top:-9px; left:13px;
  font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  background:var(--surface); color:var(--tc,var(--accent)); padding:1px 8px; border-radius:99px;
}

/* ============ PURPOSE / BIG-PICTURE BOX ============ */
.why{
  background:var(--surface2); border:1px solid var(--line); border-left:4px solid var(--tc,var(--accent));
  border-radius:12px; padding:16px 19px; margin:18px 0;
}
.why h4{
  margin:0 0 7px; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--tc,var(--accent));
}
.why p{margin:8px 0}
.why p:last-child{margin-bottom:0}

/* ============ MATH MAP (concept → ML usage) ============ */
.maptable td:first-child{font-weight:650; white-space:nowrap}

/* ============ MCQ — instant feedback ============ */
.mcq{
  background:var(--surface2); border:1px solid var(--line); border-radius:12px;
  padding:14px 17px 15px; margin:14px 0;
}
.mcq .q{font-weight:650; margin:0 0 10px; font-size:15.2px}
.mcq .opts{counter-reset:opt; list-style:none; margin:0; padding:0; display:grid; gap:7px}
.mcq .opts li{counter-increment:opt}
.mcq .opts li label{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:9px 13px; font-size:14.6px; line-height:1.5;
}
.mcq .opts li label::before{
  content:counter(opt,upper-alpha); flex:none; width:20px; height:20px; margin-top:1px;
  border-radius:6px; background:var(--surface2); border:1px solid var(--line2);
  display:grid; place-items:center; font-size:11.5px; font-weight:800; color:var(--ink2);
}
.mcq .opts li label:hover{border-color:var(--accent)}
.mcq .opts li input{position:absolute; opacity:0; pointer-events:none}
.mcq .opts li.correct label{background:var(--c-bg); border-color:var(--c)}
.mcq .opts li.correct label::before{content:"✓"; background:var(--c); border-color:var(--c); color:#fff}
.mcq .opts li.wrong label{background:var(--e-bg); border-color:var(--e)}
.mcq .opts li.wrong label::before{content:"✕"; background:var(--e); border-color:var(--e); color:#fff}
.mcq.answered .opts li label{cursor:default}
.mcq .feedback{
  display:none; margin-top:11px; padding-top:11px; border-top:1px dashed var(--line2);
  font-size:14.4px; color:var(--ink2);
}
.mcq .feedback strong{color:var(--ink)}
.mcq.answered .feedback{display:block}
.mcq .verdict{font-weight:800; font-size:11.5px; letter-spacing:.8px; text-transform:uppercase}
.mcq.ok .verdict{color:var(--c)}
.mcq.no .verdict{color:var(--e)}

/* ============ MODULE PREV / NEXT ============ */
.modnav{display:flex; gap:13px; margin-top:24px}
.modnav a{
  flex:1; background:var(--surface); border:1px solid var(--line); border-radius:13px;
  padding:13px 17px; box-shadow:var(--shadow); color:var(--ink);
}
.modnav a:hover{border-color:var(--accent); text-decoration:none}
.modnav a small{
  display:block; font-size:10.5px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--ink2); margin-bottom:2px;
}
.modnav a b{font-size:15px; font-weight:650}
.modnav a.next{text-align:right}
.modnav .empty{flex:1}

/* ============ DASHBOARD CARDS ============ */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:22px 0 6px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:14px 16px; box-shadow:var(--shadow)}
.stat b{display:block; font-size:27px; letter-spacing:-1.1px; line-height:1.15}
.stat span{font-size:11.5px; color:var(--ink2); font-weight:700; letter-spacing:.7px; text-transform:uppercase}

.cardgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:14px; margin-top:16px}
.card{
  display:flex; flex-direction:column; gap:9px; background:var(--surface);
  border:1px solid var(--line); border-top:4px solid var(--tc,var(--accent));
  border-radius:14px; padding:16px 18px 15px; box-shadow:var(--shadow);
}
.card .crow{display:flex; align-items:center; gap:9px}
.card .cnum{
  flex:none; width:27px; height:27px; border-radius:8px; background:var(--tc-bg,var(--surface2));
  color:var(--tc,var(--accent)); display:grid; place-items:center; font-weight:800; font-size:12.5px;
}
.card h3{font-size:16px; margin:0; letter-spacing:-.25px}
.card p{margin:0; font-size:13.3px; color:var(--ink2); flex:1}
.card .cmeta{font-size:11.5px; color:var(--ink2); display:flex; gap:11px; flex-wrap:wrap}
.card .cfoot{display:flex; align-items:center; justify-content:space-between; gap:10px}
.card a.go{font-size:13.4px; font-weight:700}
.card .cstate{font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--ink2)}
.card.done .cstate{color:var(--c)}
.card .bar{margin:0; height:5px}

/* ============ KATEX TWEAKS ============ */
.katex{font-size:1.04em}
.katex-display{margin:15px 0; overflow-x:auto; overflow-y:hidden; padding:3px 0}
.katex-display > .katex{font-size:1.1em}
.formula .katex-display{margin:6px 0 0}
.formula{font-size:15px}

/* ============ RESPONSIVE / PRINT ADDITIONS ============ */
@media (max-width:960px){
  .page-head h1{font-size:27px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .phase .phint{margin-left:0; text-align:left; width:100%}
  details.toc ul{columns:1}
  .modnav{flex-direction:column}
  .modnav a.next{text-align:left}
}
@media print{
  .modnav,details.toc,.head-tools{display:none}
  .katex-display{overflow:visible}
  details.recall{break-inside:avoid}
  .mcq{break-inside:avoid}
}