/* =========================================================================
   CSC 471 / 472 course site -- "Terminal Dossier" design system
   Dark, technical-editorial. Per-course accent via [data-course].
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg:        #0b0d10;
  --bg-2:      #11141a;
  --panel:     #151922;
  --panel-2:   #1b2029;
  --line:      #262c38;
  --line-soft: #1e232d;
  --ink:       #e8ebf0;
  --ink-soft:  #aab3c2;
  --ink-dim:   #6f7a8b;
  --accent:    #e0e4ea;      /* overridden per course */
  --accent-2:  #9aa3b2;
  --accent-ink:#0b0d10;
  --danger:    #ff5c6c;
  --radius:    14px;
  --maxw:      1160px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --disp: "Chakra Petch", var(--mono);
}
/* Course accents */
[data-course="csc471"]{ --accent:#ffb23e; --accent-2:#ff7a45; --glow:rgba(255,178,62,.16); }
[data-course="csc472"]{ --accent:#39d98a; --accent-2:#22d3ee; --glow:rgba(57,217,138,.15); }
:root{ --glow:rgba(150,160,180,.12); }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 500px at 85% -10%, var(--glow), transparent 70%),
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:auto, 44px 44px, 44px 44px;
  background-position:0 0, 0 0, 0 0;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
img{ max-width:100%; }

/* ---- layout shell ---- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px); background:rgba(11,13,16,.72);
  border-bottom:1px solid var(--line);
}
.topbar .row{ display:flex; align-items:center; gap:22px; height:62px; }
.brand{ font-family:var(--disp); font-weight:700; letter-spacing:.06em;
  color:var(--ink); text-transform:uppercase; font-size:15px; display:flex; gap:10px; align-items:center; }
.brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 12px var(--accent); }
.navlinks{ margin-left:auto; display:flex; gap:20px; font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.navlinks a{ color:var(--ink-soft); }
.navlinks a:hover{ color:var(--accent); text-decoration:none; }

/* ---- breadcrumb (filesystem path) ---- */
.crumb{ font-family:var(--mono); font-size:12.5px; color:var(--ink-dim);
  letter-spacing:.04em; padding:18px 0 0; }
.crumb a{ color:var(--ink-soft); }
.crumb .sep{ color:var(--line); margin:0 8px; }

/* ---- eyebrow / kicker ---- */
.kicker{ font-family:var(--mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); display:inline-flex; gap:10px; align-items:center; }
.kicker::before{ content:""; width:26px; height:1px; background:var(--accent); display:inline-block; }

h1,h2,h3{ font-family:var(--disp); line-height:1.12; color:var(--ink); font-weight:700; letter-spacing:.01em; }
h1{ font-size:clamp(2rem, 4.4vw, 3.5rem); margin:.35em 0 .3em; }
h2{ font-size:1.7rem; margin:1.6em 0 .5em; }
h3{ font-size:1.2rem; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--accent-2); }
p{ margin:0 0 1em; color:var(--ink-soft); }
strong{ color:var(--ink); font-weight:600; }
code{ font-family:var(--mono); font-size:.86em; background:var(--panel-2);
  border:1px solid var(--line); border-radius:6px; padding:.08em .38em; color:var(--ink); }

/* ---- hero ---- */
.hero{ padding:70px 0 40px; border-bottom:1px solid var(--line); position:relative; }
.hero .lede{ font-size:1.28rem; color:var(--ink-soft); max-width:60ch; }
.hero .meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.tag{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:100px; padding:6px 14px; background:var(--panel); }
.tag.accent{ color:var(--accent-ink); background:var(--accent); border-color:var(--accent); font-weight:700; }

/* ---- section title ---- */
.sec-title{ display:flex; align-items:baseline; gap:16px; margin:56px 0 22px; }
.sec-title .n{ font-family:var(--mono); color:var(--accent); font-size:14px; }
.sec-title h2{ margin:0; }

/* ---- cards grid ---- */
.grid{ display:grid; gap:16px; }
.grid.c2{ grid-template-columns:repeat(2,1fr); }
.grid.c3{ grid-template-columns:repeat(3,1fr); }
.card{
  display:block; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 20px 18px; position:relative;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
  color:var(--ink);
}
.card:hover{ transform:translateY(-3px); border-color:var(--accent); background:var(--panel-2); text-decoration:none; }
.card .idx{ font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.1em; }
.card h3{ font-family:var(--disp); text-transform:none; letter-spacing:0; color:var(--ink);
  font-size:1.12rem; margin:.5em 0 .2em; }
