/*
 * TalkIDE Docs -- extra.css
 * Issue #4: theme parity with TalkIDE design system.
 *
 * Strategy: Material uses CSS custom properties on [data-md-color-scheme].
 * We override them with TalkIDE design tokens from styles.css.
 *
 * Dark scheme ("slate") = TalkIDE dark (warm charcoal, DEFAULT)
 * Light scheme ("default") = TalkIDE light (warm cream)
 *
 * Amber accent: oklch(0.78 0.15 70) dark / oklch(0.68 0.16 60) light
 * Primary text on amber: #1a1408 (dark) / #fbf6ea (light)
 */

/* ============================================================
   GOOGLE FONTS -- Inter tight tracking + JetBrains Mono
   Material loads Inter via its own font config, but we also
   import JetBrains Mono for code blocks to match the brand.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   DARK SCHEME (slate) -- TalkIDE warm charcoal
   ============================================================ */
[data-md-color-scheme="slate"] {
  /* --- Surfaces --- */
  --md-default-bg-color:        #15140f;
  --md-default-bg-color--light: #1c1a14;
  --md-default-bg-color--lighter: #25221a;
  --md-default-bg-color--lightest: #2f2b21;

  /* --- Primary text --- */
  --md-default-fg-color:              #f5efe0;
  --md-default-fg-color--light:       #c8c1ad;
  --md-default-fg-color--lighter:     #8a836f;
  --md-default-fg-color--lightest:    #5c5747;

  /* --- Primary (amber) --- */
  --md-primary-fg-color:              oklch(0.78 0.15 70);
  --md-primary-fg-color--light:       oklch(0.78 0.15 70 / 0.15);
  --md-primary-fg-color--dark:        oklch(0.68 0.17 70);
  --md-primary-bg-color:              #1a1408;
  --md-primary-bg-color--light:       oklch(0.78 0.15 70 / 0.12);

  /* --- Accent (also amber) --- */
  --md-accent-fg-color:               oklch(0.78 0.15 70);
  --md-accent-fg-color--transparent:  oklch(0.78 0.15 70 / 0.15);
  --md-accent-bg-color:               #1a1408;
  --md-accent-bg-color--light:        oklch(0.78 0.15 70 / 0.12);

  /* --- Code blocks --- */
  --md-code-bg-color:                 #1c1a14;
  --md-code-fg-color:                 #c8c1ad;

  /* --- Typeset (inline code, links) --- */
  --md-typeset-color:                 #f5efe0;
  --md-typeset-a-color:               oklch(0.78 0.15 70);
  --md-typeset-mark-color:            oklch(0.78 0.15 70 / 0.28);
  --md-typeset-kbd-color:             #25221a;
  --md-typeset-kbd-accent-color:      #f5efe0;
  --md-typeset-kbd-border-color:      rgba(255, 240, 200, 0.16);
  --md-typeset-table-color:           rgba(255, 240, 200, 0.06);
  --md-typeset-table-color--light:    rgba(255, 240, 200, 0.03);

  /* --- Admonitions: use muted oklch status palette (L~0.78 dark) --- */
  --md-admonition-bg-color:           #1c1a14;
  --md-admonition-fg-color:           #f5efe0;

  /* --- Footer --- */
  --md-footer-bg-color:               #0e0d0c;
  --md-footer-bg-color--dark:         #0e0d0c;
  --md-footer-fg-color:               #c8c1ad;
  --md-footer-fg-color--light:        #8a836f;
  --md-footer-fg-color--lighter:      #5c5747;

  /* --- Header / nav top bar (styles.css --bar-bg) --- */
  --md-header-bg-color:               rgba(21, 20, 15, 0.7);

  /* --- Shadows --- */
  --md-shadow-z1: 0 2px 8px rgba(0, 0, 0, 0.35);
  --md-shadow-z2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --md-shadow-z3: 0 8px 32px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   LIGHT SCHEME (default) -- TalkIDE warm cream
   ============================================================ */
[data-md-color-scheme="default"] {
  /* --- Surfaces --- */
  --md-default-bg-color:              #f7f1e3;
  --md-default-bg-color--light:       #fbf6ea;
  --md-default-bg-color--lighter:     #f0e9d6;
  --md-default-bg-color--lightest:    #e6dec8;

  /* --- Primary text --- */
  --md-default-fg-color:              #1f1a10;
  --md-default-fg-color--light:       #4a4232;
  --md-default-fg-color--lighter:     #7a705a;
  --md-default-fg-color--lightest:    #a89e85;

  /* --- Primary (amber, slightly deeper for light bg) --- */
  --md-primary-fg-color:              oklch(0.68 0.16 60);
  --md-primary-fg-color--light:       oklch(0.68 0.16 60 / 0.18);
  --md-primary-fg-color--dark:        oklch(0.58 0.18 60);
  --md-primary-bg-color:              #fbf6ea;
  --md-primary-bg-color--light:       oklch(0.68 0.16 60 / 0.12);

  /* --- Accent --- */
  --md-accent-fg-color:               oklch(0.68 0.16 60);
  --md-accent-fg-color--transparent:  oklch(0.68 0.16 60 / 0.18);
  --md-accent-bg-color:               #fbf6ea;
  --md-accent-bg-color--light:        oklch(0.68 0.16 60 / 0.12);

  /* --- Code blocks --- */
  --md-code-bg-color:                 #ede7d4;
  --md-code-fg-color:                 #4a4232;

  /* --- Typeset --- */
  --md-typeset-color:                 #1f1a10;
  --md-typeset-a-color:               oklch(0.58 0.18 60);
  --md-typeset-mark-color:            oklch(0.68 0.16 60 / 0.28);
  --md-typeset-kbd-color:             #f0e9d6;
  --md-typeset-kbd-accent-color:      #1f1a10;
  --md-typeset-kbd-border-color:      rgba(60, 45, 20, 0.20);
  --md-typeset-table-color:           rgba(60, 45, 20, 0.06);
  --md-typeset-table-color--light:    rgba(60, 45, 20, 0.03);

  /* --- Admonitions --- */
  --md-admonition-bg-color:           #fbf6ea;
  --md-admonition-fg-color:           #1f1a10;

  /* --- Footer --- */
  --md-footer-bg-color:               #efe8d8;
  --md-footer-bg-color--dark:         #e6dec8;
  --md-footer-fg-color:               #4a4232;
  --md-footer-fg-color--light:        #7a705a;
  --md-footer-fg-color--lighter:      #a89e85;

  /* --- Header / nav top bar (styles.css --bar-bg) --- */
  --md-header-bg-color:               rgba(247, 241, 227, 0.85);

  /* --- Shadows (warm, not blue-black) --- */
  --md-shadow-z1: 0 2px 8px rgba(60, 45, 20, 0.08);
  --md-shadow-z2: 0 4px 16px rgba(60, 45, 20, 0.12);
  --md-shadow-z3: 0 8px 32px rgba(60, 45, 20, 0.16);
}

/* ============================================================
   DESIGN TOKENS -- ported 1:1 from design_handoff/styles.css
   so component rules below can reference the same names.
   ============================================================ */
:root {
  --md-text-font: "Inter", system-ui, -apple-system, sans-serif;
  --md-code-font: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;

  --tk-font-display: "Inter", system-ui, -apple-system, sans-serif;
  --tk-font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;

  --tk-r-sm: 6px;
  --tk-r-md: 10px;
  --tk-r-lg: 14px;
  --tk-r-xl: 20px;
}

/* Dark (slate) = handoff dark token set */
[data-md-color-scheme="slate"] {
  --tk-bg-0: #0e0d0c;
  --tk-bg-1: #15140f;
  --tk-bg-2: #1c1a14;
  --tk-bg-3: #25221a;
  --tk-bg-4: #2f2b21;
  --tk-line-1: rgba(255, 240, 200, 0.06);
  --tk-line-2: rgba(255, 240, 200, 0.10);
  --tk-line-3: rgba(255, 240, 200, 0.16);
  --tk-fg-1: #f5efe0;
  --tk-fg-2: #c8c1ad;
  --tk-fg-3: #8a836f;
  --tk-fg-4: #5c5747;
  --tk-amber: oklch(0.78 0.15 70);
  --tk-amber-soft: oklch(0.78 0.15 70 / 0.15);
  --tk-amber-line: oklch(0.78 0.15 70 / 0.4);
  --tk-amber-text: oklch(0.88 0.1 70);
  --tk-primary-fg: #1a1408;
  --tk-canvas-glow-1: rgba(255, 200, 130, 0.05);
  --tk-canvas-glow-2: rgba(150, 130, 220, 0.05);
  --tk-shadow-strong: 0 30px 80px rgba(0,0,0,0.4);
}

/* Light (default) = handoff light token set */
[data-md-color-scheme="default"] {
  --tk-bg-0: #efe8d8;
  --tk-bg-1: #f7f1e3;
  --tk-bg-2: #fbf6ea;
  --tk-bg-3: #f0e9d6;
  --tk-bg-4: #e6dec8;
  --tk-line-1: rgba(60, 45, 20, 0.08);
  --tk-line-2: rgba(60, 45, 20, 0.13);
  --tk-line-3: rgba(60, 45, 20, 0.20);
  --tk-fg-1: #1f1a10;
  --tk-fg-2: #4a4232;
  --tk-fg-3: #7a705a;
  --tk-fg-4: #a89e85;
  --tk-amber: oklch(0.68 0.16 60);
  --tk-amber-soft: oklch(0.68 0.16 60 / 0.18);
  --tk-amber-line: oklch(0.68 0.16 60 / 0.5);
  --tk-amber-text: oklch(0.50 0.16 60);
  --tk-primary-fg: #fbf6ea;
  --tk-canvas-glow-1: rgba(220, 160, 80, 0.10);
  --tk-canvas-glow-2: rgba(120, 100, 200, 0.06);
  --tk-shadow-strong: 0 20px 50px rgba(60, 45, 20, 0.12), 0 4px 12px rgba(60, 45, 20, 0.06);
}

/* ============================================================
   CANVAS -- warm ambient radial glows (styles.css .canvas),
   applied to the whole document so the page reads "calm warm
   charcoal", not flat black.
   ============================================================ */
body,
.md-main,
.md-container {
  background: transparent;
}

.md-main {
  background:
    radial-gradient(1200px 700px at 80% -10%, var(--tk-canvas-glow-1), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, var(--tk-canvas-glow-2), transparent 55%),
    var(--tk-bg-1);
}

html, body { background: var(--tk-bg-1); }

/* ============================================================
   TYPOGRAPHY -- Inter, handoff scale + tight negative tracking
   ============================================================ */
/* Handoff base is html,body { font-size:14px; line-height:1.5 }.
   Material's root is 20px so every rem reads ~43% oversized (defect 3).
   Pull the whole UI/prose scale down to the handoff's 14px proportion.
   Material UI chrome (header, nav, search) reads off --md-text-font-size /
   .md-typeset font-size, so we anchor those here. */
.md-typeset {
  font-family: var(--md-text-font);
  font-size: 0.7rem;        /* ~14px against Material's 20px root */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--tk-fg-2);
}

