/* ============================================================
   MEP for Megatall Buildings — Course design system
   Reskinned to match abokhatwa.com (Apple-calm aesthetic).
   Self-contained: site design tokens + dark mode + legacy var
   remap, so existing course markup adopts the site look.
   ============================================================ */

/* ---- Site design tokens (light) ---- */
:root{
  --bg:#f5f5f7; --bg-2:#fbfbfd; --bg-3:#ffffff; --bg-4:#ededf0;
  --border:rgba(0,0,0,0.1); --border-light:rgba(0,0,0,0.15);
  --glass:rgba(255,255,255,0.80); --glass-border:rgba(0,0,0,0.06); --glass-hover:rgba(255,255,255,0.95);
  --shadow-glass:0 1px 2px rgba(0,0,0,0.04),0 6px 24px rgba(0,0,0,0.05);
  --shadow-glass-hover:0 2px 6px rgba(0,0,0,0.06),0 16px 40px rgba(0,0,0,0.10);
  --text-primary:#1d1d1f; --text-secondary:#6e6e73; --text-tertiary:#86868b;
  --accent:#0071e3; --success:#1a7a38; --danger:#c42b2b; --warning:#8a5700;
  --font-display:-apple-system,BlinkMacSystemFont,'Inter','SF Pro Display','Helvetica Neue',sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Inter','SF Pro Text','Helvetica Neue',sans-serif;
  --transition:all 0.3s cubic-bezier(0.4,0,0.2,1);

  /* ---- Legacy course vars remapped to the site palette ---- */
  --navy:var(--text-primary);
  --blue:var(--accent);
  --blue2:var(--accent);
  --sky:rgba(0,113,227,0.10);
  --ink:var(--text-primary);
  --muted:var(--text-secondary);
  --line:var(--border);
  --card:var(--bg-3);
  --green:var(--success);
  --amber:var(--warning);
  --red:var(--danger);
  --code-bg:#0e2a3d;
  --shadow:var(--shadow-glass);
  --maxw:1080px;

  /* software callout (purple) */
  --sw-bg:rgba(124,79,181,0.10); --sw-text:#6f44a8; --sw-border:#7a4fb5;
}

/* ---- Dark mode ---- */
:root[data-theme="dark"]{
  --bg:#161618; --bg-2:#1c1c1e; --bg-3:#232325; --bg-4:#2c2c2e;
  --border:rgba(255,255,255,0.08); --border-light:rgba(255,255,255,0.14);
  --glass:rgba(255,255,255,0.05); --glass-border:rgba(255,255,255,0.09); --glass-hover:rgba(255,255,255,0.08);
  --shadow-glass:0 1px 2px rgba(0,0,0,0.3),0 8px 28px rgba(0,0,0,0.35);
  --shadow-glass-hover:0 2px 6px rgba(0,0,0,0.4),0 18px 44px rgba(0,0,0,0.5);
  --text-primary:#f5f5f7; --text-secondary:#aeaeb2; --text-tertiary:#636366;
  --accent:#2997ff; --success:#30d158; --danger:#ff453a; --warning:#ffd60a;
  --sky:rgba(41,151,255,0.16);
  --sw-bg:rgba(179,148,246,0.16); --sw-text:#c8b0f2; --sw-border:#b794f6;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);
  color:var(--text-primary);background:var(--bg);line-height:1.65;font-size:17px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 15% 0%,rgba(0,113,227,0.05) 0%,transparent 40%),
             radial-gradient(ellipse at 85% 5%,rgba(0,113,227,0.035) 0%,transparent 42%)}
:root[data-theme="dark"] body{background:#0e0e10}
:root[data-theme="dark"] body::before{
  background:radial-gradient(ellipse at 15% 0%,rgba(41,151,255,0.08) 0%,transparent 42%),
             radial-gradient(ellipse at 85% 5%,rgba(41,151,255,0.05) 0%,transparent 44%)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ============================================================
   SITE NAV  (faithful copy of abokhatwa.com nav)
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:52px;display:flex;align-items:center;
  background:rgba(255,255,255,0.72);backdrop-filter:blur(24px) saturate(200%);
  -webkit-backdrop-filter:blur(24px) saturate(200%);border-bottom:1px solid rgba(0,0,0,0.07)}
:root[data-theme="dark"] .nav{background:rgba(14,14,16,0.85);border-bottom-color:rgba(255,255,255,0.06)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--text-primary);text-decoration:none;letter-spacing:-0.01em}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-links a{font-size:13px;color:var(--text-secondary);text-decoration:none;transition:var(--transition);letter-spacing:0.01em}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a.active{color:var(--text-primary);font-weight:500}
.lang-switch{font-size:13px;font-weight:500;color:var(--accent);text-decoration:none;
  border:1px solid rgba(0,113,227,0.2);padding:4px 12px;border-radius:20px;transition:background 0.2s}
