/* ============================================================
 * Edu Learning Hub — Design System v3 ("Cyber Indigo & Slate")
 * Layout: Linear / Vercel-style 3-column locked
 * ============================================================ */

/* ---------- Design tokens (light — primary scheme) ---------- */
:root {
  /* Surfaces */
  --color-bg-content:   #FFFFFF;        /* main reading area */
  --color-bg-sidebar:   #F8FAFC;        /* left navigation */
  --color-bg-toc:       #FFFFFF;        /* right table of contents */
  --color-bg-header:    #FFFFFF;        /* top navbar */
  --color-bg-footer:    #0F172A;        /* deep slate — anchors the page */
  --color-bg-elevated:  #F8FAFC;
  --color-bg-subtle:    #F1F5F9;

  /* Text */
  --color-text-primary:   #0F172A;
  --color-text-secondary: #475569;
  --color-text-tertiary:  #94A3B8;
  --color-text-on-dark:   #E2E8F0;
  --color-text-on-dark-mute: #94A3B8;

  /* Borders */
  --color-border-subtle: #E2E8F0;
  --color-border-default:#CBD5E1;

  /* Indigo brand */
  --color-indigo-50:   #EEF2FF;
  --color-indigo-500:  #6366F1;
  --color-indigo-600:  #4F46E5;
  --color-indigo-700:  #4338CA;

  /* Violet (for TL;DR) */
  --color-violet-50:   #F5F3FF;
  --color-violet-500:  #8B5CF6;
  --color-violet-600:  #7C3AED;

  /* Functional accents */
  --color-emerald-500: #10B981;
  --color-emerald-50:  #D1FAE5;
  --color-amber-500:   #F59E0B;
  --color-amber-50:    #FEF3C7;
  --color-rose-500:    #F43F5E;
  --color-rose-50:     #FFE4E6;
  --color-sky-500:     #0EA5E9;
  --color-sky-50:      #E0F2FE;

  /* Code (dark blocks, even on light theme) */
  --color-code-bg:        #0F172A;
  --color-code-fg:        #E2E8F0;
  --color-code-inline-bg: #F1F5F9;
  --color-code-inline-fg: #4F46E5;

  /* Elevation */
  --shadow-header: 0 4px 6px -1px rgba(0,0,0,0.03), 0 2px 4px -1px rgba(0,0,0,0.02);
  --shadow-sm:     0 1px 2px 0 rgba(15,23,42,0.04);
  --shadow-md:     0 4px 12px -2px rgba(15,23,42,0.06), 0 2px 4px -2px rgba(15,23,42,0.04);
  --shadow-lg:     0 16px 32px -8px rgba(15,23,42,0.10), 0 4px 8px -4px rgba(15,23,42,0.06);

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, ui-monospace, monospace;

  /* Layout */
  --sidebar-width: 260px;
  --toc-width:     220px;
  --content-max:   980px;
  --content-pad-x: 2.5rem;
}

/* ---------- Design tokens (dark) ---------- */
[data-md-color-scheme="slate"] {
  --color-bg-content:   #0B1120;
  --color-bg-sidebar:   #060B17;
  --color-bg-toc:       #0B1120;
  --color-bg-header:    #0B1120;
  --color-bg-footer:    #020617;
  --color-bg-elevated:  #131A2C;
  --color-bg-subtle:    #1E293B;

  --color-text-primary:   #F1F5F9;
  --color-text-secondary: #94A3B8;
  --color-text-tertiary:  #64748B;
  --color-text-on-dark:   #E2E8F0;
  --color-text-on-dark-mute: #94A3B8;

  --color-border-subtle:  rgba(255,255,255,0.06);
  --color-border-default: rgba(255,255,255,0.10);

  --color-indigo-50:  rgba(99,102,241,0.12);
  --color-indigo-500: #818CF8;
  --color-indigo-600: #A5B4FC;
  --color-indigo-700: #C7D2FE;

  --color-violet-50:  rgba(139,92,246,0.10);
  --color-violet-500: #A78BFA;

  --color-code-bg:        #060B17;
  --color-code-fg:        #E2E8F0;
  --color-code-inline-bg: rgba(99,102,241,0.10);
  --color-code-inline-fg: #A5B4FC;

  --shadow-header: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.3);
}

