/* ============================================================
   24CSEN2151 — ARTIFICIAL INTELLIGENCE STUDY HUB
   Design system: "Search Space" — nodes, trees, frontiers.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,500&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ---------- DESIGN TOKENS ---------- */
:root{
  /* Light theme (paper) */
  --bg: #F7F5EF;
  --bg-elevated: #FFFFFF;
  --bg-sunken: #EFEBE0;
  --ink: #1A1B22;
  --ink-soft: #4A4C58;
  --ink-faint: #8A8C9A;
  --border: rgba(26,27,34,0.12);
  --border-strong: rgba(26,27,34,0.22);

  --accent: #3B6B9C;       /* search blue */
  --accent-ink: #1E3A52;
  --accent-soft: rgba(59,107,156,0.12);
  --amber: #C9762C;        /* heuristic amber */
  --amber-soft: rgba(201,118,44,0.14);
  --pine: #4A7C59;         /* success / CO */
  --pine-soft: rgba(74,124,89,0.14);
  --brick: #B33A3A;        /* alert / important */
  --brick-soft: rgba(179,58,58,0.12);
  --violet: #6B5B95;       /* tertiary tag */
  --violet-soft: rgba(107,91,149,0.13);

  --shadow-sm: 0 1px 2px rgba(20,20,30,0.05);
  --shadow-md: 0 2px 8px rgba(20,20,30,0.07);
  --shadow-lg: 0 4px 16px rgba(20,20,30,0.09);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --nav-h: 68px;
  --sidebar-w: 290px;

  --ease: cubic-bezier(.22,1,.36,1);
}

[data-theme="dark"]{
  --bg: #0B1120;
  --bg-elevated: #131B2E;
  --bg-sunken: #0A0E1A;
  --ink: #EDEEF5;
  --ink-soft: #B7BACB;
  --ink-faint: #767B92;
  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);

  --accent: #6FA3D8;
  --accent-ink: #BFDCFF;
  --accent-soft: rgba(111,163,216,0.16);
  --amber: #E0944C;
  --amber-soft: rgba(224,148,76,0.16);
  --pine: #6FAE82;
  --pine-soft: rgba(111,174,130,0.16);
  --brick: #E0696B;
  --brick-soft: rgba(224,105,107,0.15);
  --violet: #9C8BC4;
  --violet-soft: rgba(156,139,196,0.16);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 10px rgba(0,0,0,0.32);
  --shadow-lg: 0 6px 20px rgba(0,0,0,0.38);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  font-size:16px;
  transition:background .25s var(--ease), color .25s var(--ease);
}

::selection{ background:var(--accent); color:#fff; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg-sunken); }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:10px; border:3px solid var(--bg-sunken); }
::-webkit-scrollbar-thumb:hover{ background:var(--ink-faint); }

:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:4px; }

h1,h2,h3,h4,h5{ font-family:var(--font-display); font-weight:700; line-height:1.15; margin:0 0 .5em; color:var(--ink); letter-spacing:-0.01em; }
p{ margin:0 0 1em; color:var(--ink-soft); }
code, pre, kbd{ font-family:var(--font-mono); }