.lang-switch:hover{background:rgba(0,113,227,0.06)}
.nav-links.open .lang-switch{border:none;border-radius:0;padding:14px 0}

.theme-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--border-light);background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);
  transition:color 0.2s,background 0.2s,border-color 0.2s;flex-shrink:0;margin-left:4px}
.theme-toggle:hover{color:var(--text-primary);background:var(--glass);border-color:var(--accent)}
.icon-sun{display:none}.icon-moon{display:block}
:root[data-theme="dark"] .icon-sun{display:block}
:root[data-theme="dark"] .icon-moon{display:none}

.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;
  cursor:pointer;padding:6px;min-width:44px;min-height:44px;align-items:center}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--text-primary);border-radius:2px;
  transition:var(--transition);transform-origin:center}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:768px){
  .nav-hamburger{display:flex}
  .theme-toggle{width:30px;height:30px;margin-left:2px}
  .nav-links{display:none;position:absolute;top:52px;left:0;right:0;flex-direction:column;gap:0;padding:8px 24px 20px;
    background:rgba(255,255,255,0.96);backdrop-filter:blur(24px) saturate(200%);
    -webkit-backdrop-filter:blur(24px) saturate(200%);border-bottom:1px solid rgba(0,0,0,0.08)}
  :root[data-theme="dark"] .nav-links{background:rgba(18,18,20,0.97);border-bottom-color:rgba(255,255,255,0.06)}
  .nav-links.open{display:flex}
  .nav-links a{display:block;padding:14px 0;font-size:17px;border-bottom:1px solid rgba(0,0,0,0.06)}
  :root[data-theme="dark"] .nav-links a{border-bottom-color:rgba(255,255,255,0.06)}
  .nav-links li:last-child a{border-bottom:none}
}

/* ============================================================
   COURSE HERO  (calm, site-styled)
   ============================================================ */
.course-hero{padding:118px 0 56px}
.course-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.course-hero h1{margin:0 0 14px;font-family:var(--font-display);font-size:clamp(30px,4vw,46px);
  line-height:1.1;letter-spacing:-0.035em;font-weight:700;color:var(--text-primary)}