.md-typeset p { color: var(--tk-fg-2); }

/* h1 -- hero headline. Handoff hero ~36px on a 14px base; calibrated
   to ~1.8rem against Material's 20px root (defect 3). */
.md-typeset h1 {
  font-family: var(--tk-font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-size: 1.8rem;
  color: var(--tk-fg-1);
  margin-bottom: 0.6rem;
}

.md-typeset h2 {
  font-family: var(--tk-font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-size: 1.05rem;
  color: var(--tk-fg-1);
  margin-top: 2.2rem;
}

.md-typeset h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  font-size: 0.85rem;
  color: var(--tk-fg-1);
}

.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--tk-fg-1);
}

/* The first paragraph after the page h1 = the lede, muted + larger,
   matching the handoff hero sub-copy. */
.md-typeset h1 + p {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--tk-fg-3);
  max-width: 46rem;
}

.md-typeset a {
  color: var(--tk-amber);
  text-decoration: none;
}
.md-typeset a:hover { text-decoration: underline; }

.md-typeset code,
.md-typeset pre,
.md-typeset kbd {
  font-family: var(--md-code-font);
  letter-spacing: 0;
}

/* Page eyebrow -- the mono uppercase "TALKIDE DOCUMENTATION · PREVIEW"
   label above the H1, injected before the article via ::before. */