/* ---------- Hook design tokens into Material's variables ---------- */
[data-md-color-scheme="default"] {
  --md-default-bg-color:           var(--color-bg-content);
  --md-default-fg-color:           var(--color-text-primary);
  --md-default-fg-color--light:    var(--color-text-secondary);
  --md-default-fg-color--lighter:  var(--color-text-tertiary);
  --md-default-fg-color--lightest: var(--color-border-subtle);
  --md-primary-fg-color:           var(--color-bg-header);
  --md-primary-bg-color:           var(--color-text-primary);
  --md-accent-fg-color:            var(--color-indigo-600);
  --md-typeset-a-color:            var(--color-indigo-600);
  --md-code-bg-color:              var(--color-code-inline-bg);
  --md-code-fg-color:              var(--color-code-inline-fg);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color:           var(--color-bg-content);
  --md-default-fg-color:           var(--color-text-primary);
  --md-default-fg-color--light:    var(--color-text-secondary);
  --md-default-fg-color--lighter:  var(--color-text-tertiary);
  --md-default-fg-color--lightest: var(--color-border-subtle);
  --md-primary-fg-color:           var(--color-bg-header);
  --md-primary-bg-color:           var(--color-text-primary);
  --md-accent-fg-color:            var(--color-indigo-500);
  --md-typeset-a-color:            var(--color-indigo-500);
  --md-code-bg-color:              var(--color-code-inline-bg);
  --md-code-fg-color:              var(--color-code-inline-fg);
}

body {
  background: var(--color-bg-content);
}

/* ===========================================================
 * 1. THREE-COLUMN FLEX LAYOUT — locked to viewport edges
 *    Uses flexbox so that hidden sidebars (home page with
 *    `hide: [navigation, toc]`) collapse cleanly and the
 *    content expands to fill the freed space.
 * =========================================================== */

/* Remove Material's narrow centered grid */
.md-grid {
  max-width: 100% !important;
  margin: 0 !important;
}

/* Hidden sidebars must truly collapse */
.md-sidebar[hidden] {
  display: none !important;
}

@media screen and (min-width: 76.25em) {
  /* The main row becomes a flex container */
  .md-main__inner.md-grid {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 100%;
    padding: 0;
    margin: 0;
    min-height: calc(100vh - 3rem - 4rem); /* fill viewport minus header + footer */
  }

  /* Left sidebar — pinned to viewport left edge */
  .md-sidebar--primary {
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width) !important;
    margin: 0 !important;
    padding: 1.5rem 0.5rem 2rem 1.25rem;
    background: var(--color-bg-sidebar);
    border-right: 1px solid var(--color-border-subtle);
    position: sticky;
    top: 5.25rem;
    height: calc(100vh - 5.25rem);
    overflow-y: auto;
    box-shadow: none;
  }

  /* Right TOC — pinned to viewport right edge */
  .md-sidebar--secondary {
    flex: 0 0 var(--toc-width);
    width: var(--toc-width) !important;
    margin: 0 !important;
    padding: 1.5rem 1.25rem 2rem 1rem;
    background: var(--color-bg-toc);
    border-left: 1px solid var(--color-border-subtle);
    position: sticky;
    top: 5.25rem;
    height: calc(100vh - 5.25rem);
    overflow-y: auto;
    order: 99; /* keep on the right even if DOM order differs */
  }

  /* Content fills the middle space; reading width is capped INSIDE.
     `margin: 0` left-aligns inner so unused space becomes a small gutter
     between content and the right TOC — feels tighter than centered. */
  .md-content {
    flex: 1 1 0;
    min-width: 0;
    background: var(--color-bg-content);
  }
  .md-content__inner {
    max-width: var(--content-max);
    margin: 0;
    padding: 2.25rem var(--content-pad-x) 4rem;
  }

  /* HOME PAGE — both sidebars hidden by frontmatter `hide: [navigation, toc]`.
     Centered wide layout so cards & hero fill the screen, no rails of dead space. */
  .md-main__inner.md-grid:has(> .md-sidebar--primary[hidden]):has(> .md-sidebar--secondary[hidden]) .md-content {
    flex: 1 1 100%;
  }
  .md-main__inner.md-grid:has(> .md-sidebar--primary[hidden]):has(> .md-sidebar--secondary[hidden]) .md-content__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
  }
}