.container{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* ---------- TOP NAV ---------- */
.topnav{
  position:sticky; top:0; z-index:200;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:var(--bg-elevated);
  border-bottom:1px solid var(--border);
}
.topnav-inner{
  width:100%; max-width:1440px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:18px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  color:var(--ink); white-space:nowrap;
}
.brand-mark{
  width:34px; height:34px; border-radius:9px;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  color:var(--bg); font-family:var(--font-mono); font-weight:700; font-size:13px;
  flex-shrink:0;
}
[data-theme="dark"] .brand-mark{ background:var(--accent); color:#0B1120; }
.brand small{ display:block; font-family:var(--font-body); font-weight:500; font-size:.68rem; color:var(--ink-faint); letter-spacing:.04em; }

.nav-links{ display:flex; align-items:center; gap:2px; flex:1; overflow-x:auto; scrollbar-width:none; }
.nav-links::-webkit-scrollbar{ display:none; }
.nav-links a{
  font-size:.86rem; font-weight:600; color:var(--ink-soft);
  padding:8px 12px; border-radius:var(--r-pill); white-space:nowrap;
  transition:background .2s, color .2s;
}
.nav-links a:hover{ background:var(--accent-soft); color:var(--accent); text-decoration:none; }
.nav-links a.active{ background:var(--accent); color:#fff; }

.nav-tools{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:var(--bg-elevated);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink); transition:all .2s var(--ease);
  flex-shrink:0;
}
.icon-btn:hover{ border-color:var(--accent); color:var(--accent); }
.icon-btn svg{ width:18px; height:18px; }

.nav-burger{ display:none; }

/* Search */
.nav-search{ position:relative; }
.nav-search input{
  width:170px; padding:8px 12px 8px 34px; border-radius:var(--r-pill);
  border:1px solid var(--border); background:var(--bg-elevated); color:var(--ink);
  font-size:.84rem; font-family:var(--font-body); transition:width .25s var(--ease), border-color .2s;
}
.nav-search input:focus{ width:230px; border-color:var(--accent); outline:none; }
.nav-search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--ink-faint); pointer-events:none; }

#search-results{
  position:absolute; top:calc(100% + 10px); right:0; width:360px; max-height:420px; overflow-y:auto;
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); display:none; z-index:300;
}
#search-results.show{ display:block; }
#search-results a{ display:block; padding:12px 16px; border-bottom:1px solid var(--border); color:var(--ink); }
#search-results a:last-child{ border-bottom:none; }
#search-results a:hover{ background:var(--accent-soft); text-decoration:none; }
#search-results .sr-tag{ font-size:.68rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.04em; }
#search-results .sr-title{ font-weight:600; font-size:.88rem; margin-top:2px; }
#search-results .sr-empty{ padding:20px; text-align:center; color:var(--ink-faint); font-size:.85rem; }

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

/* ---------- LAYOUT: sidebar + content ---------- */
.page-shell{ display:flex; align-items:flex-start; max-width:1440px; margin:0 auto; }

.sidebar{
  width:var(--sidebar-w); flex-shrink:0;
  position:sticky; top:var(--nav-h); height:calc(100vh - var(--nav-h));
  overflow-y:auto; padding:26px 18px 60px;
  border-right:1px solid var(--border);
}
.sidebar::-webkit-scrollbar{ width:6px; }

.sidebar-section{ margin-bottom:22px; }
.sidebar-label{
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-faint); padding:0 10px 8px;
}

/* Tree nav — signature element */
.tree{ list-style:none; margin:0; padding:0; position:relative; }
.tree-node{ position:relative; margin:0; }
.tree-node-link{
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; border-radius:var(--r-sm);
  font-size:.85rem; font-weight:600; color:var(--ink-soft);
  position:relative; cursor:pointer; transition:background .18s, color .18s;
}
.tree-node-link:hover{ background:var(--accent-soft); color:var(--accent); text-decoration:none; }
.tree-node-link.current{ background:var(--accent); color:#fff; }
.tree-node-link .node-dot{
  width:9px; height:9px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--accent); background:var(--bg-elevated);
}
.tree-node-link.current .node-dot{ background:#fff; border-color:#fff; }
.tree-node-link .node-check{ margin-left:auto; width:15px; height:15px; color:var(--pine); opacity:0; transition:opacity .2s; flex-shrink:0; }
.tree-node-link .node-check.done{ opacity:1; }

.subtree{ list-style:none; margin:2px 0 4px 22px; padding-left:14px; border-left:1px dashed var(--border-strong); }
.subtree .tree-node-link{ font-size:.79rem; font-weight:500; padding:6px 10px; }
.subtree .tree-node-link .node-dot{ width:6px; height:6px; }

.sidebar-cta{
  margin-top:18px; padding:16px; border-radius:var(--r-md);
  background:var(--bg-sunken);
  border:1px solid var(--border);
}
.sidebar-cta p{ font-size:.8rem; margin:0 0 10px; color:var(--ink-soft); }
.sidebar-cta a{ font-size:.8rem; font-weight:700; }

/* mobile sidebar toggle */
.sidebar-toggle{ display:none; }

main.content{ flex:1; min-width:0; padding:44px 48px 100px; }

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:64px 0 56px;
  border-bottom:1px solid var(--border);
}
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.74rem; font-weight:600; letter-spacing:.06em;
  color:var(--accent); background:var(--accent-soft); padding:6px 14px; border-radius:var(--r-pill);
  margin-bottom:18px;
}
.hero h1{ font-size:clamp(2.2rem,4.5vw,3.6rem); margin-bottom:.35em; }
.hero h1 em{ font-style:italic; color:var(--accent); }
.hero-lede{ font-size:1.12rem; max-width:54ch; color:var(--ink-soft); }
.hero-stats{ display:flex; gap:28px; margin-top:30px; flex-wrap:wrap; }
.hero-stat .num{ font-family:var(--font-display); font-size:2.1rem; font-weight:700; color:var(--ink); display:block; }
.hero-stat .lbl{ font-size:.75rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }
.hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }

/* BFS/DFS animated visual — signature element */
.search-viz{
  position:relative; aspect-ratio:1/0.82; border-radius:var(--r-lg);
  background:var(--bg-elevated); border:1px solid var(--border);
  overflow:hidden;
}
.search-viz svg{ width:100%; height:100%; display:block; }
.viz-caption{
  position:absolute; bottom:14px; left:14px; right:14px;
  font-family:var(--font-mono); font-size:.7rem; color:var(--ink-faint);
  background:var(--bg-elevated); padding:8px 12px; border-radius:var(--r-sm);
  border:1px solid var(--border);
}
.sv-node{ transition:fill .4s var(--ease), stroke .4s var(--ease); }
.sv-edge{ transition:stroke .4s var(--ease), stroke-width .4s; }
.sv-edge.active{ stroke:var(--amber); stroke-width:3; }
.sv-node.visited{ fill:var(--accent-soft); stroke:var(--accent); }
.sv-node.frontier{ fill:var(--amber-soft); stroke:var(--amber); }
.sv-node.current{ fill:var(--amber); stroke:var(--amber); }
.sv-node.goal{ fill:var(--pine); stroke:var(--pine); }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; border-radius:var(--r-sm);
  font-weight:600; font-size:.92rem; cursor:pointer; border:none;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  font-family:var(--font-body);
}
.btn:hover{ text-decoration:none; }
.btn-primary{ background:var(--ink); color:var(--bg); }
.btn-primary:hover{ background:#33353F; }
[data-theme="dark"] .btn-primary{ background:var(--accent); color:#0B1120; }
[data-theme="dark"] .btn-primary:hover{ background:var(--accent-ink); color:#0B1120; }
.btn-outline{ background:transparent; color:var(--ink); border:1.5px solid var(--border-strong); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.btn-sm{ padding:8px 16px; font-size:.78rem; }

/* ---------- MODULE GRID (home) ---------- */
.section{ padding:64px 0; }
.section-head{ margin-bottom:38px; max-width:62ch; }
.section-head .eyebrow{ margin-bottom:14px; }
.section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); }

.module-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.module-card{
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--r-md);
  padding:26px; position:relative; overflow:hidden; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  display:flex; flex-direction:column; height:100%;
}
.module-card:hover{ box-shadow:var(--shadow-sm); border-color:var(--accent); text-decoration:none; }
.module-card .mc-num{
  font-family:var(--font-mono); font-size:.75rem; font-weight:700; color:var(--amber);
  letter-spacing:.05em; margin-bottom:14px; display:flex; align-items:center; gap:8px;
}
.module-card .mc-num::after{ content:''; height:1px; flex:1; background:var(--border); }
.module-card h3{ font-size:1.28rem; margin-bottom:10px; color:var(--ink); }
.module-card p{ font-size:.88rem; flex:1; }
.module-card .mc-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
.module-card .mc-hours{ font-size:.74rem; color:var(--ink-faint); font-weight:600; }
.module-card .mc-go{ width:32px; height:32px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; transition:background .2s,color .2s; }
.module-card:hover .mc-go{ background:var(--accent); color:#fff; }

/* feature strip */
.feature-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.feature-item{ padding:20px; border-radius:var(--r-md); background:var(--bg-elevated); border:1px solid var(--border); }
.feature-item .fi-icon{ width:40px; height:40px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.feature-item h4{ font-size:.98rem; margin-bottom:6px; }
.feature-item p{ font-size:.83rem; margin:0; }

/* ---------- TOPIC / STUDY CONTENT ---------- */
.topic{
  margin-bottom:18px; border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--bg-elevated); overflow:hidden; scroll-margin-top:calc(var(--nav-h) + 16px);
}
.topic-head{
  display:flex; align-items:center; gap:14px; padding:20px 24px; cursor:pointer; user-select:none;
}
.topic-head:hover{ background:var(--bg-sunken); }
.topic-head .th-badge{
  font-family:var(--font-mono); font-size:.72rem; font-weight:700; color:var(--accent);
  background:var(--accent-soft); padding:4px 10px; border-radius:var(--r-pill); flex-shrink:0;
}
.topic-head h3{ font-size:1.18rem; margin:0; flex:1; }
.topic-head .th-chevron{ width:20px; height:20px; color:var(--ink-faint); transition:transform .3s var(--ease); flex-shrink:0; }
.topic.open .th-chevron{ transform:rotate(180deg); }
.topic-body{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.topic.open .topic-body{ max-height:none; }
.topic-body-inner{ padding:4px 24px 28px; }

.topic-body h4{ font-size:1.04rem; margin-top:26px; color:var(--accent-ink); }
[data-theme="dark"] .topic-body h4{ color:var(--accent); }
.topic-body h4:first-child{ margin-top:6px; }
.topic-body h5{ font-size:.92rem; margin-top:18px; color:var(--ink); }
.topic-body ul, .topic-body ol{ padding-left:22px; color:var(--ink-soft); }
.topic-body li{ margin-bottom:6px; }
.topic-body p{ font-size:.95rem; }

/* callouts */
.callout{ border-radius:var(--r-md); padding:16px 18px; margin:16px 0; border:1px solid; font-size:.9rem; }
.callout p:last-child{ margin-bottom:0; }
.callout-strong{ font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.callout-def{ background:var(--accent-soft); border-color:var(--accent); }
.callout-def .callout-strong{ color:var(--accent-ink); }
[data-theme="dark"] .callout-def .callout-strong{ color:var(--accent); }
.callout-eg{ background:var(--pine-soft); border-color:var(--pine); }
.callout-eg .callout-strong{ color:var(--pine); }
.callout-warn{ background:var(--brick-soft); border-color:var(--brick); }
.callout-warn .callout-strong{ color:var(--brick); }
.callout-key{ background:var(--amber-soft); border-color:var(--amber); }
.callout-key .callout-strong{ color:var(--amber); }

/* adv/disadv columns */
.pros-cons{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0; }
.pros, .cons{ padding:16px 18px; border-radius:var(--r-md); border:1px solid var(--border); }
.pros{ background:var(--pine-soft); }
.cons{ background:var(--brick-soft); }
.pros h5, .cons h5{ margin-top:0; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; }
.pros h5{ color:var(--pine); }
.cons h5{ color:var(--brick); }
.pros ul, .cons ul{ margin-bottom:0; padding-left:18px; font-size:.87rem; }

/* tables */
.table-wrap{ overflow-x:auto; margin:18px 0; border-radius:var(--r-md); border:1px solid var(--border); }
table{ width:100%; border-collapse:collapse; font-size:.87rem; min-width:480px; }
thead th{ background:var(--bg-sunken); text-align:left; padding:11px 16px; font-weight:700; color:var(--ink); border-bottom:2px solid var(--border-strong); white-space:nowrap; }
tbody td{ padding:10px 16px; border-bottom:1px solid var(--border); color:var(--ink-soft); }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--accent-soft); }

/* code blocks */
.code-block{ position:relative; margin:18px 0; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); }
.code-head{ display:flex; align-items:center; justify-content:space-between; padding:9px 16px; background:var(--bg-sunken); border-bottom:1px solid var(--border); }
.code-lang{ font-family:var(--font-mono); font-size:.72rem; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }
.copy-btn{ font-family:var(--font-mono); font-size:.7rem; font-weight:600; color:var(--ink-faint); background:none; border:1px solid var(--border); padding:4px 10px; border-radius:var(--r-pill); cursor:pointer; transition:all .2s; }
.copy-btn:hover{ color:var(--accent); border-color:var(--accent); }
pre{ margin:0; padding:18px; overflow-x:auto; background:var(--bg-sunken); font-size:.83rem; line-height:1.6; color:var(--ink); }
[data-theme="dark"] pre{ background:#0A0E1A; }
pre code{ font-family:var(--font-mono); }

/* step list */
.steps{ list-style:none; padding:0; margin:18px 0; counter-reset:step; }
.steps li{ counter-increment:step; position:relative; padding:6px 0 16px 42px; border-left:2px solid var(--border); margin-left:15px; font-size:.93rem; color:var(--ink-soft); }
.steps li:last-child{ border-left-color:transparent; padding-bottom:0; }
.steps li::before{
  content:counter(step); position:absolute; left:-17px; top:0;
  width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:.82rem;
}

/* diagram boxes (HTML/CSS recreated diagrams) */
.diagram{
  margin:22px 0; padding:28px; border-radius:var(--r-md); background:var(--bg-sunken);
  border:1px solid var(--border); overflow-x:auto;
}
.diagram-caption{ text-align:center; font-size:.78rem; color:var(--ink-faint); margin-top:14px; font-style:italic; }

/* tree diagram (generic, used to draw search trees) */
.dtree{ display:flex; flex-direction:column; align-items:center; gap:0; min-width:560px; }
.dtree-row{ display:flex; justify-content:center; gap:14px; position:relative; }
.dtree-node{
  width:46px; height:46px; border-radius:50%; border:2px solid var(--accent); background:var(--bg-elevated);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:.85rem;
  color:var(--ink); flex-shrink:0; position:relative; z-index:2;
}
.dtree-node.goal{ border-color:var(--pine); background:var(--pine-soft); color:var(--pine); }
.dtree-node.path{ border-color:var(--amber); background:var(--amber-soft); color:var(--amber); }
.dtree-connector{ height:28px; width:2px; background:var(--border-strong); margin:0 auto; }

/* flowchart blocks */
.flow{ display:flex; flex-direction:column; align-items:center; gap:0; }
.flow-box{
  padding:12px 20px; border-radius:var(--r-sm); border:1.5px solid var(--accent); background:var(--accent-soft);
  font-size:.84rem; font-weight:600; text-align:center; min-width:180px; color:var(--ink);
}
.flow-box.decision{ border-radius:50px; border-color:var(--amber); background:var(--amber-soft); }
.flow-arrow{ height:26px; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); }
.flow-branch{ display:flex; gap:40px; }
.flow-branch-col{ display:flex; flex-direction:column; align-items:center; }
.flow-branch-label{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-faint); margin:4px 0; }