.course-hero p{margin:0;color:var(--text-secondary);font-size:17.5px;line-height:1.7}
.course-hero-media img{width:100%;height:auto;display:block;border-radius:16px}
:root[data-theme="dark"] .course-hero-media img{border:1px solid var(--border)}
/* inline SVG hero art (per-module line illustrations) */
.course-hero-art{display:flex;align-items:center;justify-content:center}
.course-hero-art svg{width:100%;max-width:330px;height:auto;display:block}
.course-hero-art .st{stroke:var(--accent);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.course-hero-art .st2{stroke:var(--text-tertiary);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.course-hero-art .fl{fill:var(--accent);opacity:.10}
.course-hero-art .dot{fill:var(--accent)}
@media(max-width:760px){.course-hero-art{max-width:300px;margin:0 auto}}
@media(max-width:760px){
  .course-hero{padding:96px 0 36px}
  .course-hero-grid{grid-template-columns:1fr;gap:26px}
  .course-hero-media{max-width:460px}
}
.course-hero .kicker{display:inline-block;color:var(--accent);font-weight:600;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.course-hero .back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-tertiary);
  text-decoration:none;margin-bottom:34px;transition:var(--transition)}
.course-hero .back:hover{color:var(--text-primary)}

/* ---- Layout w/ side nav ---- */
.layout{display:grid;grid-template-columns:240px 1fr;gap:36px;padding:30px 0 60px}
.sidenav{position:sticky;top:74px;align-self:start;font-size:14px;
  border-left:2px solid var(--border);padding-left:16px;max-height:calc(100vh - 100px);overflow:auto}
.sidenav a{display:block;color:var(--text-secondary);text-decoration:none;padding:5px 0;transition:color .15s}
.sidenav a:hover{color:var(--accent)}
.sidenav a.active{color:var(--accent);font-weight:600}
.sidenav .grp{font-weight:700;color:var(--text-primary);margin:16px 0 4px;font-size:11.5px;text-transform:uppercase;letter-spacing:.6px}
@media(max-width:820px){.layout{grid-template-columns:1fr}.sidenav{display:none}}

/* ---- Content ---- */
.content h2{font-size:26px;font-weight:600;color:var(--text-primary);margin:42px 0 10px;
  padding-bottom:10px;border-bottom:1px solid var(--border);letter-spacing:-.02em}
.content h3{font-size:20px;font-weight:600;color:var(--accent);margin:28px 0 6px;letter-spacing:-.01em}
.content h4{font-size:16.5px;font-weight:600;color:var(--text-primary);margin:18px 0 4px}
.content p{margin:8px 0 14px;color:var(--text-secondary)}
.content ul,.content ol{margin:8px 0 16px;padding-left:22px}
.content li{margin:5px 0;color:var(--text-secondary)}
.lead{font-size:18.5px;color:var(--text-primary)}
a.ref{color:var(--accent);text-decoration:none;border-bottom:1px dotted var(--accent)}

/* ---- Cards / boxes ---- */
.card,.course-card{background:var(--bg-3);border:1px solid var(--border);border-radius:16px;
  padding:22px 24px;box-shadow:var(--shadow-glass);margin:18px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:720px){.grid2,.grid3{grid-template-columns:1fr}}

/* callouts */
.box{border-radius:12px;padding:14px 18px;margin:16px 0;border-left:4px solid;color:var(--text-secondary)}
.box .t{font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px}

/* inline line-icons (replace former emoji markers) */
.ic,.ic-check{width:1.05em;height:1.05em;vertical-align:-0.16em;flex:0 0 auto}
.ic-check{color:var(--success)}
.box .t .ic,.box .t .ic-check{width:18px;height:18px;color:inherit}
.box.code{background:rgba(0,113,227,0.07);border-color:var(--accent)}
.box.code .t{color:var(--accent)}
.box.key{background:rgba(26,122,56,0.09);border-color:var(--success)}
.box.key .t{color:var(--success)}
.box.warn{background:rgba(138,87,0,0.10);border-color:var(--warning)}
.box.warn .t{color:var(--warning)}
.box.note{background:var(--bg-4);border-color:var(--text-tertiary)}

/* inline formula chip used in prose (theme-aware) */
.formula{font-family:'SF Mono',Consolas,monospace;background:var(--sky);color:var(--accent);
  padding:4px 9px;border-radius:6px;display:inline-block;font-size:15px;line-height:1.6}

/* worked example (intentional dark card, works in both themes) */
.example{background:#0e2a3d;color:#e8f1f8;border-radius:14px;padding:20px 22px;margin:20px 0;box-shadow:var(--shadow-glass)}
.example h4{color:#7fd1ff;margin:0 0 10px;font-size:16px;letter-spacing:.3px;text-transform:uppercase}
.example .step{margin:10px 0;padding-left:14px;border-left:2px solid #2a5a7a}
.example .formula{font-family:'SF Mono',Consolas,monospace;background:#0a2030;padding:8px 12px;
  border-radius:7px;display:inline-block;margin:4px 0;color:#bfe3ff;font-size:15px}
.example .result{background:#15482f;border:1px solid #2f8f57;border-radius:8px;padding:10px 14px;
  margin-top:12px;font-weight:600;color:#c7f3d6}
.example .given{color:#ffd98a}

/* tables */
table.t{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px;background:var(--bg-3);
  border-radius:12px;overflow:hidden;box-shadow:var(--shadow-glass)}
table.t th{background:var(--accent);color:#fff;text-align:left;padding:10px 12px;font-weight:600}
table.t td{padding:9px 12px;border-top:1px solid var(--border);vertical-align:top;color:var(--text-secondary)}
table.t tr:nth-child(even) td{background:var(--bg-2)}

/* interactive figure — a self-contained light instrument panel, legible in both themes */
.fig{margin:30px 0;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow-glass)}
.fig-head{padding:18px 22px 6px}
.fig-head .ftitle{font-weight:700;font-size:15px;color:#1b4f72}
.fig-head .fsub{font-size:12.5px;color:#5b6b7b;margin-top:3px;line-height:1.5}
.chart-box{position:relative;height:430px;padding:8px 14px 18px}
@media(max-width:640px){.chart-box{height:340px}}
.fig .cap{font-size:12.5px;color:#5b6b7b;padding:0 22px 16px;text-align:center;line-height:1.5}
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;padding:10px 22px 22px;border-top:1px solid #e5e9ed;background:#f7f9fb}
.ctrl label{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:#1a1d21;margin-bottom:6px}
.ctrl label span{color:#1b4f72;font-variant-numeric:tabular-nums}
.ctrl input[type=range]{width:100%;accent-color:#1b4f72}
.ctrl .hint{font-size:11.5px;color:#5b6b7b;margin-top:4px;line-height:1.45}
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0;border-top:1px solid #e5e9ed}
.readout .cell{padding:14px 16px;border-right:1px solid #e5e9ed}
.readout .cell:last-child{border-right:none}
.readout .k{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#5b6b7b}
.readout .v{font-size:22px;font-weight:700;color:#1b4f72;font-variant-numeric:tabular-nums;margin-top:2px}
.readout .v small{font-size:13px;font-weight:500;color:#5b6b7b}
.badge{display:inline-block;padding:3px 10px;border-radius:30px;font-size:12px;font-weight:600}
.badge.good{background:#d5f5e3;color:#1e8449}
.badge.warn{background:#fdebd0;color:#b9770e}
.badge.bad{background:#fadbd8;color:#c0392b}

/* svg figure — kept on a light surface in both themes so the
   navy/coloured schematics stay legible in dark mode */
.figure{background:#f8fafc;border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow-glass);margin:18px 0}
:root[data-theme="dark"] .figure{background:#eef2f6}
.figure .cap{color:#5b6b7a !important}
.figure svg{width:100%;height:auto;display:block}
.figure .cap{font-size:13px;color:var(--text-tertiary);margin-top:10px;text-align:center}

/* pills / tags */
.pill{display:inline-block;background:var(--sky);color:var(--accent);border-radius:999px;
  padding:2px 10px;font-size:12.5px;font-weight:600;margin:2px 4px 2px 0}
.pill.code{background:var(--bg-4);color:var(--text-secondary)}

/* module cards on home */
.modcard{display:block;text-decoration:none;color:inherit;background:var(--bg-3);border:1px solid var(--border);
  border-radius:16px;padding:22px;box-shadow:var(--shadow-glass);transition:.18s;height:100%}
.modcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-glass-hover);border-color:var(--accent)}
.modcard .num{font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.modcard h3{margin:6px 0 8px;color:var(--text-primary);font-weight:600}
.modcard p{margin:0;color:var(--text-secondary);font-size:15px}
.modcard .status{display:inline-block;margin-top:14px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px}
.status.ready{background:rgba(26,122,56,0.12);color:var(--success)}
.status.soon{background:var(--bg-4);color:var(--text-tertiary)}

/* footer (site-styled) */
footer{border-top:1px solid var(--border);padding:48px 24px;text-align:center;
  background:rgba(255,255,255,0.5);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%)}
:root[data-theme="dark"] footer{background:rgba(14,14,16,0.5)}
.footer-inner{max-width:var(--maxw);margin:0 auto}
footer p{font-size:13px;color:var(--text-tertiary);margin:0}
footer a{color:var(--text-tertiary);text-decoration:none;transition:var(--transition)}
footer a:hover{color:var(--text-primary)}

/* buttons (match site) */
.btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:15px;font-weight:500;
  padding:12px 22px;border-radius:980px;border:none;cursor:pointer;text-decoration:none;transition:var(--transition);letter-spacing:-0.01em}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#0077ed}

.refs{font-size:14px;color:var(--text-secondary)}
.refs li{margin:6px 0}
.prevnext{display:flex;justify-content:space-between;gap:14px;margin:36px 0 0}
.prevnext a{flex:1;text-decoration:none;background:var(--bg-3);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;color:var(--text-primary);box-shadow:var(--shadow-glass);transition:.15s}
.prevnext a:hover{border-color:var(--accent)}
.prevnext .dir{font-size:12px;color:var(--text-tertiary)}
.prevnext .nx{text-align:right}
.eyebrow{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.6px;font-size:12.5px;margin-top:30px}
sup.fn{color:var(--accent);font-weight:700;font-size:12px}

/* ============================================================
   Overrides for per-page inline <style> blocks (dark-mode safe).
   Higher specificity via .mep-body wins over page-level rules.
   ============================================================ */
.mep-body .compo{background:var(--bg-3)}
.mep-body .compo .tag{background:var(--accent);color:#fff}
.mep-body .param th{background:var(--sky);color:var(--text-primary)}
.mep-body .box.sw{background:var(--sw-bg);border-color:var(--sw-border)}
.mep-body .box.sw .t{color:var(--sw-text)}
.mep-body .flow .n{background:var(--sky);color:var(--accent)}

/* back-to-top button (matches the rest of the site) */
#back-to-top{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(10px);
  width:44px;height:44px;border-radius:50%;background:var(--bg-3);border:1.5px solid var(--border);
  box-shadow:0 4px 20px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.06);color:var(--text-primary);
  cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:9998;opacity:0;
  pointer-events:none;transition:opacity .25s ease, transform .25s ease, box-shadow .2s ease}
#back-to-top:hover{box-shadow:0 8px 28px rgba(0,0,0,0.18);transform:translateX(-50%) translateY(-2px) !important}
:root[data-theme="dark"] #back-to-top{box-shadow:0 4px 20px rgba(0,0,0,0.4)}