.md-content__inner > .md-typeset:first-child > h1:first-child::before,
.md-content__inner h1:first-of-type::before {
  content: "TalkIDE documentation \00B7 preview";
  display: block;
  font-family: var(--tk-font-mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tk-fg-3);
  margin-bottom: 0.8rem;
}

/* ============================================================
   LAYOUT WIDTH & SPACING RHYTHM
   ============================================================ */
.md-grid { max-width: 68rem; }

.md-content__inner {
  margin-top: 1.4rem;
  padding-bottom: 3rem;
}
.md-content__inner::before { height: 0; }

/* ============================================================
   BREADCRUMB -- "Docs / Welcome" (navigation.path), calm mono-ish
   ============================================================ */
.md-path {
  font-size: 0.6rem;
  padding-top: 1rem;
}
.md-path__item a { color: var(--tk-fg-3); }
.md-path__item:last-child { color: var(--tk-fg-2); }

/* ============================================================
   HEADER & NAV -- glass TopBar (styles.css .bar / TopBar)
   ============================================================ */
.md-header {
  background-color: var(--md-header-bg-color);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
  border-bottom: 1px solid;
  height: 56px;
}

[data-md-color-scheme="slate"] .md-header {
  border-bottom-color: var(--tk-line-1);
}
[data-md-color-scheme="default"] .md-header {
  border-bottom-color: var(--tk-line-1);
}