/* ===========================================================
 * 1b. Mobile / tablet — let Material handle the drawer
 * =========================================================== */
@media screen and (max-width: 76.1875em) {
  .md-content__inner {
    padding: 1.5rem 1.25rem 3rem;
    max-width: 100%;
  }
}

/* ===========================================================
 * 2. HEADER + TABS — Cyber Indigo bar with white text
 * =========================================================== */

/* ============================================================
 * UTILITY BAR — single 56px row containing
 *   [logo] + [inline category nav (overlaid)] + [search] + [actions]
 * (the .md-tabs row is absolutely-positioned INTO this same bar)
 * ============================================================ */

.md-header {
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--color-text-primary) !important;
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: none;

  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  height: 3.5rem !important;
  transition: box-shadow 0.18s ease, background 0.18s ease;

  /* Become the positioning ancestor for the absolutely-placed .md-tabs */
  overflow: visible;
}

/* Stronger shadow once user starts scrolling */
.md-header--shadow,
.md-header--lifted {
  box-shadow:
    0 4px 6px -1px rgba(15, 23, 42, 0.06),
    0 2px 4px -1px rgba(15, 23, 42, 0.04) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

[data-md-color-scheme="slate"] .md-header {
  background: rgba(15, 23, 42, 0.72) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-md-color-scheme="slate"] .md-header--shadow,
[data-md-color-scheme="slate"] .md-header--lifted {
  background: rgba(15, 23, 42, 0.88) !important;
}

/* Centered, comfortable container */
.md-header__inner {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.md-header__title {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--color-text-primary);
  letter-spacing: -0.018em;
}
.md-header__title:before {
  content: "⚡ ";
  color: var(--color-indigo-600);
  margin-right: 0.15em;
}
.md-header__topic > .md-ellipsis { color: var(--color-text-primary); font-weight: 700; }
.md-header__topic .md-ellipsis { color: var(--color-text-primary); }

/* Logo */
.md-header__button.md-logo { color: var(--color-indigo-600); }
.md-header__button.md-logo svg { fill: var(--color-indigo-600); }

/* Header icon buttons (search, theme toggle, etc.) */
.md-header__button {
  color: var(--color-text-secondary);
  transition: color 0.15s ease, background 0.15s ease;
}
.md-header__button:hover {
  color: var(--color-indigo-600);
  background: var(--color-indigo-50);
}

/* SEARCH — the productivity hero. Linear-style large input with ⌘K chip. */
.md-search {
  flex: 1 1 0;
  min-width: 0;
  max-width: 520px;
  margin: 0 auto;
}
.md-search__form {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  height: 2.25rem;
  position: relative;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.2s ease;
}
.md-search__form:hover {
  background: #F1F5F9;
  border-color: var(--color-border-default);
}
.md-search__form:focus-within,
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background: #FFFFFF;
  border-color: var(--color-indigo-600);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
}
.md-search__input {
  background: transparent !important;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  padding-left: 2.4em !important;
  padding-right: 3em !important;
}
.md-search__input::placeholder {
  color: var(--color-text-tertiary);
}
.md-search__icon[for="__search"] {
  color: var(--color-text-tertiary);
  left: 0.55em !important;
}

/* The ⌘K hint chip on the right */
.md-search__form::after {
  content: "⌘K";
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
  background: #FFFFFF;
  border: 1px solid var(--color-border-subtle);
  border-radius: 5px;
  padding: 0.18em 0.45em;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.md-search__form:focus-within::after,
[data-md-toggle="search"]:checked ~ .md-header .md-search__form::after {
  opacity: 0;
}

[data-md-color-scheme="slate"] .md-search__form {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-md-color-scheme="slate"] .md-search__form::after {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text-secondary);
}