.card p{ font-size:.95rem; margin:0; color:var(--ink-dim); }
.card .go{ position:absolute; right:18px; top:18px; color:var(--ink-dim); font-family:var(--mono); }
.card:hover .go{ color:var(--accent); }

/* course cards (landing) */
.course-card{ padding:34px; border-radius:18px; overflow:hidden; }
.course-card .code{ font-family:var(--mono); font-size:13px; letter-spacing:.2em; color:var(--accent); }
.course-card h2{ font-size:2rem; margin:.2em 0 .1em; }
.course-card .stat{ display:flex; gap:26px; margin-top:20px; font-family:var(--mono); font-size:13px; color:var(--ink-soft); }
.course-card .stat b{ color:var(--accent); font-size:22px; display:block; }

/* ---- knowledge-point / lab article ---- */
.layout{ display:grid; grid-template-columns:1fr; gap:40px; padding:8px 0 60px; }
.article{ max-width:74ch; }
.article ul{ padding-left:1.1em; margin:0 0 1.2em; }
.article li{ margin:.5em 0; color:var(--ink-soft); }
.article li::marker{ color:var(--accent); }
.article h2{ font-size:1.35rem; }

.callout{ border:1px solid var(--accent); border-left-width:4px; border-radius:10px;
  background:linear-gradient(180deg, var(--panel), var(--bg-2)); padding:18px 20px; margin:26px 0; }