/* Vertical hairline between the left sidebar and the content column
   (defect 2b) -- styles.css var(--line-1). */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    border-right: 1px solid var(--tk-line-1);
  }
}

.md-header__inner {
  min-height: 56px;
  height: 56px;
  align-items: center;
}

/* Reset Material's title/topic/ellipsis box model so the brand mark
   is vertically centered against the full header bar (defect 1).
   Material imposes its own line-height/margin/overflow that ride the
   brand up off the optical center. */
.md-header__title.tk-header__title,
.md-header__title.tk-header__title .md-header__topic,
.md-header__title.tk-header__title .md-ellipsis {
  line-height: 1;
  margin: 0;
  overflow: visible;
  height: 100%;
  font-size: inherit;
}
.md-header__title.tk-header__title {
  display: flex;
  align-items: center;
}
.tk-logo.md-logo {
  height: 100%;
}

/* Brand glyph -- styles.css .logo .glyph: 22px amber rounded square,
   mono bold "T" in --primary-fg. */
.tk-logo.md-logo {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0 0.2rem;
  padding: 0;
}
.tk-logo.md-logo img,
.tk-logo.md-logo svg { display: none; }

.tk-glyph {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--tk-amber);
  color: var(--tk-primary-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tk-font-mono);
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  /* optical nudge: mono cap sits ~0.5px low vs Inter cap-height */
  padding-bottom: 1px;
}

