/* ============================================================
   ME3311 Hydraulic & Pneumatic — TOPIC-PAGE engine (scroll style)
   One scrolling page per topic. Projects in class (big type,
   section-by-section) AND reads as a self-study hub at home.
   House style: hydraulics blue #0B5394 + amber #f5a623. Offline MathJax.
   Replaces the old slide deck.css. See LLM Wiki teaching.md §5.
   ============================================================ */

:root{
  --brand:     #0B5394;   /* hydraulics blue                       */
  --brand-2:   #1469b0;   /* lighter blue accent               */
  --amber:     #f5a623;   /* amber accent                      */
  --ink:       #11202f;   /* main text                         */
  --muted:     #5b6b7b;   /* secondary text                    */
  --page-bg:   #eef2f7;   /* neutral page behind the column    */
  --paper:     #ffffff;   /* reading column / cards            */
  --line:      #d4dde6;   /* hairlines, table borders          */
  --eq-bg:     #eef4fc;   /* equation box background           */
  --eq-border: #0B5394;   /* equation box border               */
  --try-bg:    #fff6e6;   /* try-it box background             */
  --try-border:#e0840a;   /* try-it box border (amber)         */
  --try-ink:   #9a5a00;
  --ok:        #1f8a4c;   /* answer / correct green            */
  --green-soft:#e6f5ee;
  --red:       #c0392b;
  --purple:    #8e44ad;
  --purple-soft:#f7eefb;
  --col:       62rem;     /* reading column max width          */
  --toc-w:     19rem;     /* sticky TOC width                  */
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:1.2rem; }
body{
  margin:0; background:var(--page-bg); color:var(--ink);
  font-family:"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.55;
}

/* ---------- top scroll-progress bar ---------- */
#progress{
  position:fixed; left:0; top:0; height:5px; width:0; z-index:60;
  background:linear-gradient(90deg,var(--brand),var(--amber));
  transition:width .12s ease-out;
}

/* ---------- overall layout: sticky TOC + reading column ---------- */
.layout{
  display:grid;
  grid-template-columns:var(--toc-w) minmax(0,1fr);
  gap:2.4rem;
  max-width:calc(var(--toc-w) + var(--col) + 6rem);
  margin:0 auto; padding:0 2rem;
}

/* sticky table of contents */
#toc{
  position:sticky; top:0; align-self:start;
  height:100vh; overflow:auto; padding:1.6rem 0 2rem;
}
#toc .toc-title{
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin:0 0 .8em .2rem;
}
#toc ol{ list-style:none; margin:0; padding:0; }
#toc li{ margin:.12em 0; }
#toc a{
  display:block; padding:.36em .7em; border-radius:8px;
  color:var(--muted); text-decoration:none; font-size:.95rem; line-height:1.3;
  border-left:3px solid transparent;
}
#toc a:hover{ background:#e3ebf4; color:var(--brand); }
#toc a.active{ color:var(--brand); font-weight:700; border-left-color:var(--amber); background:#e3ebf4; }
#toc a.lvl-sub{ padding-left:1.5rem; font-size:.88rem; }

/* the scrolling content column */
main{ padding:1.2rem 0 8rem; min-width:0; }

/* ---------- section blocks ---------- */
/* each major section roughly fills a screen so you can scroll
   section-by-section while projecting in class */
section{
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:clamp(1.4rem,3.2vw,2.8rem) clamp(1.4rem,3.4vw,3rem);
  margin:0 0 1.6rem; position:relative;
  box-shadow:0 4px 18px rgba(15,39,71,.05);
}
/* thin accent stripe down the left edge of a content section */
section.block::before{
  content:""; position:absolute; left:0; top:1.4rem; bottom:1.4rem; width:7px;
  border-radius:7px; background:linear-gradient(var(--brand),var(--brand-2));
}
section.block{ padding-left:clamp(1.8rem,3.8vw,3.4rem); }

h2.sec-title{
  font-size:clamp(26px,3.2vw,40px); line-height:1.15; margin:0 0 .5em;
  color:var(--brand); font-weight:800;
}
.kicker{
  font-size:clamp(13px,1.4vw,17px); letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber); font-weight:800; margin:0 0 .5em;
}
h3{ font-size:clamp(19px,2vw,26px); margin:1.1em 0 .35em; color:var(--brand-2); font-weight:700; }
p, li{ font-size:clamp(17px,1.55vw,22px); line-height:1.6; }
section p{ max-width:54ch; }
ul, ol{ margin:.4em 0; padding-left:1.3em; }
li{ margin:.4em 0; }
li::marker{ color:var(--brand); }
strong{ color:var(--brand-2); }
.muted{ color:var(--muted); }
.lead{ font-size:clamp(19px,2vw,26px); color:var(--ink); }