/* ============================================================
 * CATEGORY NAV (Home / Learn / AI / Reference)
 * JS moves the <ul> into the header. We just need to hide the
 * original .md-tabs container and style the relocated nav.
 * ============================================================ */
.md-tabs.edu-tabs-hidden { display: none !important; }

/* Until JS runs (or if JS is disabled), keep .md-tabs as the second row */
.md-tabs {
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: none;
  position: sticky !important;
  top: 3.5rem !important;
  z-index: 98 !important;
  height: 2.75rem;
}

.md-tabs > .md-grid,
.md-tabs__inner.md-grid {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Relocated nav, now living inside .md-header__inner */
.edu-cat-nav {
  display: flex;
  align-items: center;
  margin-left: 1.5rem;
  flex: 0 1 auto;
  min-width: 0;
}
.edu-cat-nav .md-tabs__list {
  display: flex;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}
.edu-cat-nav .md-tabs__item { margin: 0; padding: 0; flex-shrink: 0; }

.md-tabs__list {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  height: 100%;
  margin: 0;
  padding: 0;
}

.md-tabs__item { margin: 0; padding: 0; }

.md-tabs__link {
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: 0.85rem;
  opacity: 1;
  margin: 0 !important;
  padding: 0 0.7rem;
  border-radius: 6px;
  position: relative;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  height: 1.85rem;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.md-tabs__link:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-subtle);
}
.md-tabs__link--active {
  color: var(--color-indigo-600);
  font-weight: 600;
  background: var(--color-indigo-50);
}

/* Push the search/actions to the right of the nav inside the header */
.md-header .md-header__title { flex: 0 0 auto; }
.md-header .md-search { margin-left: auto; }
.md-header__option { flex-shrink: 0; }

/* Hide Material's auto-generated "current page" breadcrumb in the header
   (we have the sidebar + URL — repeating it is noise) */
.md-header__topic + .md-header__topic { display: none; }

/* ============================================================
 * TOPIC STRIP — sole second row. Shows Python/FastAPI/etc
 * when in Learn; ML/LangChain/etc when in AI.
 * ============================================================ */

.edu-topics {
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-border-subtle);
  position: sticky !important;
  top: 3.5rem !important;         /* directly below the (single) utility bar */
  z-index: 97 !important;
  height: 2.5rem;                  /* 40px */
}
[data-md-color-scheme="slate"] .edu-topics {
  background: rgba(15, 23, 42, 0.7) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.edu-topics__inner {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  height: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0;
}

/* Drop the shouting "LEARN" prefix — sidebar already shows the category */
.edu-topics__label {
  display: none;
}

.edu-topics__list {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.edu-topics__list::-webkit-scrollbar { display: none; }

.edu-topics__item { margin: 0; padding: 0; }

.edu-topics__link {
  display: inline-flex;
  align-items: center;
  height: 1.8rem;
  padding: 0 0.75rem;
  border-radius: 6px;
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--color-text-secondary) !important;
  text-decoration: none !important;
  letter-spacing: -0.005em;
  border-bottom: 0 !important;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
  white-space: nowrap;
}
.edu-topics__link:hover {
  color: var(--color-text-primary) !important;
  background: var(--color-bg-subtle);
}
.edu-topics__link.is-active {
  color: var(--color-indigo-600) !important;
  font-weight: 600;
  background: var(--color-indigo-50);
}
[data-md-color-scheme="slate"] .edu-topics__link.is-active {
  color: var(--color-indigo-500) !important;
}

/* Header gets stronger shadow once you've scrolled (Material adds md-header--shadow) */
.md-header--shadow,
.md-header--lifted {
  box-shadow:
    0 6px 12px -2px rgba(15, 23, 42, 0.06),
    0 4px 6px -1px rgba(15, 23, 42, 0.04) !important;
}

/* ===========================================================
 * 3. LEFT SIDEBAR NAVIGATION — capsule active state
 * =========================================================== */

.md-nav { font-size: 0.82rem; }

.md-nav__title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.085em;
  color: var(--color-text-tertiary);
  background: transparent !important;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
}