/* Wordmark block -- styles.css .logo: 17px Inter 600, -0.02em */
.tk-header__title {
  margin-left: 0.5rem;
  font-weight: inherit;
}
.tk-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  height: 100%;
}
.tk-wordmark {
  font-family: var(--tk-font-display);
  font-weight: 600;
  font-size: 0.85rem;     /* 17px on 20px root */
  letter-spacing: -0.02em;
  color: var(--tk-fg-1);
}
.tk-product {
  font-family: var(--tk-font-display);
  font-weight: 500;
  font-size: 0.75rem;     /* 15px */
  letter-spacing: -0.01em;
  color: var(--tk-fg-3);
}
.tk-pill {
  font-family: var(--tk-font-mono);
  font-size: 0.5rem;      /* ~11px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  color: var(--tk-amber-text);
  background: var(--tk-amber-soft);
  border: 1px solid var(--tk-amber-line);
  white-space: nowrap;
  margin-left: 0.15rem;
}

/* Header icon buttons -- calm, fg-3 -> fg-1 on hover */
.md-header__button { color: var(--tk-fg-3); }
.md-header__button:hover { color: var(--tk-fg-1); opacity: 1; }

/* "Back to TalkIDE" -- styles.css .btn.ghost: transparent, NO border,
   fg-2; hover -> bg-3 + fg-1 (defect 5). It must not read as a box. */
.tk-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 0.5rem;
  margin-right: 0.4rem;
  padding: 8px 14px;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: var(--tk-r-md);
  white-space: nowrap;
  color: var(--tk-fg-2);
  background: transparent;
  border: none;
  transition: color 0.12s, background-color 0.12s;
}
.tk-back-link:hover {
  color: var(--tk-fg-1);
  background-color: var(--tk-bg-3);
}
.tk-back-arrow { font-size: 0.9rem; }

/* Hide hamburger drawer button on desktop (sidebar always present) */
@media screen and (min-width: 76.25em) {
  .tk-drawer-btn { display: none; }
}
@media screen and (max-width: 76.1875em) {
  .tk-back-link .tk-back-text { display: none; }
  .tk-pill { display: none; }
}

/* ============================================================
   SIDEBAR -- styles.css panel + uppercase section labels +
   amber active item with left indicator marker.
   ============================================================ */
.md-sidebar--primary { background: transparent; }

[data-md-color-scheme="slate"] .md-sidebar {
  background-color: var(--tk-bg-1);
}
[data-md-color-scheme="default"] .md-sidebar {
  background-color: var(--tk-bg-1);
}

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

/* Material adds progressive padding-left per nested .md-nav level; our
   Diataxis tree is effectively flat so this drifts section labels and
   items rightward (defect 4). Neutralize the nesting indentation and
   force every level/item to one flush-left edge. */
.md-nav--primary .md-nav,
.md-nav--primary .md-nav__list,
.md-nav--primary .md-nav__item {
  padding-left: 0;
  margin-left: 0;
}
.md-nav--primary .md-nav__item .md-nav__link {
  font-size: 0.66rem;
  letter-spacing: -0.01em;
  color: var(--tk-fg-2);
  border-radius: var(--tk-r-md);
  padding: 0.34rem 0.6rem;
  margin: 0.05rem 0;
  transition: color 0.12s, background-color 0.12s;
}

.md-nav__link:hover {
  color: var(--tk-fg-1);
  background-color: var(--tk-bg-3);
}

/* Section group labels -- mono-ish uppercase, tracked, dim */
.md-nav--primary .md-nav__item--section > .md-nav__link,
.md-nav--primary .md-nav__item--section > label.md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link {
  text-transform: uppercase;
  font-family: var(--tk-font-mono);
  font-size: 0.55rem;        /* ~11px on the 20px root */
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tk-fg-3) !important;
  background: transparent !important;
  margin-top: 1.5rem;
  margin-bottom: 0.25rem;
  padding-left: 0.6rem;      /* same flush edge as items */
  padding-right: 0.6rem;
  pointer-events: none;
}
.md-nav--primary .md-nav__item--section > .md-nav__link:hover {
  background: transparent;
  color: var(--tk-fg-3);
}