.callout .lab{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.callout p{ margin:.4em 0 0; color:var(--ink); }

.q{ border:1px dashed var(--line); border-radius:10px; padding:14px 16px; margin:14px 0; background:var(--panel); }
.q .qn{ font-family:var(--mono); color:var(--accent); font-size:12px; letter-spacing:.1em; }

pre{ background:#0a0c10; border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; overflow-x:auto; margin:20px 0; }
pre code{ background:none; border:none; padding:0; font-size:13px; line-height:1.6; color:#cdd6e4; }
pre.term{ border-color:var(--accent); }
pre.term::before{ content:"$ terminal"; display:block; font-family:var(--mono); font-size:10.5px;
  color:var(--ink-dim); letter-spacing:.16em; text-transform:uppercase; margin-bottom:10px; }

/* ---- prev/next ---- */
.pager{ display:flex; justify-content:space-between; gap:16px; margin-top:44px;
  border-top:1px solid var(--line); padding-top:22px; }
.pager a{ font-family:var(--mono); font-size:13px; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:10px; padding:12px 16px; max-width:46%; background:var(--panel); }
.pager a:hover{ border-color:var(--accent); color:var(--accent); text-decoration:none; }
.pager .lbl{ display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:4px; }
.pager .nxt{ margin-left:auto; text-align:right; }

/* ---- toc sidebar on class page ---- */
.kp-list{ counter-reset:kp; display:grid; gap:10px; }
.kp-row{ display:flex; align-items:center; gap:16px; padding:14px 18px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; color:var(--ink); transition:.15s; }
.kp-row:hover{ border-color:var(--accent); background:var(--panel-2); text-decoration:none; transform:translateX(4px); }
.kp-row .num{ font-family:var(--mono); font-size:13px; color:var(--accent); min-width:44px; }
.kp-row .t{ font-family:var(--serif); font-size:1.05rem; }
.kp-row .arw{ margin-left:auto; color:var(--ink-dim); font-family:var(--mono); }
.kp-row:hover .arw{ color:var(--accent); }

/* ---- footer ---- */
footer{ border-top:1px solid var(--line); margin-top:40px; padding:34px 0 60px;
  font-family:var(--mono); font-size:12.5px; color:var(--ink-dim); letter-spacing:.03em; }
footer a{ color:var(--ink-soft); }

/* ---- responsive ---- */
@media (max-width:820px){
  body{ font-size:17px; }
  .grid.c2,.grid.c3{ grid-template-columns:1fr; }
  .navlinks{ display:none; }
  .hero{ padding:44px 0 28px; }
}
/* subtle load-in */
.article, .card, .kp-row, .course-card{ animation:rise .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }

/* ---- search button in topbar ---- */
.searchbtn{ display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:100px; padding:7px 12px; background:var(--panel); }
.searchbtn:hover{ border-color:var(--accent); color:var(--accent); text-decoration:none; }
.searchbtn kbd{ font-family:var(--mono); font-size:10px; border:1px solid var(--line);
  border-radius:4px; padding:1px 5px; color:var(--ink-dim); }

/* ---- search overlay ---- */
.search-overlay{ position:fixed; inset:0; z-index:100; display:none;
  background:rgba(6,8,11,.72); backdrop-filter:blur(8px); }
.search-overlay.open{ display:block; animation:fade .18s ease both; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.search-modal{ max-width:660px; margin:11vh auto 0; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6); }
.search-head{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); }
.search-head .sk{ font-family:var(--mono); color:var(--accent); font-size:16px; }
.search-head input{ flex:1; background:none; border:none; outline:none; color:var(--ink);
  font-family:var(--serif); font-size:1.1rem; }
.search-close{ font-family:var(--mono); font-size:11px; color:var(--ink-dim); background:var(--panel-2);
  border:1px solid var(--line); border-radius:6px; padding:4px 8px; cursor:pointer; }
.search-results{ max-height:56vh; overflow-y:auto; padding:8px; }
.sr{ display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:12px;
  padding:11px 12px; border-radius:10px; color:var(--ink); }
.sr:hover, .sr.on{ background:var(--panel-2); text-decoration:none; }
.sr.on{ box-shadow:inset 3px 0 0 var(--accent); }
.sr-k{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em;
  text-align:center; padding:3px 0; border-radius:5px; border:1px solid var(--line); color:var(--ink-dim); }
.sr-k.csc471{ color:#ffb23e; border-color:rgba(255,178,62,.4); }
.sr-k.csc472{ color:#39d98a; border-color:rgba(57,217,138,.4); }
.sr-t{ font-family:var(--serif); font-size:1.02rem; }
.sr-b{ font-family:var(--mono); font-size:11px; color:var(--ink-dim); }
.sr-empty{ padding:22px; text-align:center; color:var(--ink-dim); font-family:var(--mono); font-size:13px; }
.search-foot{ padding:10px 16px; border-top:1px solid var(--line); font-family:var(--mono);
  font-size:11px; color:var(--ink-dim); }
.search-foot b{ color:var(--ink-soft); }

/* ---- hero canvas ---- */
.hero{ overflow:hidden; }
#heroCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0;
  opacity:.55; pointer-events:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent); }
.hero > *{ position:relative; z-index:1; }
.hero h1{ animation:rise .6s cubic-bezier(.2,.7,.2,1) both; }
.hero .lede{ animation:rise .6s .12s cubic-bezier(.2,.7,.2,1) both; }
.hero .kicker{ animation:rise .6s .04s cubic-bezier(.2,.7,.2,1) both; }

/* ---- diagrams (TikZ replacements) ---- */
.diagram{ margin:26px 0 30px; padding:18px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; }
.diagram svg{ width:100%; height:auto; display:block; }
.diagram figcaption{ margin-top:12px; font-family:var(--mono); font-size:11.5px; color:var(--ink-dim);
  letter-spacing:.02em; text-align:center; }
.diagram .db{ fill:var(--panel-2); stroke:var(--line); stroke-width:1.2; }
.diagram .db.acc{ stroke:var(--accent); }
.diagram .dl{ fill:var(--ink); font-family:var(--mono); font-size:13px; text-anchor:middle; dominant-baseline:middle; }
.diagram .ds{ fill:var(--ink-dim); font-family:var(--mono); font-size:10.5px; text-anchor:middle; dominant-baseline:middle; }
.diagram .dcap{ fill:var(--ink-soft); font-family:var(--mono); font-size:11px; }
.diagram .dln{ stroke:var(--ink-dim); stroke-width:1.4; }
.diagram .dln.acc{ stroke:var(--accent); stroke-width:1.8; }
.diagram .ah{ fill:var(--ink-dim); }
.diagram .dln.acc + .ah, .diagram .acc .ah{ fill:var(--accent); }