/* Default state */
.md-nav__link {
  position: relative;
  color: var(--color-text-secondary);
  padding: 0.42rem 0.85rem !important;
  margin: 0.08rem 0 !important;
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Hover */
.md-nav__link:hover {
  background: #F1F5F9;
  color: var(--color-text-primary);
}
[data-md-color-scheme="slate"] .md-nav__link:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

/* ACTIVE — Cyber Indigo capsule + 3px left bar */
.md-nav__item .md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  background: var(--color-indigo-50) !important;
  color: var(--color-indigo-600) !important;
  font-weight: 600;
}

.md-nav__item .md-nav__link--active::before,
.md-nav__item--active > .md-nav__link::before {
  content: "";
  position: absolute;
  left: -0.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 65%;
  background: var(--color-indigo-600);
  border-radius: 2px;
}

[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link {
  color: var(--color-indigo-500) !important;
}

/* Nested levels — softer indent */
.md-nav__item .md-nav__item .md-nav__link {
  font-size: 0.78rem;
  padding-left: 1.5rem !important;
}

/* ===========================================================
 * 4. RIGHT TOC (table of contents)
 * =========================================================== */

.md-nav--secondary .md-nav__title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-tertiary);
  border: 0;
  padding: 0 0.5rem;
  margin-bottom: 0.5rem;
}

.md-nav--secondary .md-nav__link {
  padding: 0.3rem 0.6rem !important;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  border-left: 2px solid transparent;
  border-radius: 0;
  margin: 0;
}

.md-nav--secondary .md-nav__link:hover {
  background: transparent;
  color: var(--color-indigo-600);
}

.md-nav--secondary .md-nav__link--active {
  background: transparent !important;
  color: var(--color-indigo-600) !important;
  border-left-color: var(--color-indigo-600);
  font-weight: 600;
}

.md-nav--secondary .md-nav__link--active::before { display: none; }

/* ===========================================================
 * 5. SEARCH
 * =========================================================== */

.md-search__form {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  height: 2rem;
}
.md-search__form:hover { background: var(--color-bg-subtle); }

.md-search__input {
  background: transparent !important;
  color: var(--color-text-primary);
  font-size: 0.85rem;
}
.md-search__input::placeholder { color: var(--color-text-tertiary); }
.md-search__icon[for="__search"] { color: var(--color-text-tertiary); }

/* ===========================================================
 * 6. TYPOGRAPHY (page content)
 * =========================================================== */

body, .md-typeset {
  font-family: var(--font-sans);
  font-feature-settings: "cv02","cv03","cv04","cv11","ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.md-typeset {
  font-size: 0.9375rem;
  line-height: 1.72;
  color: var(--color-text-primary);
  letter-spacing: -0.005em;
}

.md-typeset p { margin: 0.85em 0; color: var(--color-text-primary); }
.md-typeset strong { color: var(--color-text-primary); font-weight: 600; }

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.25;
}

.md-typeset h1 {
  font-size: 2.25rem;
  font-weight: 800;
  margin: 0 0 1.2em 0;
  padding: 0;
  border: 0;
  letter-spacing: -0.032em;
  line-height: 1.1;
}

.md-typeset h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2.5em 0 0.8em 0;
  padding: 0 0 0.4em 0;
  border: 0;
  border-bottom: 1px solid var(--color-border-subtle);
  letter-spacing: -0.018em;
}

.md-typeset h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 1.8em 0 0.5em 0;
  letter-spacing: -0.012em;
}

.md-typeset h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 1.4em 0 0.5em 0;
}