/* Active leaf item -- amber text + soft amber bg + left marker */
.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link.md-nav__link--active,
.md-nav--primary .md-nav__link--active {
  color: var(--tk-amber) !important;
  font-weight: 600;
  background-color: var(--tk-amber-soft) !important;
  border-radius: var(--tk-r-md);
  position: relative;
}
.md-nav--primary .md-nav__link--active::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.28rem;
  bottom: 0.28rem;
  width: 2px;
  border-radius: 999px;
  background: var(--tk-amber);
}

/* Remove Material's default expand arrows / heavy nesting feel */
.md-nav__icon { color: var(--tk-fg-3); }

/* TOC (right sidebar) on content pages -- calm */
.md-nav--secondary .md-nav__title {
  font-family: var(--tk-font-mono);
  text-transform: uppercase;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--tk-fg-3);
}
.md-nav--secondary .md-nav__link--active { background: transparent; }
.md-nav--secondary .md-nav__link--active::before { display: none; }

/* ============================================================
   HOME HUB CARDS -- ported from styles.css .card
   (bg-2, 1px var(--line-1), radius 14px) + handoff card chrome:
   category dot, mono uppercase label, bold title, muted desc,
   amber CTA, hover -> bg-3 + line-3 + soft elevation.
   ============================================================ */
.md-typeset .grid.cards.tk-cards > ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.4rem 0 0;
}

.md-typeset .grid.cards.tk-cards > ul > li {
  margin: 0;
  background-color: var(--tk-bg-2);
  border: 1px solid var(--tk-line-1);
  border-radius: var(--tk-r-lg);
  padding: 1.25rem 1.3rem;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.md-typeset .grid.cards.tk-cards > ul > li:hover {
  background-color: var(--tk-bg-3);
  border-color: var(--tk-line-3);
  box-shadow: var(--tk-shadow-strong);
}

/* card divider (the markdown "---" -> <hr>) removed; spacing instead */
.md-typeset .grid.cards.tk-cards > ul > li > hr {
  border: 0;
  margin: 0.55rem 0;
}

/* Card header line: mono eyebrow (dot + category) ABOVE a bold title,
   matching the handoff card chrome. */
.md-typeset .grid.cards.tk-cards > ul > li > p:first-child {
  margin: 0 0 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.tk-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--tk-font-mono);
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tk-fg-3);
}

.md-typeset .grid.cards.tk-cards > ul > li > p:first-child > strong {
  font-family: var(--tk-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.025em;
  color: var(--tk-fg-1);
}

.md-typeset .grid.cards.tk-cards > ul > li p {
  color: var(--tk-fg-3);
  font-size: 0.7rem;
  line-height: 1.55;
}

/* Category dot -- styles.css accent palette */
.tk-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  margin-right: 0.55rem;
  vertical-align: middle;
  flex-shrink: 0;
}
.tk-dot--tutorial    { background: var(--tk-amber); }
.tk-dot--howto       { background: oklch(0.78 0.13 150); }
.tk-dot--reference   { background: oklch(0.72 0.13 270); }
.tk-dot--explanation { background: oklch(0.72 0.15 25); }

[data-md-color-scheme="default"] .tk-dot--howto       { background: oklch(0.6 0.15 150); }
[data-md-color-scheme="default"] .tk-dot--reference   { background: oklch(0.55 0.17 270); }
[data-md-color-scheme="default"] .tk-dot--explanation { background: oklch(0.6 0.18 25); }