/* grid diagram (state space / maze) */
.grid-diagram{ display:inline-grid; gap:3px; }
.grid-cell{ width:34px; height:34px; border-radius:5px; background:var(--bg-elevated); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.68rem; font-family:var(--font-mono); color:var(--ink-faint); }
.grid-cell.wall{ background:var(--ink-faint); opacity:.3; }
.grid-cell.start{ background:var(--accent); color:#fff; border-color:var(--accent); }
.grid-cell.goal{ background:var(--pine); color:#fff; border-color:var(--pine); }
.grid-cell.path{ background:var(--amber-soft); border-color:var(--amber); color:var(--amber); font-weight:700; }

/* tags */
.tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
.tag{ font-size:.72rem; font-weight:700; padding:5px 12px; border-radius:var(--r-pill); text-transform:uppercase; letter-spacing:.03em; }
.tag-blue{ background:var(--accent-soft); color:var(--accent-ink); } [data-theme="dark"] .tag-blue{ color:var(--accent); }
.tag-amber{ background:var(--amber-soft); color:var(--amber); }
.tag-pine{ background:var(--pine-soft); color:var(--pine); }
.tag-violet{ background:var(--violet-soft); color:var(--violet); }
.tag-brick{ background:var(--brick-soft); color:var(--brick); }

/* Q&A blocks */
.qa-block{ border:1px solid var(--border); border-radius:var(--r-md); margin:14px 0; overflow:hidden; }
.qa-q{ padding:14px 18px; background:var(--bg-sunken); font-weight:700; font-size:.92rem; cursor:pointer; display:flex; gap:12px; align-items:flex-start; }
.qa-q .qn{ color:var(--accent); flex-shrink:0; font-family:var(--font-mono); }
.qa-a{ padding:0 18px; max-height:0; overflow:hidden; transition:max-height .4s var(--ease), padding .4s var(--ease); font-size:.89rem; color:var(--ink-soft); }
.qa-block.open .qa-a{ padding:14px 18px 18px; max-height:600px; }
.qa-block.open .qa-q{ color:var(--accent); }

/* MCQ */
.mcq-card{ border:1px solid var(--border); border-radius:var(--r-md); padding:20px; margin-bottom:16px; background:var(--bg-elevated); }
.mcq-q{ font-weight:700; font-size:.95rem; margin-bottom:14px; display:flex; gap:10px; }
.mcq-q .qn{ color:var(--accent); font-family:var(--font-mono); flex-shrink:0; }
.mcq-options{ display:grid; gap:9px; }
.mcq-opt{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r-sm);
  border:1.5px solid var(--border); cursor:pointer; font-size:.87rem; transition:all .15s;
}
.mcq-opt:hover{ border-color:var(--accent); background:var(--accent-soft); }
.mcq-opt .opt-letter{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; flex-shrink:0; font-family:var(--font-mono); }
.mcq-opt.selected{ border-color:var(--accent); background:var(--accent-soft); }
.mcq-opt.correct{ border-color:var(--pine); background:var(--pine-soft); }
.mcq-opt.correct .opt-letter{ background:var(--pine); border-color:var(--pine); color:#fff; }
.mcq-opt.incorrect{ border-color:var(--brick); background:var(--brick-soft); }
.mcq-opt.incorrect .opt-letter{ background:var(--brick); border-color:var(--brick); color:#fff; }
.mcq-explain{ display:none; margin-top:12px; padding:12px 14px; border-radius:var(--r-sm); background:var(--bg-sunken); font-size:.84rem; border-left:3px solid var(--pine); }
.mcq-explain.show{ display:block; }
.mcq-filter{ display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
.mcq-filter button{
  padding:8px 16px; border-radius:var(--r-pill); border:1.5px solid var(--border); background:var(--bg-elevated);
  font-size:.82rem; font-weight:600; cursor:pointer; color:var(--ink-soft); transition:all .2s;
}
.mcq-filter button.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
[data-theme="dark"] .mcq-filter button.active{ background:var(--accent); color:#0B1120; }
#mcq-score{ position:sticky; top:calc(var(--nav-h) + 14px); z-index:10; margin-bottom:20px; padding:14px 20px; border-radius:var(--r-md); background:var(--bg-elevated); border:1px solid var(--border); box-shadow:var(--shadow-sm); display:flex; justify-content:space-between; align-items:center; font-size:.88rem; font-weight:700; }
#mcq-score span{ color:var(--accent); }

/* Glossary */
.glossary-letter-nav{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:32px; position:sticky; top:calc(var(--nav-h) + 12px); background:var(--bg-elevated); padding:12px; border-radius:var(--r-md); border:1px solid var(--border); z-index:10; }
.glossary-letter-nav a{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:.78rem; font-weight:700; color:var(--ink-soft); background:var(--bg-elevated); border:1px solid var(--border); }
.glossary-letter-nav a:hover{ background:var(--accent); color:#fff; text-decoration:none; }
.glossary-group{ margin-bottom:36px; scroll-margin-top:140px; }
.glossary-group h2{ font-size:1.6rem; color:var(--accent); border-bottom:2px solid var(--border); padding-bottom:10px; margin-bottom:18px; }
.gterm{ padding:16px 0; border-bottom:1px solid var(--border); }
.gterm dt{ font-weight:700; font-size:1rem; font-family:var(--font-display); color:var(--ink); margin-bottom:5px; }
.gterm dd{ margin:0; color:var(--ink-soft); font-size:.9rem; }
.gterm dd .g-module{ display:inline-block; margin-top:6px; font-family:var(--font-mono); font-size:.7rem; color:var(--accent); }

/* CO matrix table styling reuse */
.matrix-cell-3{ background:var(--pine-soft); color:var(--pine); font-weight:700; text-align:center; }
.matrix-cell-2{ background:var(--amber-soft); color:var(--amber); font-weight:700; text-align:center; }
.matrix-cell-1{ background:var(--accent-soft); color:var(--accent); font-weight:700; text-align:center; }

/* Important Questions page */
.qbank-tabs{ display:flex; gap:8px; margin-bottom:28px; flex-wrap:wrap; border-bottom:1px solid var(--border); padding-bottom:0; }
.qbank-tab{ padding:12px 18px; font-weight:700; font-size:.85rem; color:var(--ink-faint); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-1px; }
.qbank-tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
.qbank-panel{ display:none; }
.qbank-panel.active{ display:block; animation:fadeIn .3s var(--ease); }
.qlist{ list-style:none; padding:0; counter-reset:qn; }
.qlist li{ counter-increment:qn; padding:16px 0 16px 44px; position:relative; border-bottom:1px solid var(--border); font-size:.93rem; color:var(--ink-soft); }
.qlist li::before{ content:counter(qn); position:absolute; left:0; top:14px; width:28px; height:28px; border-radius:8px; background:var(--accent-soft); color:var(--accent); font-family:var(--font-mono); font-weight:700; font-size:.78rem; display:flex; align-items:center; justify-content:center; }
.qlist li strong{ color:var(--ink); }
.qlist .marks{ float:right; font-family:var(--font-mono); font-size:.7rem; color:var(--ink-faint); background:var(--bg-sunken); padding:3px 9px; border-radius:var(--r-pill); margin-left:10px; }

@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* Scroll to top */
#scroll-top{
  position:fixed; bottom:26px; right:26px; z-index:150;
  width:46px; height:46px; border-radius:50%; background:var(--ink); color:var(--bg);
  display:flex; align-items:center; justify-content:center; cursor:pointer; border:none;
  box-shadow:var(--shadow-sm); opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease);
}
[data-theme="dark"] #scroll-top{ background:var(--accent); color:#0B1120; }
#scroll-top.show{ opacity:1; pointer-events:auto; }

/* Reading progress ring (per-module page indicator in sidebar) */
.read-progress{ margin-top:16px; padding:14px; border-radius:var(--r-md); background:var(--bg-sunken); border:1px solid var(--border); }
.read-progress-bar{ height:6px; border-radius:3px; background:var(--border); overflow:hidden; margin-top:8px; }
.read-progress-fill{ height:100%; background:var(--accent); width:0%; transition:width .2s var(--ease); border-radius:3px; }
.read-progress-label{ font-size:.72rem; color:var(--ink-faint); display:flex; justify-content:space-between; font-weight:600; }

/* Footer */
footer{ border-top:1px solid var(--border); padding:46px 0 36px; margin-top:40px; }
.footer-grid{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.footer-grid p{ font-size:.82rem; max-width:46ch; }
.footer-links{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-links a{ font-size:.82rem; color:var(--ink-soft); font-weight:600; }

/* prev/next nav */
.module-pager{ display:flex; justify-content:space-between; gap:16px; margin-top:50px; padding-top:30px; border-top:1px solid var(--border); }
.pager-link{ display:flex; flex-direction:column; gap:4px; padding:16px 20px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--bg-elevated); max-width:46%; transition:all .2s; }
.pager-link:hover{ border-color:var(--accent); text-decoration:none; }
.pager-link.next{ text-align:right; align-items:flex-end; margin-left:auto; }
.pager-link .pg-lbl{ font-size:.7rem; color:var(--ink-faint); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.pager-link .pg-title{ font-weight:700; color:var(--ink); font-family:var(--font-display); font-size:1rem; }

/* page intro block */
.page-intro{ padding:44px 0 30px; border-bottom:1px solid var(--border); margin-bottom:36px; }
.page-intro .eyebrow{ margin-bottom:14px; }
.page-intro h1{ font-size:clamp(1.9rem,3.6vw,2.7rem); }
.page-intro p{ max-width:70ch; font-size:1.02rem; }
.module-meta-row{ display:flex; gap:22px; flex-wrap:wrap; margin-top:22px; }
.mmr-item{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-soft); font-weight:600; }
.mmr-item svg{ width:16px; height:16px; color:var(--accent); }

/* expand/collapse all controls */
.topic-controls{ display:flex; gap:10px; margin-bottom:24px; }

/* TOC quick chips at top of module pages */
.toc-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:36px; }
.toc-chips a{ font-size:.78rem; font-weight:600; padding:7px 14px; border-radius:var(--r-pill); background:var(--bg-elevated); border:1px solid var(--border); color:var(--ink-soft); }
.toc-chips a:hover{ border-color:var(--accent); color:var(--accent); text-decoration:none; }

/* misc */
.divider{ height:1px; background:var(--border); margin:40px 0; border:none; }
.text-center{ text-align:center; }
.muted{ color:var(--ink-faint); }
.formula-box{ font-family:var(--font-mono); background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--r-sm); padding:16px 20px; margin:16px 0; text-align:center; font-size:1.02rem; color:var(--accent-ink); overflow-x:auto; }
[data-theme="dark"] .formula-box{ color:var(--accent); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px){
  .hero-grid{ grid-template-columns:1fr; }
  .search-viz{ max-width:480px; margin:0 auto; }
}
@media (max-width: 900px){
  :root{ --sidebar-w: 260px; }
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .nav-search input{ width:130px; }
  main.content{ padding:32px 22px 80px; }
  .sidebar{ position:fixed; left:0; top:var(--nav-h); height:calc(100vh - var(--nav-h)); z-index:180; background:var(--bg); transform:translateX(-105%); transition:transform .25s var(--ease); box-shadow:var(--shadow-md); }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-toggle{ display:flex; }
  .pros-cons{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .module-pager{ flex-direction:column; }
  .pager-link, .pager-link.next{ max-width:100%; }
  .footer-grid{ flex-direction:column; }
  .hero-stats{ gap:20px; }
}

/* mobile nav drawer */
.mobile-drawer{
  display:none; position:fixed; inset:var(--nav-h) 0 0 0; background:var(--bg); z-index:250;
  padding:24px; overflow-y:auto;
}
.mobile-drawer.open{ display:block; }
.mobile-drawer a{ display:block; padding:14px 4px; font-weight:700; font-size:1.05rem; color:var(--ink); border-bottom:1px solid var(--border); }
.mobile-drawer a:hover{ color:var(--accent); text-decoration:none; }