/* Links */
.md-typeset a {
  color: var(--color-indigo-600);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.md-typeset a:hover {
  color: var(--color-indigo-700);
  border-bottom-color: var(--color-indigo-600);
}
[data-md-color-scheme="slate"] .md-typeset a { color: var(--color-indigo-500); }
[data-md-color-scheme="slate"] .md-typeset a:hover { color: var(--color-indigo-600); }

/* Inline code */
.md-typeset p code,
.md-typeset li code,
.md-typeset td code,
.md-typeset h2 code,
.md-typeset h3 code,
.md-typeset blockquote code {
  background: var(--color-code-inline-bg);
  color: var(--color-code-inline-fg);
  font-family: var(--font-mono);
  font-size: 0.84em;
  font-weight: 500;
  padding: 0.13em 0.4em;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* ===========================================================
 * 7. TL;DR CALLOUT (the first blockquote on a page)
 * Premium lavender card with thick violet left border
 * =========================================================== */

.md-typeset blockquote {
  position: relative;
  background: var(--color-violet-50);
  border: 1px solid #EDE9FE;
  border-left: 4px solid var(--color-violet-500);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  padding: 1em 1.25em 1em 1.4em;
  margin: 1.4em 0;
  font-size: 0.95em;
  line-height: 1.65;
  box-shadow: 0 1px 0 rgba(139, 92, 246, 0.04);
}

.md-typeset blockquote p {
  margin: 0.25em 0;
  color: var(--color-text-primary);
}

.md-typeset blockquote strong:first-child {
  color: var(--color-violet-600);
  font-weight: 700;
}

[data-md-color-scheme="slate"] .md-typeset blockquote {
  background: var(--color-violet-50);
  border-color: rgba(139,92,246,0.2);
}
[data-md-color-scheme="slate"] .md-typeset blockquote strong:first-child {
  color: var(--color-violet-500);
}

/* TL;DR icon — a small ✦ before the first blockquote */
.md-typeset blockquote::before {
  content: "✦";
  position: absolute;
  top: 0.85em;
  right: 1em;
  color: var(--color-violet-500);
  font-size: 1.1em;
  opacity: 0.6;
}

/* ===========================================================
 * 8. TABLES
 * =========================================================== */

.md-typeset table:not([class]) {
  display: table;
  width: 100%;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 0.875em;
  background: var(--color-bg-content);
  box-shadow: var(--shadow-sm);
  margin: 1.6em 0;
}

.md-typeset table:not([class]) th {
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.7em 1em;
  border: 0;
  text-align: left;
}

.md-typeset table:not([class]) td {
  padding: 0.7em 1em;
  border-top: 1px solid var(--color-border-subtle);
  vertical-align: top;
  color: var(--color-text-primary);
}

.md-typeset table:not([class]) tr:nth-child(even) td { background: transparent; }
.md-typeset table:not([class]) tr:hover td { background: var(--color-bg-elevated); }

/* ===========================================================
 * 9. ADMONITIONS (note / tip / warning / etc.)
 * =========================================================== */

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--color-border-subtle);
  border-left: 3px solid var(--color-indigo-600);
  border-radius: var(--radius-md);
  background: var(--color-bg-content);
  box-shadow: var(--shadow-sm);
  margin: 1.2em 0;
}
.md-typeset .admonition-title,
.md-typeset summary {
  background: transparent;
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: 0.92em;
  padding: 0.6em 1em;
}
.md-typeset .admonition.warning,   .md-typeset details.warning { border-left-color: var(--color-amber-500); }
.md-typeset .admonition.danger,    .md-typeset details.danger  { border-left-color: var(--color-rose-500); }
.md-typeset .admonition.tip,       .md-typeset details.tip     { border-left-color: var(--color-emerald-500); }

/* ===========================================================
 * 10. FOOTER — deep slate anchor
 * =========================================================== */

.md-footer {
  background: var(--color-bg-footer) !important;
  color: var(--color-text-on-dark) !important;
  border-top: 0;
}

.md-footer__inner.md-grid:not([hidden]) {
  display: flex;
  gap: 1rem;
  padding: 1.5rem 2rem;
  max-width: 100% !important;
  background: var(--color-bg-footer);
}