/* CTA link at card bottom -- amber, arrow suffix */
.md-typeset .grid.cards.tk-cards > ul > li > p:last-child {
  margin-bottom: 0;
  margin-top: 0.9rem;
}
.md-typeset .grid.cards.tk-cards > ul > li > p:last-child > a {
  font-weight: 600;
  font-size: 0.66rem;
  color: var(--tk-amber);
}
.md-typeset .grid.cards.tk-cards > ul > li > p:last-child > a:hover {
  text-decoration: none;
  filter: brightness(1.08);
}
.md-typeset .grid.cards.tk-cards > ul > li > p:last-child > a::after {
  content: " \2192";
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .grid.cards.tk-cards > ul { grid-template-columns: 1fr; }
}

/* ============================================================
   CODE BLOCKS
   ============================================================ */
.md-typeset .highlight,
.md-typeset pre {
  border-radius: var(--tk-r-md);
  border: 1px solid var(--tk-line-2);
}
.md-typeset code {
  background-color: var(--tk-bg-2);
  border-radius: var(--tk-r-sm);
}

.md-typeset .highlight .filename {
  font-family: var(--md-code-font);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  border-radius: var(--tk-r-md) var(--tk-r-md) 0 0;
  border-bottom: 1px solid var(--tk-line-2);
  background-color: var(--tk-bg-3);
  color: var(--tk-fg-3);
}

/* ============================================================
   CONTENT TABS
   ============================================================ */
.md-typeset .tabbed-labels > label {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: var(--tk-r-sm) var(--tk-r-sm) 0 0;
  color: var(--tk-fg-3);
}
.md-typeset .tabbed-labels > label:hover { color: var(--tk-fg-2); }
.md-typeset .tabbed-labels > input:checked + label {
  color: var(--tk-amber);
  border-bottom-color: var(--tk-amber);
}
.md-typeset .tabbed-content {
  border: 1px solid var(--tk-line-2);
  border-radius: 0 0 var(--tk-r-md) var(--tk-r-md);
}

/* ============================================================
   ADMONITIONS -- muted handoff status palette, calm border-left
   ============================================================ */
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--tk-r-md);
  border: 1px solid var(--tk-line-2);
  border-left-width: 3px;
  box-shadow: none;
  font-size: 0.85rem;
  background-color: var(--tk-bg-2);
}

.md-typeset .admonition.note,
.md-typeset details.note,
.md-typeset .admonition.info,
.md-typeset .admonition.abstract,
.md-typeset .admonition.quote,
.md-typeset details.info,
.md-typeset details.abstract,
.md-typeset details.quote {
  border-left-color: oklch(0.72 0.13 270);
}
[data-md-color-scheme="slate"] .md-typeset .admonition.note > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset details.note > summary,
[data-md-color-scheme="slate"] .md-typeset .admonition.info > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .admonition.abstract > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .admonition.quote > .admonition-title {
  background-color: oklch(0.72 0.13 270 / 0.10);
  color: oklch(0.82 0.09 270);
}
[data-md-color-scheme="default"] .md-typeset .admonition.note > .admonition-title,
[data-md-color-scheme="default"] .md-typeset details.note > summary,
[data-md-color-scheme="default"] .md-typeset .admonition.info > .admonition-title,
[data-md-color-scheme="default"] .md-typeset .admonition.abstract > .admonition-title,
[data-md-color-scheme="default"] .md-typeset .admonition.quote > .admonition-title {
  background-color: oklch(0.55 0.17 270 / 0.10);
  color: oklch(0.42 0.15 270);
}

.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition.success,
.md-typeset details.success {
  border-left-color: oklch(0.78 0.13 150);
}
[data-md-color-scheme="slate"] .md-typeset .admonition.tip > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset details.tip > summary,
[data-md-color-scheme="slate"] .md-typeset .admonition.success > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset details.success > summary {
  background-color: oklch(0.78 0.13 150 / 0.10);
  color: oklch(0.85 0.10 150);
}
[data-md-color-scheme="default"] .md-typeset .admonition.tip > .admonition-title,
[data-md-color-scheme="default"] .md-typeset details.tip > summary,
[data-md-color-scheme="default"] .md-typeset .admonition.success > .admonition-title,
[data-md-color-scheme="default"] .md-typeset details.success > summary {
  background-color: oklch(0.6 0.15 150 / 0.12);
  color: oklch(0.42 0.13 150);
}

