@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Fira+Code:wght@400;500;600&display=swap');

/* ==================================================================
   PREBUILT COURSE BRIDGE
   ------------------------------------------------------------------
   Injected into courses that ship as finished HTML rather than
   Markdown. Their pages were generated by the same lineage of tooling
   as the rest of this site, so they already express their design as
   CSS custom properties on :root — which means a course can be
   re-themed by redefining those tokens, with the content never parsed,
   rewritten, or put at risk.

   This file loads AFTER each page's own inline <style>, so equal
   specificity resolves in our favour on source order alone.

   It also styles the grafted-on site top bar and pushes the course's
   own sticky rail and TOC clear of it.
   ================================================================== */

/* ---------------- palette: adopt the site's tokens ---------------- */
:root {
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'Fira Code', 'SF Mono', Consolas, monospace;

  --bg: #eef2f6;
  --grid-line: rgba(30, 58, 95, 0.055);
  --surface: #fbfcfd;
  --surface2: #e9eef4;
  --surface-elevated: #ffffff;
  --border: rgba(30, 58, 95, 0.13);
  --border-bright: rgba(30, 58, 95, 0.26);
  --text: #14273d;
  --text-dim: #5b7186;

  /* the course's own named hues, remapped onto the site's five accents */
  --teal:   #0b4f75;  --teal-dim:   rgba(11, 79, 117, 0.07);
  --copper: #b45309;  --copper-dim: rgba(180, 83, 9, 0.09);
  --olive:  #4d7c0f;  --olive-dim:  rgba(77, 124, 15, 0.09);
  --plum:   #9f1239;  --plum-dim:   rgba(159, 18, 57, 0.08);
  --steel:  #475569;  --steel-dim:  rgba(71, 85, 105, 0.09);

  --blue: var(--teal);   --blue-dim: var(--teal-dim);
  --amber: var(--copper); --amber-dim: var(--copper-dim);
  --sage: var(--olive);  --sage-dim: var(--olive-dim);
  --rose: var(--plum);   --rose-dim: var(--plum-dim);

  --accent: var(--teal);
  --accent-dim: var(--teal-dim);

  --topbar-h: 52px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1622;
    --grid-line: rgba(125, 178, 222, 0.055);
    --surface: #121f2e;
    --surface2: #17273a;
    --surface-elevated: #1a2c41;
    --border: rgba(148, 187, 224, 0.13);
    --border-bright: rgba(148, 187, 224, 0.28);
    --text: #dbe8f5;
    --text-dim: #8ba6bf;

    --teal:   #56b0e0;  --teal-dim:   rgba(86, 176, 224, 0.13);
    --copper: #e8a33d;  --copper-dim: rgba(232, 163, 61, 0.14);
    --olive:  #9ccc51;  --olive-dim:  rgba(156, 204, 81, 0.13);
    --plum:   #f2718c;  --plum-dim:   rgba(242, 113, 140, 0.13);
    --steel:  #93a7bd;  --steel-dim:  rgba(147, 167, 189, 0.13);
  }
}

/* The course keys vLLM/SGLang identity colours off the hues above; those
   aliases are declared in its own stylesheet and inherit the remap. */

body { font-family: var(--font-body); }
code, pre, .code-block, .mono { font-family: var(--font-mono); }

/* ---------------- grafted site top bar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 300;
  height: var(--topbar-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar__in {
  max-width: 1500px; margin: 0 auto; height: 100%;
  padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.topbar__brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 700; letter-spacing: -.35px;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.topbar__brand::before {
  content: ''; width: 16px; height: 1.5px; background: var(--accent); flex-shrink: 0;
}
.topbar__nav { display: flex; align-items: center; gap: 4px; }
.topbar__l {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
  padding: 6px 10px; border-radius: 6px; transition: color .14s, background .14s;
}
.topbar__l:hover { color: var(--text); background: var(--surface2); }
.topbar__l.is-active { color: var(--accent); background: var(--accent-dim); }

/* the course's own sticky rail and TOC sit below the bar */
.nav, .toc {
  top: calc(var(--topbar-h) + 20px);
  max-height: calc(100dvh - var(--topbar-h) - 44px);
}

@media (max-width: 900px) {
  :root { --topbar-h: 48px; }
  .topbar__in { padding: 0 20px; }
  .topbar__l { padding: 6px 7px; letter-spacing: 1px; }
  .nav { top: var(--topbar-h); }
}