.md-footer__link {
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 0.95em 1.1em;
  color: var(--color-text-on-dark) !important;
  opacity: 1;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.md-footer__link:hover {
  border-color: var(--color-indigo-500);
  background: rgba(99, 102, 241, 0.08);
  transform: translateY(-1px);
}

.md-footer__direction {
  color: var(--color-indigo-500) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68em;
  opacity: 1;
}
.md-footer__title {
  font-weight: 600;
  font-size: 0.95em;
  color: var(--color-text-on-dark) !important;
}

/* Meta strip (copyright row) */
.md-footer-meta {
  background: #020617;
  color: var(--color-text-on-dark-mute);
  font-size: 0.78rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.md-footer-meta__inner { max-width: 100%; padding: 0.9rem 2rem; }
.md-footer-copyright { color: var(--color-text-on-dark-mute); }
.md-footer-social .md-footer-social__link { color: var(--color-text-on-dark-mute); }
.md-footer-social .md-footer-social__link:hover { color: var(--color-indigo-500); }

/* ===========================================================
 * 11. HOME PAGE — Hero, sections, cards
 * =========================================================== */

.gfg-hero {
  position: relative;
  background: linear-gradient(
    180deg,
    #FFFFFF 0%,
    #FAFBFF 40%,
    #F5F3FF 100%
  );
  color: var(--color-text-primary);
  padding: 5.5em 2em 4.5em;
  border-radius: var(--radius-2xl);
  margin: 0.5em 0 3em 0;
  text-align: center;
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

[data-md-color-scheme="slate"] .gfg-hero {
  background: linear-gradient(
    180deg,
    var(--color-bg-content) 0%,
    #131A2C 60%,
    #1E1B4B 100%
  );
}

.gfg-hero::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(
    ellipse at center,
    rgba(99, 102, 241, 0.18) 0%,
    rgba(99, 102, 241, 0) 70%
  );
  pointer-events: none;
  z-index: 0;
}

.gfg-hero > * { position: relative; z-index: 1; }

.gfg-hero h1 {
  color: var(--color-text-primary) !important;
  border-bottom: 0 !important;
  margin: 0 0 0.5em 0 !important;
  padding: 0 !important;
  font-size: 2.75em !important;
  letter-spacing: -0.035em;
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(135deg, #0F172A 0%, #4F46E5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gfg-hero p {
  font-size: 1.1em;
  color: var(--color-text-secondary);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Section heading on home */
.gfg-section { margin: 3em 0 1em 0; }
.gfg-section h2 {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-tertiary);
  margin: 0 0 1.4em 0;
  padding: 0;
  border: 0;
}
.gfg-section h2::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--color-border-subtle);
}

/* Topic cards */
.gfg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.gfg-card {
  position: relative;
  background: var(--color-bg-content);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.gfg-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-indigo-600);
  box-shadow: var(--shadow-lg);
}

.gfg-card .gfg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--color-indigo-50);
  color: var(--color-indigo-600);
  font-size: 1.4em;
  margin-bottom: 0.9em;
}

.gfg-card h3 {
  margin: 0 0 0.35em !important;
  color: var(--color-text-primary) !important;
  font-size: 1.15em !important;
  font-weight: 700 !important;
  letter-spacing: -0.014em;
}

.gfg-card p {
  flex-grow: 1;
  color: var(--color-text-secondary);
  margin: 0 0 1.2em;
  font-size: 0.88em;
  line-height: 1.55;
}

.gfg-card .gfg-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--color-indigo-600);
  font-weight: 600;
  font-size: 0.85em;
  border: 0 !important;
}
.gfg-card .gfg-cta::after {
  content: "→";
  transition: transform 0.18s ease;
}
.gfg-card:hover .gfg-cta::after { transform: translateX(4px); }

/* Status chips */
.gfg-chip {
  position: absolute;
  top: 1em;
  right: 1em;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.18em 0.6em;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 2;
}
.gfg-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
}
.gfg-chip.done { background: var(--color-emerald-50); color: var(--color-emerald-500); }
.gfg-chip.done::before { background: var(--color-emerald-500); }
.gfg-chip.wip  { background: var(--color-amber-50);   color: var(--color-amber-500); }
.gfg-chip.wip::before  { background: var(--color-amber-500); }
.gfg-chip.todo { background: var(--color-bg-subtle);  color: var(--color-text-tertiary); }
.gfg-chip.todo::before { background: var(--color-text-tertiary); }

/* ===========================================================
 * 12. PAGE LEAD ILLUSTRATION (optional, see "Visual placeholders" docs)
 * =========================================================== */