.md-typeset .admonition.warning,
.md-typeset .admonition.caution,
.md-typeset details.warning,
.md-typeset details.caution {
  border-left-color: var(--tk-amber);
}
[data-md-color-scheme="slate"] .md-typeset .admonition.warning > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .admonition.caution > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset details.warning > summary,
[data-md-color-scheme="slate"] .md-typeset details.caution > summary {
  background-color: oklch(0.78 0.15 70 / 0.12);
  color: oklch(0.88 0.12 70);
}
[data-md-color-scheme="default"] .md-typeset .admonition.warning > .admonition-title,
[data-md-color-scheme="default"] .md-typeset .admonition.caution > .admonition-title,
[data-md-color-scheme="default"] .md-typeset details.warning > summary,
[data-md-color-scheme="default"] .md-typeset details.caution > summary {
  background-color: oklch(0.68 0.16 60 / 0.14);
  color: oklch(0.50 0.16 60);
}

.md-typeset .admonition.danger,
.md-typeset .admonition.error,
.md-typeset details.danger,
.md-typeset details.error {
  border-left-color: oklch(0.72 0.15 25);
}
[data-md-color-scheme="slate"] .md-typeset .admonition.danger > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .admonition.error > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset details.danger > summary,
[data-md-color-scheme="slate"] .md-typeset details.error > summary {
  background-color: oklch(0.72 0.15 25 / 0.12);
  color: oklch(0.82 0.12 25);
}
[data-md-color-scheme="default"] .md-typeset .admonition.danger > .admonition-title,
[data-md-color-scheme="default"] .md-typeset .admonition.error > .admonition-title,
[data-md-color-scheme="default"] .md-typeset details.danger > summary,
[data-md-color-scheme="default"] .md-typeset details.error > summary {
  background-color: oklch(0.6 0.18 25 / 0.12);
  color: oklch(0.45 0.16 25);
}

/* ============================================================
   SEARCH
   ============================================================ */
.md-search__form {
  background-color: var(--tk-bg-3);
  border: 1px solid var(--tk-line-2);
  border-radius: 8px;
}
.md-search__input { color: var(--tk-fg-1); }
.md-search__input::placeholder { color: var(--tk-fg-3); }
.md-search__output {
  background-color: var(--tk-bg-2);
  border: 1px solid var(--tk-line-2);
  border-radius: var(--tk-r-md);
  box-shadow: var(--tk-shadow-strong);
}

/* ============================================================
   TABLES
   ============================================================ */
.md-typeset table:not([class]) {
  border-radius: var(--tk-r-md);
  overflow: hidden;
  font-size: 0.82rem;
  border: 1px solid var(--tk-line-2);
}
.md-typeset table:not([class]) th {
  background-color: var(--tk-bg-3);
  color: var(--tk-fg-2);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.md-typeset table:not([class]) td {
  color: var(--tk-fg-2);
  border-top: 1px solid var(--tk-line-1);
}

/* ============================================================
   SCROLLBAR & SELECTION (styles.css)
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--tk-line-2);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--tk-line-3); }

::selection {
  background: var(--tk-amber-soft);
  color: var(--tk-fg-1);
}

/* ============================================================
   FOOTER -- handoff has NO footer. Hide entirely + ensure the
   content area still scrolls to the very bottom (the leftover
   stub previously left a dead band / clipped scroll).
   ============================================================ */
.md-footer,
.md-footer-meta,
.md-footer__inner {
  display: none !important;
}

.md-main__inner { margin-bottom: 0; }
html { scroll-behavior: smooth; }
.md-container { min-height: 0; }