/* ---------- hero / title ---------- */
.hero{
  background:linear-gradient(135deg,#0B5394 0%, #08406f 60%, #052c4d 100%);
  color:#fff; border:none; padding:clamp(2.2rem,5vw,4rem) clamp(1.6rem,4vw,3.4rem);
}
.hero .course{
  font-size:clamp(13px,1.5vw,18px); letter-spacing:.18em; text-transform:uppercase;
  color:#9fd0f5; font-weight:700; margin:0 0 1.1em;
}
.hero .theme-badge{
  display:inline-block; background:rgba(255,255,255,.13); color:#fff;
  border:1px solid rgba(255,255,255,.3); padding:.25em .85em; border-radius:999px;
  font-weight:700; font-size:clamp(13px,1.4vw,18px); margin-bottom:.8em;
}
.hero h1{ color:#fff; font-size:clamp(32px,5vw,62px); line-height:1.08; margin:.1em 0 .35em; max-width:20ch; }
.hero .sub{ color:#cfe6fa; font-size:clamp(17px,2vw,26px); max-width:46ch; }
.hero .src{ color:#7fb6e2; font-size:clamp(12px,1.3vw,16px); margin-top:1.6em; }

/* ---------- manifest ("what you need / what you'll learn") ---------- */
.manifest{ border-left:none; }
.manifest .cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.manifest .card{
  background:#f6f9fc; border:1px solid var(--line); border-radius:12px; padding:1.1em 1.3em;
}
.manifest .card h3{ margin-top:0; font-size:clamp(16px,1.6vw,21px); }
.manifest .card.need h3{ color:var(--brand); }
.manifest .card.learn h3{ color:var(--ok); }
.manifest .card ul{ margin:.2em 0; }
.manifest .card li{ font-size:clamp(15px,1.5vw,20px); }
.prereq-link{ color:var(--brand); text-decoration:none; border-bottom:1px dotted var(--brand); }

/* ---------- equation box + where table ---------- */
.equation-box{
  background:var(--eq-bg); border:2.5px solid var(--eq-border); border-radius:14px;
  padding:.7em 1.1em; margin:1em 0; text-align:center;
  box-shadow:0 6px 18px rgba(15,39,71,.10);
  width:max-content; max-width:100%; overflow-x:auto;   /* never spill past the column */
}
.equation-box.center{ margin-left:auto; margin-right:auto; }
.equation-box .eq{ font-size:clamp(22px,3vw,40px); color:var(--ink); }
.equation-box .eq-label{
  display:block; margin-top:.4em; color:var(--brand);
  font-size:clamp(12px,1.3vw,16px); letter-spacing:.06em; text-transform:uppercase; font-weight:700;
}
.equation-box.result{ border-color:var(--amber); background:#fffaf0; }

table.where{ border-collapse:collapse; margin:.7em 0; }
table.where caption{
  text-align:left; font-weight:700; color:var(--muted);
  font-size:clamp(14px,1.5vw,19px); padding-bottom:.3em; letter-spacing:.04em;
}
table.where th, table.where td{
  border:1px solid var(--line); padding:.34em .8em; text-align:left;
  font-size:clamp(14px,1.55vw,21px);
}
table.where th{ background:#eef2f7; color:var(--brand); font-weight:700; }
table.where td.sym{ font-style:italic; font-weight:700; text-align:center; white-space:nowrap; }
table.where td.unit{ text-align:center; white-space:nowrap; color:var(--muted); }

/* generic data table */
table.data{ border-collapse:collapse; margin:.6em 0; width:auto; }
table.data th, table.data td{
  border:1px solid var(--line); padding:.34em .75em; text-align:left;
  font-size:clamp(14px,1.55vw,21px);
}
table.data th{ background:var(--brand); color:#fff; font-weight:700; }
table.data tr:nth-child(even) td{ background:#f6f9fc; }
.tag-best{ color:var(--ok); font-weight:700; }

/* ---------- derivation steps ---------- */
.dstep{ margin:1em 0; }
.dlabel{ font-size:clamp(15px,1.6vw,21px); color:var(--brand-2); margin-bottom:.25em; display:flex; gap:.6em; align-items:baseline; }
.dlabel .num{
  flex:0 0 auto; width:1.7em; height:1.7em; border-radius:50%;
  background:var(--brand); color:#fff; text-align:center; line-height:1.7em;
  font-size:.85em; font-weight:700;
}

/* ---------- callout / key / recap ---------- */
.callout{
  background:#fff8e6; border-left:8px solid var(--try-border); border-radius:8px;
  padding:.7em 1.1em; margin:1em 0; max-width:58ch; font-size:clamp(16px,1.7vw,23px);
}
.key{
  background:var(--green-soft); border:1px solid #b6e0cc; border-left:6px solid var(--ok);
  border-radius:8px; padding:.7em 1.1em; margin:1em 0; max-width:58ch; font-size:clamp(16px,1.7vw,23px);
}
.robot{
  background:var(--purple-soft); border:1px solid #e3c6f0; border-left:6px solid var(--purple);
  border-radius:8px; padding:.7em 1.1em; margin:1em 0; max-width:58ch; font-size:clamp(15px,1.6vw,22px);
}
.robot b{ color:var(--purple); }
.recap{ background:var(--eq-bg); border:2px solid var(--line); }
.recap h2.sec-title{ font-size:clamp(22px,2.6vw,34px); }

/* ---------- worked example ---------- */
.worked{ border-left:none; }
.worked .we-head{
  display:inline-flex; align-items:center; gap:.5em; background:var(--brand);
  color:#fff; padding:.35em .9em; border-radius:999px; font-weight:700;
  font-size:clamp(14px,1.5vw,19px); margin-bottom:.4em;
}

/* ---------- try-it (click to reveal) ---------- */
.tryit{
  background:var(--try-bg); border:2.5px solid var(--try-border); border-left-width:14px;
  border-radius:16px; padding:1.2em 1.6em; margin:1.2em 0;
}
.tryit .tryit-head{
  color:var(--try-ink); font-weight:800; letter-spacing:.04em;
  font-size:clamp(18px,2vw,28px); margin:0 0 .4em; display:flex; align-items:center; gap:.4em;
}
.tryit p, .tryit li{ color:var(--ink); }
.reveal-btn{
  margin-top:.6em; cursor:pointer; background:var(--try-border); color:#fff;
  border:none; border-radius:8px; padding:.45em 1.1em;
  font-size:clamp(14px,1.5vw,20px); font-weight:700; font-family:inherit;
}
.reveal-btn:hover{ filter:brightness(1.07); }
.answer{
  display:none; margin-top:.8em; padding:.8em 1em; background:#eafaf0;
  border:1px solid var(--ok); border-radius:10px; font-size:clamp(15px,1.6vw,22px);
}
.answer.show{ display:block; animation:fade .3s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.answer .ans-head{ color:var(--ok); font-weight:800; margin-right:.4em; }
.answer .step{ display:block; margin:.3em 0; }

/* ---------- figures / svg ---------- */
.figure{ margin:1em 0; text-align:center; }
.figure svg{ max-width:100%; height:auto; }
.figcaption{ color:var(--muted); font-size:clamp(13px,1.4vw,18px); margin-top:.4em; font-style:italic; }
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center; }
.split .txt p{ max-width:38ch; }

/* ---------- MATLAB code + output (matlab-simulink module) ---------- */
.code{
  background:#f4f7fa; border:1px solid var(--line); border-left:6px solid var(--brand);
  border-radius:10px; padding:.7em 1.1em; margin:.7em 0; max-width:max-content;
  font-family:"Consolas","SF Mono",Menlo,Monaco,monospace;
  font-size:clamp(13px,1.5vw,20px); color:var(--ink); white-space:pre; line-height:1.5; overflow:auto;
}
.code .cm{ color:var(--muted); }
.code .kw{ color:var(--brand); font-weight:700; }
.out{
  background:#11202f; color:#cfe6fa; border-radius:10px; padding:.6em 1.1em; margin:.5em 0;
  max-width:max-content; font-family:"Consolas","SF Mono",Menlo,Monaco,monospace;
  font-size:clamp(12px,1.4vw,18px); white-space:pre; line-height:1.45; overflow:auto;
}
.out::before{
  content:"output"; display:block; color:#7fb6e2; font-size:.7em; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:.3em;
}

/* ---------- next-topic ---------- */
.next-topic{
  background:linear-gradient(135deg,#1469b0 0%, #0B5394 100%); color:#fff; border:none;
}
.next-topic .kicker{ color:#9fd0f5; }
.next-topic h2.sec-title{ color:#fff; }
.next-topic a{ color:#ffd07a; font-weight:700; text-decoration:none; }

/* ---------- back-to-top ---------- */
#toTop{
  position:fixed; right:18px; bottom:18px; z-index:55; width:46px; height:46px;
  border-radius:12px; border:1px solid rgba(255,255,255,.25);
  background:rgba(15,27,45,.82); color:#fff; font-size:20px; cursor:pointer;
  display:none; align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
#toTop.show{ display:flex; }
#toTop:hover{ background:var(--brand); }

/* keep MathJax inline math tidy */
mjx-container{ margin:0 !important; }
mjx-container[display="true"]{ margin:.4em auto !important; }

/* ---------- responsive: collapse TOC on narrow / mobile ---------- */
@media (max-width:980px){
  .layout{ grid-template-columns:1fr; gap:0; }
  #toc{
    position:static; height:auto; overflow:visible; padding:1rem 0;
    border-bottom:1px solid var(--line); margin-bottom:1rem;
  }
  #toc ol{ columns:2; column-gap:1.5rem; }
  .manifest .cols, .split{ grid-template-columns:1fr; }
}
@media print{
  #toc, #progress, #toTop{ display:none; }
  .layout{ display:block; }
  section{ break-inside:avoid; box-shadow:none; }
}