.chapter-illustration {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 2em;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
}

.chapter-eyebrow {
  display: inline-block;
  background: var(--color-indigo-50);
  color: var(--color-indigo-600);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  margin-bottom: 1em;
}

/* ===========================================================
 * 13. ACCESSIBILITY + SCROLLBAR + MISC
 * =========================================================== */

*:focus-visible {
  outline: 2px solid var(--color-indigo-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border-default);
  border-radius: 5px;
  border: 2px solid var(--color-bg-content);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); }

::selection {
  background: var(--color-indigo-50);
  color: var(--color-indigo-600);
}

/* On narrower screens, content shouldn't be cramped */
@media screen and (max-width: 76.1875em) {
  .md-content__inner {
    padding: 1.5rem 1.25rem 3rem;
  }
}

/* ===========================================================
 * 14. RESIZABLE-SIDEBAR HANDLES
 * =========================================================== */

@media (min-width: 76.25em) {
  /* Both sidebars become positioning ancestors so handles can absolute-pin */
  .md-sidebar--primary, .md-sidebar--secondary {
    /* keep position: sticky from layout block, just ensure overflow visible
       so the handle nub can stick out a couple of px */
    overflow-y: auto;
    overflow-x: visible;
  }

  .edu-resize-handle {
    position: absolute;
    top: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background 0.18s ease;
  }
  .edu-resize-handle[data-side="right"] { right: -3px; }
  .edu-resize-handle[data-side="left"]  { left:  -3px; }

  .edu-resize-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 36px;
    background: var(--color-border-default);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.18s ease, background 0.18s ease, height 0.18s ease;
  }
  .edu-resize-handle:hover { background: rgba(99, 102, 241, 0.06); }
  .edu-resize-handle:hover::after {
    opacity: 1;
    background: var(--color-indigo-600);
    height: 48px;
  }

  /* Visual feedback during drag */
  body.edu-resizing {
    cursor: col-resize !important;
    user-select: none;
  }
  body.edu-resizing iframe { pointer-events: none; }
  body.edu-resizing .edu-resize-handle::after {
    opacity: 1;
    background: var(--color-indigo-600);
    height: 60px;
  }
}

/* ===========================================================
 * 15. RICH FOOTER — multi-column with brand + topics + meta
 * =========================================================== */

.edu-footer {
  background: linear-gradient(180deg, #0F172A 0%, #0B1120 100%);
  color: var(--color-text-on-dark);
  padding: 3rem 2rem 0;
}

.edu-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 2.5rem;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
@media (max-width: 76.1875em) {
  .edu-footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 30em) {
  .edu-footer__inner { grid-template-columns: 1fr; }
}

/* Brand block */
.edu-footer__brand .edu-footer__logo {
  font-size: 1.15rem;
  font-weight: 800;
  background: linear-gradient(90deg, #FFFFFF 0%, #C7D2FE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.edu-footer__brand .edu-footer__tagline {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.86rem;
  line-height: 1.6;
  margin: 0 0 1.2rem;
  max-width: 360px;
}
.edu-footer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.edu-footer__chips .edu-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0.22em 0.7em;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.edu-footer__chips .edu-chip:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.35);
  transform: translateY(-1px);
}

/* Column blocks */
.edu-footer__col h4 {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 1rem 0;
}
.edu-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.edu-footer__col li {
  margin: 0.5rem 0;
  font-size: 0.85rem;
}
.edu-footer__col a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease, padding-left 0.18s ease;
  display: inline-block;
}
.edu-footer__col a:hover {
  color: #A5B4FC;
  padding-left: 3px;
}

/* Bottom meta strip */
.edu-footer__bottom {
  background: #020617;
  margin: 0 -2rem;
  padding: 1.1rem 2rem;
}
.edu-footer__bottom-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.edu-footer__copy,
.edu-footer__meta {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.76rem;
}
.edu-footer__meta a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
}
.edu-footer__meta a:hover { color: #A5B4FC; border-bottom-color: #A5B4FC; }

/* Hide Material's default meta strip since we built our own */
.md-footer-meta { display: none; }