/* modern-docs.css — Warm Carbon Theme (Light + Dark) */

/* =================================================================
   THEME — WARM CARBON
   Brownish/dark backgrounds, warm orange accent, type-coded chips.
   Light mode is a parchment counterpart; dark mode is the canonical
   look (matches the design mockup).
   ================================================================= */

:root {
  /* Native form controls (checkbox, radio, scrollbar, etc.) follow the theme.
   * DaisyUI's stylesheet used to set this; the theme now owns it so the
   * controls don't revert to the white light-mode default. Dark mode flips
   * it in the .dark block below. */
  color-scheme: light;

  /* Layered surfaces (light) — warm porcelain. Lighter than the old beige
   * (#d8d2c5) to give text/accent contrast headroom (WCAG-checked: text-2
   * >= 4.5:1, text-3 >= 3:1, accent >= 4:1 on bg-0), while keeping the
   * warm-carbon character. Ladder direction is consistent: cards rise
   * LIGHTER than the page, insets (code, elevated chips) dip DARKER. */
  --bg-0: #ece6da;              /* Page background — warm porcelain */
  --bg-1: #f6f1e7;              /* Card background — lifted above the page */
  --bg-2: #e0d9c9;              /* Inset surface (code blocks, chips) */
  --bg-3: #d2c9b5;              /* Hover/elevated */

  --border: #d5cdbc;
  --border-strong: #b5ab97;

  /* Sidebar surface — subtly distinct from --bg-0 so the sidebar/main
   * boundary is visible even when the border is low-contrast. Light theme:
   * slightly darker than bg-0; dark theme: slightly lighter (see .dark). */
  --sidebar-bg: #e4ddcf;

  --text-0: #201c18;            /* Primary text */
  --text-1: #433c33;            /* Secondary */
  --text-2: #665e52;            /* Muted (4.5:1 on bg-0) */
  --text-3: #837a6c;            /* Most muted (3:1 on bg-0, hints + large only) */

  --accent: #9c5f0d;            /* Deep bronze (4.2:1 on bg-0; was #b8741a at 2.5:1) */
  --accent-glow: rgba(156, 95, 13, 0.16);
  --accent-2: #2d8c6e;          /* Sage green secondary */
  --danger: #b8395a;

  /* Type-coded colors used in tree icons + chips.
   * User-chosen palette: Class=Blue, Property=Red, Method=Green,
   * Enum=Cyan, Constructor=Orange. Light-mode = readable on warm cream. */
  --type-namespace: #6e675f;
  --type-class: #1f6fbf;          /* Blue */
  --type-class-bg: rgba(31, 111, 191, 0.10);
  --type-class-border: rgba(31, 111, 191, 0.30);
  --type-method: #2d8c6e;         /* Green */
  --type-method-bg: rgba(45, 140, 110, 0.10);
  --type-property: #b8395a;       /* Red */
  --type-property-bg: rgba(184, 57, 90, 0.10);
  --type-enum: #6b3fa0;           /* Purple — same family as Interface but typography (E vs I) keeps them distinct */
  --type-enum-bg: rgba(107, 63, 160, 0.10);
  --type-event: #9c5f0d;          /* Warm orange (events use the constructor color too) */
  --type-event-bg: rgba(156, 95, 13, 0.10);
  --type-constructor: #9c5f0d;    /* Orange */
  --type-constructor-bg: rgba(156, 95, 13, 0.10);
  --type-interface: #6b3fa0;      /* Purple — distinct from class */
  --type-interface-bg: rgba(107, 63, 160, 0.10);

  /* Fonts */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --font-sans: 'Geist', -apple-system, system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;

  /* Legacy aliases — keep so existing CSS doesn't all break at once. */
  --bg-color: var(--bg-0);
  --text-color: var(--text-0);
  --primary-color: var(--accent);
  --primary-hover-color: var(--accent);
  --card-bg: var(--bg-1);
  --card-border: var(--border);
  --table-bg: var(--bg-1);
  --table-header-bg: var(--bg-2);
  --table-border: var(--border);
  --table-border-radius: 0.5rem;
  --code-bg: var(--bg-2);
  --tab-bg: var(--bg-1);
  --tab-hover-bg: var(--bg-2);
  --tab-border: var(--border);
  --tab-active-bg: var(--accent);
  --tab-active-text: #fff;
  --hierarchy-link-color: var(--accent);
  --hierarchy-link-hover: var(--text-0);
  --link-color: var(--type-method);
  --link-hover-color: var(--accent);
}

/* Dark mode — the canonical look. */
.dark {
  /* Render native controls (checkboxes, radios, scrollbars) dark to match the
   * theme. Restores the dark tickbox look DaisyUI supplied before it was
   * removed; without this, accent-color only tints the checked fill while the
   * unchecked box stays white. */
  color-scheme: dark;
  --bg-0: #1a1816;
  --bg-1: #211e1c;
  --bg-2: #2a2624;
  --bg-3: #34302d;
  --border: #332e2b;
  --border-strong: #463f3a;
  /* Sidebar: slightly lighter than bg-0 to create a subtle "left rail" feel. */
  --sidebar-bg: #1e1b19;

  --text-0: #f6f3ef;
  --text-1: #d6d0c8;
  --text-2: #9c958c;
  --text-3: #6e675f;

  --accent: #ffb454;            /* Warm orange (mockup) */
  --accent-glow: rgba(255, 180, 84, 0.20);
  --accent-2: #7ad9b9;
  --danger: #ff6b8a;

  /* Dark-mode type colors:
   * Class=Blue, Property=Red, Method=Green, Enum=Cyan, Constructor=Orange.
   * Bumped lightness so they read on the warm-carbon dark surface. */
  --type-namespace: #9c958c;
  --type-class: #6ec3ff;          /* Blue */
  --type-class-bg: rgba(110, 195, 255, 0.10);
  --type-class-border: rgba(110, 195, 255, 0.30);
  --type-method: #7ad9b9;         /* Green */
  --type-method-bg: rgba(122, 217, 185, 0.10);
  --type-property: #ff6b8a;       /* Red */
  --type-property-bg: rgba(255, 107, 138, 0.10);
  --type-enum: #d99cff;           /* Purple — matches the warm-carbon dark surface */
  --type-enum-bg: rgba(217, 156, 255, 0.10);
  --type-event: #ffb454;          /* Orange (events share constructor color) */
  --type-event-bg: rgba(255, 180, 84, 0.10);
  --type-constructor: #ffb454;    /* Orange */
  --type-constructor-bg: rgba(255, 180, 84, 0.10);
  --type-interface: #d99cff;      /* Purple — distinct from class */
  --type-interface-bg: rgba(217, 156, 255, 0.10);

  /* Legacy aliases */
  --bg-color: var(--bg-0);
  --text-color: var(--text-0);
  --primary-color: var(--accent);
  --primary-hover-color: var(--accent);
  --card-bg: var(--bg-1);
  --card-border: var(--border);
  --table-bg: var(--bg-1);
  --table-header-bg: var(--bg-2);
  --table-border: var(--border);
  --code-bg: var(--bg-2);
  --tab-bg: var(--bg-1);
  --tab-hover-bg: var(--bg-2);
  --tab-border: var(--border);
  --tab-active-bg: var(--accent);
  --tab-active-text: var(--bg-0);
  --hierarchy-link-color: var(--accent);
  --hierarchy-link-hover: var(--text-0);
  --link-color: var(--type-method);
  --link-hover-color: var(--accent);
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

/* ============================= */
/* Global Resets & Body Styling */
/* ============================= */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: var(--bg-color);
}

html.dark, body.dark {
  background-color: var(--bg-color) !important;
}

body {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
}

/* Container for content */
.container {
  background-color: var(--bg-color);
  padding: 1rem;
  min-height: 100vh;
}

/* ========== Right-side "On this page" TOC ========== */
.rvt-toc {
  width: 220px;
  flex-shrink: 0;
  padding: 28px 20px 28px 8px;
  overflow-y: auto;
  font-family: var(--font-sans);
  border-left: 1px solid var(--border);
  position: relative;       /* anchors the drag handle */
  /* Smooth collapse animation. Animating width + padding lets the main
   * content column reflow once at the end (when the panel's width hits 0)
   * rather than thrashing on a single display:none toggle. */
  transition: width 0.2s ease, padding 0.2s ease, opacity 0.18s ease, border-left-width 0.2s ease;
}
.rvt-toc[hidden] { display: none; }
.rvt-toc.is-collapsed {
  width: 0 !important;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  border-left-width: 0;
  pointer-events: none;
}
.rvt-toc::-webkit-scrollbar { width: 6px; }
.rvt-toc::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.rvt-toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 4px 0 12px;
}
.rvt-toc-heading {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.rvt-toc-icon-btn {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
}
.rvt-toc-icon-btn:hover {
  color: var(--accent);
  background: var(--bg-2);
  border-color: var(--border);
}

/* Drag handle on the left edge — same UX as the sidebar's resize. */
.rvt-toc-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s;
  z-index: 5;
}
.rvt-toc-resize-handle:hover {
  background: var(--accent-glow);
}

/* Show-when-collapsed button. Floating tab pinned to the right edge of
 * the main content column. */
.rvt-toc-expand-btn {
  position: absolute;
  right: 0;
  top: 80px;
  width: 22px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  z-index: 6;
  padding: 0;
}
.rvt-toc-expand-btn:hover {
  color: var(--accent);
  background: var(--bg-2);
  border-color: var(--accent);
}
.rvt-toc-expand-btn[hidden] { display: none; }
.rvt-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid var(--border);
}
.rvt-toc-list a {
  display: block;
  padding: 5px 14px;
  font-size: 12.5px;
  color: var(--text-2);
  text-decoration: none;
  margin-left: -1px;
  border-left: 1px solid transparent;
  transition: all 0.15s;
  line-height: 1.4;
}
.rvt-toc-list a:hover { color: var(--text-0); }
.rvt-toc-list a.active {
  color: var(--accent);
  border-left-color: var(--accent);
}
.rvt-toc-list li.depth-3 a { padding-left: 24px; font-size: 11.5px; color: var(--text-3); }
/* depth-3 has higher specificity than `.active` so re-state the accent color
 * here, otherwise the active-link highlight only shows on top-level (depth-1)
 * and depth-2 entries while depth-3 stays muted. */
.rvt-toc-list li.depth-3 a.active {
  color: var(--accent);
  border-left-color: var(--accent);
}
.rvt-toc-count {
  color: var(--text-3);
  opacity: 0.6;
  font-family: var(--font-mono);
  font-size: 11px;
}
@media (max-width: 1200px) { .rvt-toc { display: none !important; } }

/* =================================================================
   Syntax / examples tab strip — warm theme override of DaisyUI's
   default blue ".tab" / ".tab-active" classes used in the syntax cards.
   ================================================================= */
.tabs > .tab,
.example-tabs > .example-tab,
.tabs .tab,
.example-tabs .example-tab {
  background: transparent;
  color: var(--text-2);
  border: 1px solid transparent;
  border-radius: 6px 6px 0 0;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.tabs > .tab:hover,
.example-tabs > .example-tab:hover,
.tabs .tab:hover,
.example-tabs .example-tab:hover {
  color: var(--text-0);
  background: var(--bg-2);
}
.tabs > .tab.tab-active,
.example-tabs > .example-tab.tab-active,
.tabs .tab-active,
.example-tabs .tab-active {
  /* Clean underline indicator — accent text + a 2px accent bottom bar,
   * NO boxed fill or light border (the old border-strong box read as a
   * stray white outline). margin-bottom:-1px laps the accent bar over
   * the .tabs container's 1px bottom rule so they read as one line. */
  color: var(--accent);
  background: transparent;
  border-color: transparent;
  border-bottom: 2px solid var(--accent);
  border-radius: 0;
  margin-bottom: -1px;
}
.tabs {
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 2px;
  margin-bottom: 0 !important;
}

/* =================================================================
   Tag pills — used in the headline card for namespace/type/related-class
   chips. Replaces the previous bg-blue-500 Tailwind badges.
   ================================================================= */
.rvt-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-1);
  text-transform: none;
}
.rvt-tag a {
  color: inherit;
  text-decoration: none;
}
.rvt-tag a:hover { color: var(--accent); }
/* Gray "Revit version" pill on the headline card. Quiet — sits left of
 * the namespace tag so the user can glance at a page and know which
 * Revit year they're looking at. Mono font + muted text so it doesn't
 * compete with the warm-orange namespace pill next to it. */
.rvt-tag-version {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
}
.rvt-tag-namespace {
  color: var(--accent);
  background: var(--accent-glow);
  border-color: var(--accent);
}
.rvt-tag-namespace a { color: var(--accent); }
.rvt-tag-type {
  color: var(--text-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Type-colored chip variants. Tokens live in :root + .dark and are the
 * same ones the sidebar's [C]/[M]/[P]/[I]/[E] icons subscribe to, so a
 * page's CLASS chip will match the color of the row in the sidebar. */
.rvt-tag-type.is-class,
.rvt-tag-type.is-structure,
.rvt-tag-type.is-delegate {
  color: var(--type-class);
  background: var(--type-class-bg);
  border-color: var(--type-class-border);
}
.rvt-tag-type.is-method,
.rvt-tag-type.is-operator {
  color: var(--type-method);
  background: var(--type-method-bg);
  border-color: var(--type-method-bg);
}
.rvt-tag-type.is-property,
.rvt-tag-type.is-field {
  color: var(--type-property);
  background: var(--type-property-bg);
  border-color: var(--type-property-bg);
}
.rvt-tag-type.is-interface,
.rvt-tag-type.is-enumeration,
.rvt-tag-type.is-enum {
  color: var(--type-interface);
  background: var(--type-interface-bg);
  border-color: var(--type-interface-bg);
}
.rvt-tag-type.is-event,
.rvt-tag-type.is-constructor {
  color: var(--type-event);
  background: var(--type-event-bg);
  border-color: var(--type-event-bg);
}
.rvt-tag-type.is-namespace,
.rvt-tag-type.is-members {
  color: var(--type-namespace);
  background: var(--bg-2);
  border-color: var(--border);
}

/* =================================================================
   Doc-page header strip — breadcrumb that sits at the top of the
   headline card (replaces the old orange Namespace:/Class: pills).
   Format: [2027 pill]  Autodesk.Revit.DB ›  Wall ›  Create
   Linked segments are muted; the current page is primary; separators
   are the most-muted tone so the eye reads the segments first.
   ================================================================= */
.card-breadcrumb-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  /* Bookmark + Changes buttons now live inside the bar, so no need to
     reserve right-edge space for an absolutely-positioned overlay. */
  padding: 9px 14px 9px 20px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  /* .card has padding:1.5rem; pull the strip flush to the card edges. */
  margin: -1.5rem -1.5rem 1rem;
  /* Match the card's outer rounding so the strip docks visually. */
  border-radius: calc(1rem - 1px) calc(1rem - 1px) 0 0;
  font-family: var(--font-sans);
  font-size: 13px;
}
.card-breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}
.crumb-link {
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.15s;
  padding: 1px 0;
}
.crumb-link:hover {
  color: var(--accent);
  text-decoration: underline;
}
.crumb-sep {
  color: var(--text-3);
  margin: 0 8px;
  font-size: 12px;
  user-select: none;
}
.crumb-current {
  color: var(--text-0);
  font-weight: 600;
}
/* Small meta-label at the end of the breadcrumb-bar showing the page kind
 * (Class / Method / Constructor / Members / ...). Stays muted + italic so
 * it reads as metadata, not as another breadcrumb segment. */
.crumb-pagetype {
  color: var(--text-3);
  font-size: 12px;
  font-style: italic;
  margin-left: 2px;
}

/* Single-letter type glyph that sits to the right of the H1 title.
 * Mirrors the sidebar's tree-icon look so the chip on the doc page
 * matches the row a user clicked in the sidebar. Subscribes to the
 * same --type-* tokens (Class blue, Method green, Property red, ...).
 * Letter color uses --bg-0 so it stays readable on the colored square
 * in both light and dark modes (inverts with the theme). */
.headline-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--bg-0);
  text-transform: uppercase;
  flex-shrink: 0;
}
.headline-type-icon.is-class,
.headline-type-icon.is-structure,
.headline-type-icon.is-delegate { background: var(--type-class); }
.headline-type-icon.is-method,
.headline-type-icon.is-operator { background: var(--type-method); }
.headline-type-icon.is-property,
.headline-type-icon.is-field { background: var(--type-property); }
.headline-type-icon.is-interface,
.headline-type-icon.is-enumeration,
.headline-type-icon.is-enum { background: var(--type-interface); }
.headline-type-icon.is-event,
.headline-type-icon.is-constructor { background: var(--type-event); }
.headline-type-icon.is-namespace { background: var(--type-namespace); }
.headline-type-icon.is-members {
  background: var(--bg-3);
  color: var(--text-1);
  border: 1px solid var(--border-strong);
}

/* =================================================================
   Content card top-bar (Syntax / Parameters / Examples / Exceptions)
   Tinted strip at the top of the card with an uppercase label.
   No 1px separator below — the bg-2 → bg-1 shift is the divider.
   Unified across every card: same size, weight, color, padding — so
   the page reads as a stack of consistent sections.
   ================================================================= */
.card-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 20px;
  background: var(--bg-2);
  border-radius: 10px 10px 0 0;
  margin: -16px -16px 14px;
  position: relative;
}
/* Short accent stripe at the left edge — matches the original member-section
 * tab indicator. Sits inside the toolbar's left padding so it doesn't push
 * the label out of alignment with the row content below (which is also at
 * 20px from the card edge). */
.card-toolbar::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--accent);
}
.card-toolbar-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}
/* Clickable toolbar variant (member sections, comments). The whole bar is
 * a button — click anywhere on the strip to collapse the body. Resets
 * native button chrome so it looks identical to the non-clickable
 * .card-toolbar above. */
button.card-toolbar {
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: inherit;
  transition: background 0.15s;
  /* NO explicit width. `.card-toolbar` is display:flex (block-level), so
   * width:auto already fills the card. An EXPLICIT width:100% would pin
   * the width to the content box and the negative side margins (the bleed)
   * would only SHIFT it left — leaving a gap on the right edge when
   * expanded. With width:auto the negative margins expand it border-to-
   * border like the non-button toolbars. */
  width: auto;
}
button.card-toolbar:hover {
  background: var(--bg-3);
}
button.card-toolbar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Toolbar variant with an action button alongside the toggle (e.g. the
 * Snippets card's "+ Share one" CTA). The toolbar div hosts TWO flex
 * children — the toggle button on the left and the action(s) on the
 * right — so clicking the action doesn't collapse the card. */
.card-toolbar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.card-toolbar-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.card-toolbar-toggle[aria-expanded="false"] .member-section-chev {
  transform: rotate(-90deg);
}

/* Vertical spacing between stacked content cards (member sections, snippets,
 * comments) when they share the same container. Tailwind's `mb-4` on each
 * card gives 1rem; bump member section cards a hair more so the colored
 * accent stripe on each clearly registers as "new card starts here". */
.member-section-card { margin-bottom: 1rem; }
.snip-doc-card { margin-bottom: 1rem; }
.cmt-card { margin-bottom: 1rem; }
/* Tighten the gap between the headline title (Wall + chip) and the first
 * body element (Description / Remarks). The global .card-title rule sets
 * 0.5rem; the title's natural line-height already provides breathing
 * room so we drop the explicit margin here. */
.headline-card .card-title {
  margin-bottom: 0;
}

/* =================================================================
   Parameters card — flat 3-column list (type | name | description).
   No nested <thead> repeating column names; the toolbar above is the
   only label. Subtle row dividers, dim description, accent on linked
   type so the eye reads down the type column to find what's clickable.

   Alignment: every section (toolbar, param-rows, return-row) bleeds to
   the card edges with `margin: 0 -16px` and uses 20px x-padding so
   their left edges all sit at the same 20px-from-card-edge position.
   ================================================================= */
/* The <ul> IS the grid container. Each <li class="param-row"> uses
 * `display: contents` so its 3 children become direct grid children of
 * the list — that way `max-content` sizes each COLUMN to its widest
 * cell across ALL rows (instead of per-row), and every parameter row
 * aligns to the same vertical column edges. */
.params-card .param-list {
  list-style: none;
  margin: 0 -16px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(140px, max-content) minmax(110px, max-content) 1fr;
  column-gap: 28px;
  align-items: baseline;
}
.params-card .param-row {
  display: contents;
}
.params-card .param-row > * {
  /* Vertical padding per cell; horizontal handled by column-gap on the
   * grid + first/last-child padding for the card-edge alignment. */
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.params-card .param-row > *:first-child { padding-left: 20px; }
.params-card .param-row > *:last-child  { padding-right: 20px; }
.params-card .param-row:last-child > * {
  border-bottom: 0;
}
.params-card .param-name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  font-style: italic;
  color: var(--text-0);
  word-break: break-word;
}
.params-card .param-type {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-1);
  word-break: break-word;
}
.params-card .param-type a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s;
}
.params-card .param-type a:hover {
  text-decoration: underline;
}
.params-card .param-desc {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}

/* Return Value row — compact one-liner: "RETURN VALUE  → Type description".
 * Sits INSIDE the Parameters card, separated by a thicker top border so
 * the eye reads it as the closing summary, not just another parameter.
 * Type link uses --type-class (blue) instead of accent (orange) so it's
 * visually distinct from the parameter-type links above — signals
 * "different kind of thing — this is what comes BACK". */
.params-card .return-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 14px 20px;
  border-top: 2px solid var(--border-strong);
  background: var(--bg-2);
  margin: 0 -16px -16px;
  border-radius: 0 0 10px 10px;
}
.params-card .return-row--solo {
  border-top: 0;
}
.params-card .return-arrow {
  color: var(--type-class);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.params-card .return-type {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--type-class);
  text-decoration: none;
}
.params-card a.return-type:hover {
  text-decoration: underline;
}
/* Inner per-type link inside a generic return type (the ElementId in
 * IList<ElementId>). Blue like the rest of the return value; underline
 * on hover so only THIS token reads as the clickable bit. */
.params-card .return-type .return-type-link {
  color: var(--type-class);
  text-decoration: none;
}
.params-card .return-type .return-type-link:hover {
  text-decoration: underline;
}
.params-card .return-desc {
  font-size: 14px;
  color: var(--text-2);
  font-family: var(--font-sans);
}
.params-card .return-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

/* On narrow screens drop to a single column so each cell stacks
 * vertically. With display:contents on .param-row, the grid layout is
 * driven by .param-list — switching IT to single-column collapses all
 * 3 cells of each row into 3 stacked rows. */
@media (max-width: 640px) {
  .params-card .param-list {
    grid-template-columns: 1fr;
  }
}

/* =================================================================
   Exceptions card — same flat-list pattern as Parameters, two columns
   (exception type | condition). Exception name uses --accent so a
   reader scans down the left column for clickable links — same eye
   path the Parameters card sets up.
   ================================================================= */
/* Same column-alignment trick as Parameters: the <ul> is the grid,
 * each <li class="exc-row"> uses display: contents so its 2 cells
 * become direct grid children — `max-content` then sizes the exception
 * column to the widest exception name across ALL rows. */
.exceptions-card .exc-list {
  list-style: none;
  margin: 0 -16px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(180px, max-content) 1fr;
  column-gap: 28px;
  align-items: baseline;
}
.exceptions-card .exc-row {
  display: contents;
}
.exceptions-card .exc-row > * {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.exceptions-card .exc-row > *:first-child { padding-left: 20px; }
.exceptions-card .exc-row > *:last-child  { padding-right: 20px; }
.exceptions-card .exc-row:last-child > * {
  border-bottom: 0;
}
.exceptions-card .exc-name {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-1);
  word-break: break-word;
}
.exceptions-card .exc-name a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s;
}
.exceptions-card .exc-name a:hover {
  text-decoration: underline;
}
.exceptions-card .exc-name strong {
  color: var(--text-0);
  font-weight: 600;
}
.exceptions-card .exc-desc {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}
/* Empty state spans both grid columns so the message centers properly
 * even with display:contents on the row. */
.exceptions-card .exc-empty {
  grid-column: 1 / -1;
  color: var(--text-2);
  font-style: italic;
}

@media (max-width: 640px) {
  .exceptions-card .exc-row {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
}

/* =================================================================
   Inheritance hierarchy — extra-grayed namespace prefix.
   The filter `gray_namespace_prefix` wraps the namespace portion of
   each fully-qualified type name in <span class="hier-ns"> so the
   simple type name reads at the regular hierarchy tone.
   ================================================================= */
.card-hierarchy .hier-ns {
  color: var(--text-3);
  opacity: 0.75;
}

/* =================================================================
   Headline card labels (Description: / Remarks: / Inheritance Hierarchy:)
   ================================================================= */
.card-label,
.card-description > strong:first-child,
.card-remarks > strong:first-child,
.card-hierarchy > strong:first-child {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 0.35rem;
}

/* =================================================================
   Member section cards — Methods/Properties/Events/etc as warm-theme
   standalone cards with title, count, and a clean table.
   ================================================================= */
/* Flow container that stacks the individual section cards. Each section
 * is its own standalone .card (with the shared .card-toolbar shell), so
 * this wrapper is just for the optional summary line above them. */
.member-sections-wrap {
  background: transparent;
  border: 0;
  padding: 0;
}
.member-sections-summary {
  padding: 14px 18px;
  margin-bottom: 1rem;
  font-size: 13.5px;
  color: var(--text-2);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
}
/* Each section uses the standard .card.p-4.mb-4 + .card-toolbar pattern
 * for visual parity with Parameters / Examples / Exceptions. The toolbar
 * IS a <button> for the collapse interaction (see button.card-toolbar
 * rules above). overflow:visible keeps the inheritance-filter dropdown
 * usable when the section only has a few rows. */
.member-section-card {
  overflow: visible;
}
/* Collapsed-state look — applies to ANY .card whose toolbar is collapsed,
 * not just member sections. When the body is hidden, the card collapses
 * to just the toolbar pill: card padding goes to 0 and the toolbar fills
 * the card naturally. Rounded on all corners. Handles both direct-child
 * toolbars (most cards) AND grandchild toolbars (.cmt-card wraps a
 * <section> around its toolbar). */
.card:has(.card-toolbar[aria-expanded="false"]) {
  padding: 0;
}
.card .card-toolbar[aria-expanded="false"] {
  margin: 0;
  border-radius: calc(1rem - 1px);
}
/* Open state: thin divider under the toolbar so the body sits flush. */
.member-section-card .card-toolbar[aria-expanded="true"] {
  border-bottom: 1px solid var(--border);
}
/* Chevron rotates when collapsed */
.member-section-card .card-toolbar[aria-expanded="false"] .member-section-chev,
.member-section-card .card-toolbar.collapsed .member-section-chev {
  transform: rotate(-90deg);
}
.member-section-chev {
  color: var(--text-3);
  transition: transform 0.18s ease, color 0.15s;
  flex-shrink: 0;
}
.member-section-card .card-toolbar:hover .member-section-chev {
  color: var(--accent);
}
.member-section-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 12px;
}
/* Count now lives next to the section title inside the toolbar label —
 * "METHODS (79 members)". Reads as metadata (smaller, muted, no
 * letter-spacing) so it doesn't compete with the uppercase title. */
.member-section-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: 0.02em;
  margin-left: 6px;
}

/* Discussion card body needs internal padding for the composer + comment
 * list — the .cmt-section reset wiped its own 24px padding when the card
 * wrapper took over. Restore that breathing room on the body element so
 * the composer + comment cards aren't flush against the card frame. */
.cmt-card .cmt-body {
  padding: 16px 20px 20px;
}

/* Community snippets body — same fix as comments: the .member-section-body
 * class (re-used for the collapse hook) bleeds to card edges with no
 * padding, so the snippet grid needs its own internal padding. */
.snip-doc-card .snip-doc-body {
  padding: 16px 20px 20px;
}

.member-section-meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.member-section-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

.member-section-body {
  /* No own padding — the body BLEEDS to the card edges (margin: 0 -16px)
   * so the filter toolbar and table look INTEGRATED into the card chrome
   * instead of nested as a second card. Each child block manages its own
   * padding (toolbar = padded; table cells = padded). */
  padding: 0;
  margin: 0 -16px -16px;
  background: var(--bg-1);
  min-width: 0;
  /* overflow MUST stay visible — the inheritance-filter dropdown opens
   * downward out of the toolbar and would get clipped if this scrolled.
   * Horizontal table scroll lives on .member-table-scroll instead. */
  overflow: visible;
  border-radius: 0 0 calc(1rem - 1px) calc(1rem - 1px);
}
.member-section-body.hidden { display: none; }
/* min-height ONLY on real member-section cards — keeps room for the
 * "Show members from" filter dropdown when filtering hides most rows.
 * Snippets + comments REUSE .member-section-body purely for the collapse
 * hook, so they must NOT inherit the 220px floor (it created a big empty
 * gap under the empty-comments / empty-snippets state). */
.member-section-card .member-section-body {
  min-height: 220px;
}
/* Horizontal scroll wrapper around just the table — lets wide tables
 * scroll sideways WITHOUT the parent body clipping the filter dropdown
 * (overflow on one axis forces the other to auto, clipping the menu). */
.member-table-scroll {
  overflow-x: auto;
  min-width: 0;
}

.member-section-search {
  width: 100%;
  height: 32px;
  margin-bottom: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-0);
  outline: none;
  transition: border-color 0.15s;
}
.member-section-search::placeholder { color: var(--text-3); }
.member-section-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.member-section-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  /* table-layout:fixed forces columns to honor their declared widths
   * instead of growing to fit content — keeps the table within the
   * body's width when descriptions are long. Cells wrap via word-break
   * (defined further down on `.member-section-table tbody td`). */
  table-layout: fixed;
}
.member-section-table thead th {
  text-align: left;
  /* 20px x-padding matches the .card-toolbar above and the param-row
   * pattern — every left edge inside the card sits at the same column. */
  padding: 10px 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* No background — the thead is just label text + a hairline divider.
   * Without this, the thead read as a second nested "card header" inside
   * the section card. */
  background: transparent;
  border-bottom: 1px solid var(--border);
}
/* Name column now hosts the type-icon glyph inline. Bump min-width a bit
 * since the icon (16px) + 8px gap eats into the label width. */
.member-section-table .th-name  { width: 26%; min-width: 200px; }
.member-section-table .th-rt    { width: 16%; min-width: 120px; }
.member-section-table .th-desc  { color: var(--text-3); }
/* Inherited From: snug column — inherited-from values are short class
 * names (Element, Object, HostObject), so a tight width avoids the big
 * empty gap a wide column left. `nowrap` keeps the name on one line; the
 * ellipsis covers the rare longer ancestor name. */
.member-section-table .th-inh   { width: 120px; }
.member-section-table .td-inh {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Icon glyph + name flow INLINE inside the Name cell (not flex) so a long
 * method signature like `Create(Document, IList<Curve>, Boolean)` wraps
 * naturally as text instead of getting pushed into a broken second flex
 * line. The icon is an inline-grid box vertically aligned to the text. */
.member-section-table .td-name .type-icon {
  display: inline-grid;
  vertical-align: -3px;
  margin-right: 9px;
}
/* The parenthetical parameter list reads as a quieter, smaller suffix so
 * the method NAME stands out. _member_section.html wraps the `(...)` part
 * in `.member-name-params` via the split_method_signature filter. */
.member-name-params {
  color: var(--text-3);
  font-size: 0.92em;
  font-weight: 400;
}

.member-section-table tbody td {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.5;
  color: var(--text-1);
  /* Wrap long content inside the cell instead of pushing the column wider
   * (which used to overflow into the right-side TOC panel). Pairs with
   * `table-layout: fixed` on the table itself. */
  word-break: break-word;
  overflow-wrap: break-word;
}
.member-section-table tbody tr:last-child td { border-bottom: 0; }
.member-section-table tbody tr:hover td { background: var(--bg-2); }
.member-section-table .td-icon { padding-right: 0; padding-left: 20px; }
/* Return type wraps (no nowrap) so long generics like IList<ElementId>
 * stay inside the column instead of overflowing the cell border. */
.member-section-table .td-rt   { white-space: normal; }
/* Description column reads as supporting copy (same muted treatment as the
 * Description / Remarks body in the headline card). */
.member-section-table .td-desc { color: var(--text-2); }

/* Toolbar above the table — search input on the left, inheritance filter
 * button on the right. */
.member-section-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  /* The body now bleeds to the card edges (padding: 0), so the toolbar
   * carries its OWN x-padding to match the table cells below (20px from
   * the card edge). */
  padding: 12px 20px;
  margin-bottom: 0;
  position: relative;
}
.member-section-toolbar .namespace-search-input {
  flex: 1;
  min-width: 0;
}

/* Inheritance filter button + dropdown */
.member-inh-filter { position: relative; flex-shrink: 0; }
.member-inh-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.member-inh-filter-toggle:hover {
  color: var(--text-0);
  background: var(--bg-3);
  border-color: var(--border-strong);
}
.member-inh-filter-toggle[aria-expanded="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow);
}
.member-inh-filter-label { color: inherit; }

.member-inh-filter-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.member-inh-filter-menu[hidden] { display: none; }
.member-inh-filter-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 6px 8px;
}
.member-inh-filter-heading {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}
.member-inh-filter-reset {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
}
.member-inh-filter-reset:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow);
}
.member-inh-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-1);
  transition: background 0.12s;
}
.member-inh-filter-row:hover { background: var(--bg-2); color: var(--text-0); }
.member-inh-filter-row input[type="checkbox"] {
  flex-shrink: 0;
  margin: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}
.member-inh-filter-row > span:first-of-type {
  flex: 1 1 auto;
  text-align: left;
}
.member-inh-filter-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

/* Member name link styling — own class is bright accent, inherited is muted. */
.member-name-link {
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 500;
  border-bottom: 1px dotted transparent;
  transition: all 0.15s;
}
/* :visited pinned to the same color so links to ALREADY-VISITED targets
 * (notably the EXTERNAL learn.microsoft.com links for Object-inherited
 * members like Equals / ToString) don't drift lighter than the internal
 * Element/HostObject links. !important wins over any UA/global `a` rule. */
.member-name-link.is-own,
.member-name-link.is-own:visited {
  color: var(--text-0) !important;
}
.member-name-link.is-own:hover {
  color: var(--accent) !important;
  border-bottom-color: var(--accent);
}
.member-name-link.is-inherited,
.member-name-link.is-inherited:visited {
  color: var(--text-3) !important;
}
.member-name-link.is-inherited:hover {
  color: var(--text-1) !important;
}

.member-inherited-link {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  text-decoration: none;
}
.member-inherited-link:hover {
  color: var(--accent);
}

/* Member-table return-type column — quieter "ghost" chip. Just monospace
 * text in the muted-secondary color, with a 1px subtle border so it still
 * reads as a typed value. Hover lifts to accent for clickable links. */
.member-return-cell { white-space: nowrap; }
/* Return type — quiet dark-grey "ghost" badge: mono text in the muted
 * tone with a subtle 1px border so it reads as a typed value. Wraps
 * (white-space: normal) so long generics like IList<ElementId> stay
 * inside the cell instead of overflowing the border. The inner type
 * link (Curve in IList<Curve>) is a subtle brighter-grey that lifts to
 * accent on hover — NOT a bold orange link. */
.member-ret-type {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 6px;
  display: inline-block;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}
.member-ret-type .return-type-link {
  color: var(--text-1);
  text-decoration: none;
  transition: color 0.12s;
}
.member-ret-type .return-type-link:hover {
  color: var(--accent);
}
/* Legacy whole-type link path (simple types with a resolvable URL). */
.member-ret-type-link { text-decoration: none; }
.member-ret-type-link:hover .member-ret-type {
  color: var(--accent);
  border-color: var(--accent);
}
.member-ret-none {
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: italic;
  color: var(--text-3);
}

/* ============================= */
/* Reusable Card Component */
/* ============================= */
.card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  /* A wide <pre> code block (white-space: pre, long lines) can push the
   * card's intrinsic width past the pane; the pane has overflow-x: hidden
   * so it clips the card's right edge AND the toolbar's bled rounded
   * corner — the "expanded card breaks on the right" bug. Capping the
   * card at its container width forces wide code to scroll inside its own
   * <pre>/scroll-wrapper instead of stretching the card. min-width:0 lets
   * the card shrink below content width inside any flex ancestor. */
  max-width: 100%;
  min-width: 0;
  /* DaisyUI's .card used to provide this flex-column layout. Without it the
   * .card-toolbar <button> reverts to a form control's shrink-to-fit width
   * (content-width) instead of stretching full-width as a flex item.
   * Restored here after DaisyUI was removed. */
  display: flex;
  flex-direction: column;
}
/* Belt-and-suspenders: the scrollable container is the code block itself
 * (or the member-table-scroll wrapper) — never the card or its toolbar. */
.card pre,
.card .member-table-scroll {
  max-width: 100%;
}
/* Collapse-body wrappers for the code cards must not let their wide <pre>
 * children expand the card; the <pre> scrolls horizontally on its own. */
.card > [id^="syntax-body-"],
.card > [id^="examples-body-"] {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

/* Card Title (very big class name) */
.card-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

/* Card Description / Remarks: keep the label (the leading <strong>) at full
 * primary text color, but make the BODY copy noticeably more muted so it
 * reads as supporting content rather than competing with code/types. */
.card-description {
  font-size: 1rem;
  margin-bottom: 0.75rem;
  color: var(--text-2);
  line-height: 1.6;
}
.card-remarks {
  font-size: 1rem;
  margin-bottom: 0.75rem;
  color: var(--text-2);
  line-height: 1.6;
}
.card-description > strong:first-child,
.card-remarks > strong:first-child {
  color: var(--accent);
}
.card-description a,
.card-remarks a {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
}
.card-description a:hover,
.card-remarks a:hover { color: var(--accent); }

/* Namespace styling (hyperlink above the card) */
.card-namespace {
  font-size: 0.875rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Inheritance hierarchy column.
 * Strategy: don't stretch — sit at the top of the row. Bound the inner
 * panel's height with max-height so short hierarchies render at their
 * natural size; long ones cap at ~24rem and scroll. This avoids tying the
 * panel to the (often shorter) left column via flex stretch tricks.
 */
.hierarchy-col {
  align-self: flex-start;
}
.hierarchy-col .card-hierarchy {
  max-height: 24rem;
  overflow-y: auto;
}
.card-hierarchy {
  overflow-y: auto;
  background-color: var(--table-bg);
  padding: 0.5rem;
  border: 1px solid var(--card-border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  margin-top: 1rem;
}

/* ============================= */
/* Tables, Code Blocks, Links, Buttons */
/* ============================= */

/* Table styling */
table {
  background-color: var(--table-bg);
  color: var(--text-color);
  border-collapse: collapse;
  width: 100%;
  border-radius: var(--table-border-radius);
  overflow: hidden;
}

table th {
  background-color: var(--table-header-bg);
  padding: 0.75rem;
  border: 1px solid var(--table-border);
  color: var(--text-color);
}

table td {
  padding: 0.75rem;
  border: 1px solid var(--table-border);
  color: var(--text-color);
}

/* Code blocks & inline code */
pre, code {
  background-color: var(--code-bg) !important;
  color: var(--text-color) !important;
  border-radius: 0.5rem;
  font-family: 'Fira Code', monospace;
  overflow-x: auto;
  padding: 0;
  margin: 0;
}

/* Link styling */
a {
  color: var(--link-color);
  text-decoration: underline;
}

a:hover {
  color: var(--link-hover-color);
}

/* DaisyUI Button Overrides */
.btn {
  color: var(--text-color) !important;
  background-color: var(--card-bg) !important;
  border: 1px solid var(--primary-color) !important;
}

.btn:hover, .btn:focus {
  filter: brightness(1.05);
  border-color: var(--primary-color);
}

/* Ensure that any .card element using the flex-card class displays as a horizontal flex container */
.flex-card {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1rem !important;
  padding: 1rem !important;
}

/* Optional: Override global link styling for our custom links */
.custom-link, .badge a {
  color: #ffffff;  /* White text for links inside badges */
  text-decoration: none;
}

.badge a:hover {
  color: #f0f0f0;
}

.custom-link:hover, .badge a:hover {
  color: #f0f0f0;  /* Slightly lighter on hover */
}

/* Force the tabs container to only be as wide as its content */
.tabs {
  display: inline-flex !important;
  gap: 0.25rem; /* Adjust gap between tabs if desired */
}

/* Force each tab to size automatically based on its content */
.tabs .tab {
  flex: 0 0 auto !important;
  width: auto !important;
  text-align: center; /* Optional: center the tab text */
}

.tabs .tab:hover {
  background-color: var(--tab-hover-bg);
}

/* Legacy bare `.tab-active` — kept in sync with the underline style above
 * (was a solid accent-fill pill, which clashed with the modern tabs). */
.tab-active {
  background-color: transparent;
  color: var(--accent);
  border-color: transparent;
  border-bottom: 2px solid var(--accent);
}

/* Hide elements with this class */
.hidden {
  display: none !important;
}

/* Optional: override global link styling for the temporary hyperlink */
a.text-blue-500 {
  color: var(--primary-color);
}

/* Responsive card override to force two-column layout on medium+ screens */
.responsive-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem;
}

@media (min-width: 768px) {
  .responsive-card {
    flex-direction: row !important;
  }
}

/* Ensure the search input uses the light theme colors */
.namespace-search-input {
  background-color: var(--card-bg); /* use the card background color (light) */
  color: var(--text-color);         /* dark text */
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Hierarchy links */
/* Hierarchy text: most entries are muted gray, the .selflink (current page)
 * gets bold + bright for prominence. Plain text nodes (System.Object etc.)
 * are also grayed to keep the visual focus on the current class.
 */
.card-hierarchy a {
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: all 0.15s;
}
.card-hierarchy a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.card-hierarchy .selflink {
  color: var(--text-0);
  font-weight: 600;
}
.card-hierarchy .nolink,
.card-hierarchy {
  color: var(--text-3);
}

.card-hierarchy .selflink {
  font-weight: bold;
}

/* Make sure the badge element is positioned relatively */
.inactive-badge {
  position: relative;
}

/* Create a pseudo-element to simulate a semi-transparent background */
.inactive-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0.5; /* Adjust the opacity as needed */
  z-index: -1;
}

/* Add bookmark button styling */
.add-bookmark-btn {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-color);
  margin-right: 0.5rem;
}

.add-bookmark-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--primary-color);
}

.dark .add-bookmark-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Bookmark button in the "bookmarked" state */
.add-bookmark-btn.active {
  color: var(--primary-color);
}

/* Search button styling */
.search-button {
    border-color: var(--card-border) !important;
    color: var(--text-color) !important;
    transition: background-color 0.2s ease;
}

.search-button:hover {
    background-color: var(--tab-hover-bg) !important;
    color: var(--text-color) !important;
}

.search-button kbd {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--card-border) !important;
}

/* Collapsible section buttons */
button[data-collapse-target] {
  background-color: var(--table-header-bg) !important;
  color: var(--text-color) !important;
}

button[data-collapse-target]:hover {
  background-color: var(--tab-hover-bg) !important;
}




/* Add to static/css/modern-docs.css */

/* Container for namespace and bookmark button */
.namespace-bookmark-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Improved bookmark button styling */
.add-bookmark-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color);
    flex-shrink: 0;
}

/* Active bookmark state - filled */
.add-bookmark-btn.active svg {
    fill: var(--primary-color);
    stroke: var(--primary-color);
}

/* Empty state - just outline */
.add-bookmark-btn:not(.active) svg {
    fill: none;
    stroke: currentColor;
}

/* Hover state */
.add-bookmark-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--primary-color);
}

.dark .add-bookmark-btn {
    background-color: rgba(255, 255, 255, 0.1);
}

.dark .add-bookmark-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.dark .search-button {
    border-color: var(--card-border) !important;
    color: var(--text-color) !important;
}

.dark .search-button:hover {
    background-color: var(--tab-hover-bg) !important;
    color: var(--text-color) !important;
}

.dark .search-button kbd {
    background-color: var(--code-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--card-border) !important;
}


.doc-link {
  color: var(--link-color);
  text-decoration: none;
}

.doc-link:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}


/* Ensure the container div also has rounded corners that match */
.card .mb-4.border.border-gray-200.rounded {
  border-radius: 0.5rem !important; /* Match parent container's radius */
  overflow: hidden; /* Ensure content doesn't overflow rounded corners */
}






/* WhatsNew page specific styles */
.card-header {
    cursor: pointer;
    transition: background-color 0.3s;
}

.card-header:hover {
    background-color: var(--tab-hover-bg);
}

/* Table styling inside WhatsNew pages */
.card-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.card-content th,
.card-content td {
    padding: 0.6rem;
    border: 1px solid var(--table-border);
    text-align: left;
}

.card-content th {
    background-color: var(--table-header-bg);
    font-weight: 600;
}

/* Fix for code/pre in WhatsNew */
.card-content pre,
.card-content code {
    white-space: pre-wrap;
    word-break: break-word;
    background-color: var(--code-bg);
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
}

/* WhatsNew TOC styles */
#whatsnew-toc ul {
    list-style-type: none;
    padding-left: 0;
}

#whatsnew-toc li {
    margin-bottom: 0.5rem;
}

#whatsnew-toc a {
    display: block;
    padding: 0.375rem 0.75rem;
    color: var(--text-color);
    text-decoration: none;
    border-radius: 0.25rem;
    transition: background-color 0.2s, color 0.2s;
}

#whatsnew-toc a:hover {
    background-color: var(--tab-hover-bg);
    color: var(--primary-color);
}

/* Nested levels in TOC */
#whatsnew-toc li li {
    margin-left: 1rem;
    font-size: 0.9rem;
}

#whatsnew-toc li li li {
    margin-left: 2rem;
    font-size: 0.85rem;
}

/* Enhanced WhatsNew page styles for bullet points */
.card-content ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.card-content ul li {
    margin-bottom: 0.5rem;
}

/* Ensure all content is hidden when collapsed */
.card-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

/* Special section highlights for code-style headings */
.card-content .code,
.card-content span.code {
    display: inline-block;
    font-family: 'Fira Code', monospace;
    font-style: italic;
    background-color: rgba(59, 130, 246, 0.1);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    margin: 0.5rem 0;
    color: var(--primary-color);
}

/* Enhanced underlined headers */
.card-content strong u {
    border-bottom: 2px solid var(--primary-color);
    text-decoration: none;
    font-size: 18px;
}

.border-t h2 {
    border-bottom: 2px solid var(--primary-color);
    text-decoration: none;
    font-size: 22px;
    font-weight: 700;
}

.whatsnew-page h3 {
    font-size: 16px;
}

.card-content.expanded {
    opacity: 1;
    max-height: 9999px; /* Use a large value to accommodate any content size */
}

/* Create a wrapper for the content inside card-content */
.card-content-inner {
    transition: transform 0.3s ease-out;
    transform: translateY(-10px);
}

.card-content.expanded .card-content-inner {
    transform: translateY(0);
}

/* =================================================================
   Obsolete styling
   - .obsolete-banner: red card shown above the Syntax block when an API
     member has [ObsoleteAttribute(...)]. Carries the deprecation message.
   - .obsolete-badge: small red pill injected into member-table descriptions
     that start with "Obsolete." (the namespace_listing parser tags those).
   ================================================================= */
.obsolete-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px 0;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--danger);
  background: rgba(184, 57, 90, 0.10);
  color: var(--text-0);
  font-family: var(--font-sans);
}
.dark .obsolete-banner {
  background: rgba(255, 107, 138, 0.10);
  border-color: var(--danger);
}
.obsolete-banner-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--danger);
  color: var(--bg-0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  margin-top: 1px;
}
.obsolete-banner-body { flex: 1 1 auto; min-width: 0; }
.obsolete-banner-title {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--danger);
  margin-right: 8px;
}
.obsolete-banner-message {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-1);
}

.obsolete-badge {
  display: inline-block;
  padding: 1px 7px;
  margin-right: 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--danger);
  background: rgba(184, 57, 90, 0.12);
  border: 1px solid rgba(184, 57, 90, 0.35);
}
.dark .obsolete-badge {
  background: rgba(255, 107, 138, 0.12);
  border-color: rgba(255, 107, 138, 0.35);
}

/* Tint the entire row when a member is marked obsolete (description starts
   with the OBSOLETE pill) — subtle red wash so it's noticeable without
   being garish. */
.namespace-table-row.is-obsolete td {
  background: rgba(184, 57, 90, 0.04);
}
.dark .namespace-table-row.is-obsolete td {
  background: rgba(255, 107, 138, 0.05);
}

/* =================================================================
   404 page. Particle "404" headline, subtitle, and (when the page
   exists in other versions) a row of version jump-buttons. Used by
   app_docs/404.html.
   ================================================================= */
.rvt-404-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  min-height: 100%;
}
.rvt-404-card {
  width: 100%;
  /* Wide enough to fit all 8 shipped Revit versions (2020-2027) on a single
   * row of version-jump buttons, with breathing room. Add another year to
   * the catalog and you'll need to bump this. */
  max-width: 920px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 36px 32px 36px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.rvt-404-card::before {
  /* warm accent bar on top */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
}
.rvt-404-particle {
  margin: 0 auto 8px auto;
  display: flex;
  justify-content: center;
}
.rvt-404-explain {
  margin: 0 0 22px 0;
  color: var(--text-1);
  font-size: 14.5px;
  line-height: 1.6;
}
.rvt-404-pageid,
.rvt-404-version {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--accent);
}
.rvt-404-alt {
  margin: 0 0 24px 0;
}
.rvt-404-alt-label {
  margin: 0 0 10px 0;
  color: var(--text-2);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.rvt-404-alt-versions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.rvt-404-version-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-2);
  color: var(--text-0);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.rvt-404-version-btn:hover {
  background: var(--bg-3);
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.rvt-404-version-btn-year {
  letter-spacing: 0.01em;
}
.rvt-404-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.rvt-404-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-2);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  cursor: pointer;
}
.rvt-404-btn:hover {
  background: var(--bg-3);
  color: var(--text-0);
  border-color: var(--accent);
}
.rvt-404-btn-primary {
  background: var(--accent);
  color: var(--bg-0);
  border-color: var(--accent);
}
.rvt-404-btn-primary:hover {
  background: var(--accent);
  color: var(--bg-0);
  filter: brightness(1.08);
}

/* =================================================================
   Extras pages (What's New, migration guides). The body HTML comes from
   Autodesk's CHM and uses their class names (titleTable / collapsibleSection
   / span.code / etc.). These rules adopt that markup into the warm-carbon
   theme: readable text colors, subheadings that look like h2/h3, inline
   `<span class="code">` rendered like inline code.
   ================================================================= */
.extras-card {
  /* Outer card already provides .card chrome; bound the inner width and clip
   * any rogue children that the CHM source emits wider than expected.
   *
   * Important: force display:block !important so the inherited
   * .responsive-card flex layout (used by the headline card for its
   * hierarchy column) doesn't put the H1 in a separate column with a giant
   * void on the left. The title must stack ABOVE the body. */
  overflow: hidden;
  max-width: 100%;
  display: block !important;
  flex-direction: column !important;
}
.extras-card > * {
  /* Explicitly stretch each direct child to full width so any leftover flex
   * rules from `.card` don't shrink them. */
  width: 100%;
  max-width: 100%;
}
.extras-title {
  font-size: 38px;
  font-weight: 700;
  color: var(--text-0);
  margin: 0 0 20px 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  letter-spacing: -0.015em;
  line-height: 1.15;
  display: block;            /* sits as its own block above the body */
  width: 100%;
  clear: both;               /* anything floated below won't pull up next to it */
}
.extras-title-version {
  /* Inline continuation of the parent .extras-title — no badge styling.
   * The span exists only so app_tabs/js/tabs.js can shorten the tab title
   * to "What's New" (the first text node). Visually it should read as one
   * continuous heading. */
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
/* Make sure the body content starts cleanly below the title, never floats
 * up beside it. CHM source occasionally emits floated table chrome. */
.extras-content {
  clear: both;
  display: block;
}
.extras-content {
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Hard-bound every descendant to the card width so wide tables / preformatted
 * blocks from the CHM can't push the card sideways. */
.extras-content,
.extras-content * {
  max-width: 100%;
  box-sizing: border-box;
}
.extras-content pre,
.extras-content code {
  white-space: pre-wrap;
  word-break: break-word;
}
/* Wide tables — keep them inside the card by allowing horizontal scroll
 * within the table itself. */
.extras-content table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
.extras-content .pageHeader,
.extras-content .pageBody > .topicContent > .titleTable,
.extras-content #userDataCache,
.extras-content .pageFooter,
.extras-content .feedbackLink {
  display: none;          /* Autodesk-specific chrome we don't need */
}
.extras-content p {
  margin: 0 0 12px 0;
  color: var(--text-1);
}
.extras-content ul {
  margin: 0 0 14px 0;
  padding-left: 22px;
  /* Tailwind's preflight nukes default list bullets; restore them. */
  list-style: disc outside;
}
.extras-content ul ul {
  list-style: circle outside;
  margin-top: 4px;
}
.extras-content li {
  margin: 4px 0;
  color: var(--text-1);
  display: list-item;        /* defensive — Tailwind sometimes hides it */
}
.extras-content li::marker {
  color: var(--accent);
}
.extras-content li > p {
  margin: 0;
}
/* Autodesk wraps subsection headings as <strong><u>Heading</u></strong> —
 * promote them visually into h3 territory with a warm accent tint. */
.extras-content strong > u {
  display: inline-block;
  margin-top: 14px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--accent);
  text-decoration: none;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* Inline code spans — Autodesk uses <span class="code"><em>Type</em></span>
 * for type/class names. Render as monospace pill. */
.extras-content span.code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--text-0);
  white-space: nowrap;
}
.extras-content span.code em {
  font-style: normal;
  color: inherit;
}
/* Auto-linked types from _enrich_extras_html — accent color so they read
 * as clickable. */
.extras-content a.extras-typelink {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s, color 0.15s;
}
.extras-content a.extras-typelink:hover {
  border-bottom-color: var(--accent);
}
/* External / regular anchors */
.extras-content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
}
.extras-content a:hover {
  text-decoration-color: var(--accent);
}
/* Pre-2025 What's New uses plain <h1> headings (no collapsibleAreaRegion).
 * The JS wraps the body of each section in a <div class="extras-h1-section">
 * and adds .extras-h1-collapsable on the heading; clicking toggles
 * .is-collapsed on both. Style mirrors the 2025+ collapsibleRegionTitle so
 * the visual reads consistently across versions. */
.extras-content h1.extras-h1-collapsable {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-top: 56px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--accent);
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  transition: opacity 0.15s;
}
.extras-content h1.extras-h1-collapsable::before {
  content: "▾";
  display: inline-block;
  font-size: 12px;
  color: var(--accent);
  transition: transform 0.18s ease;
}
.extras-content h1.extras-h1-collapsable.is-collapsed::before {
  transform: rotate(-90deg);
}
.extras-content h1.extras-h1-collapsable:hover { opacity: 0.85; }
.extras-content .extras-h1-section { display: block; }
.extras-content .extras-h1-section.is-collapsed { display: none; }

/* Collapsible sections — render as titled blocks. The original CHM JS
 * toggles aren't loaded; we attach our own click handler in
 * init_dynamic_components.js. Headers get an orange accent. */
.extras-content .collapsibleAreaRegion {
  margin-top: 56px;
  cursor: pointer;
  user-select: none;
}
.extras-content .collapsibleRegionTitle {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--accent);
  cursor: pointer;
  transition: opacity 0.15s;
}
.extras-content .collapsibleRegionTitle::before {
  content: "▾";
  display: inline-block;
  font-size: 16px;
  color: var(--accent);
  transition: transform 0.18s ease;
}
.extras-content .collapsibleAreaRegion.is-collapsed .collapsibleRegionTitle::before {
  transform: rotate(-90deg);
}
.extras-content .collapsibleAreaRegion:hover .collapsibleRegionTitle {
  opacity: 0.85;
}
.extras-content .collapsibleSection {
  display: block !important;
  margin-bottom: 8px;
}
.extras-content .collapsibleAreaRegion.is-collapsed + .collapsibleSection,
.extras-content .collapsibleAreaRegion.is-collapsed ~ .collapsibleSection:first-of-type {
  display: none !important;
}

/* 2025+ subsection markers: <strong><u>...</u></strong> (or that pattern
 * wrapped in a <p>) inside .collapsibleSection. The JS adds
 * .extras-sub-collapsable on the marker and wraps the following siblings in
 * a <div class="extras-sub-section">; clicking the marker toggles
 * .is-collapsed on both. Style mirrors collapsibleRegionTitle one tier down:
 * smaller, lighter accent line. */
.extras-content .extras-sub-collapsable {
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  margin-top: 18px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-0);
  transition: opacity 0.15s, color 0.15s;
}
.extras-content .extras-sub-collapsable::before {
  content: "▾";
  display: inline-block;
  font-size: 11px;
  color: var(--accent);
  transition: transform 0.18s ease;
}
.extras-content .extras-sub-collapsable.is-collapsed::before {
  transform: rotate(-90deg);
}
.extras-content .extras-sub-collapsable:hover {
  opacity: 0.85;
  color: var(--accent);
}
.extras-content .extras-sub-collapsable u {
  /* Override the global `.extras-content strong > u` accent treatment when
   * the marker is wrapped as a sub-collapsable. Sub-section markers like
   * "Annotations API Additions" should read as plain white text so they
   * differentiate from the orange top-level section headers
   * ("API Changes", "API Additions"). */
  text-decoration: none;
  color: var(--text-0);
  border-bottom-color: transparent;
  margin-top: 0;
  padding-bottom: 0;
}
.extras-content .extras-sub-section { display: block; }
.extras-content .extras-sub-section.is-collapsed { display: none; }

/* Pre-2025 h2 sub-sections inside an .extras-h1-section wrapper. JS adds
 * .extras-h2-collapsable on the heading and wraps following siblings in
 * .extras-h2-section; clicking toggles .is-collapsed on both. */
.extras-content h2.extras-h2-collapsable {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  margin-top: 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-0);
  transition: opacity 0.15s, color 0.15s;
}
.extras-content h2.extras-h2-collapsable::before {
  content: "▾";
  display: inline-block;
  font-size: 11px;
  color: var(--accent);
  transition: transform 0.18s ease;
}
.extras-content h2.extras-h2-collapsable.is-collapsed::before {
  transform: rotate(-90deg);
}
.extras-content h2.extras-h2-collapsable:hover {
  opacity: 0.85;
  color: var(--accent);
}
.extras-content .extras-h2-section { display: block; }
.extras-content .extras-h2-section.is-collapsed { display: none; }
/* Tables (parameter lists, change tables) */
.extras-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.extras-content th {
  text-align: left;
  padding: 8px 12px;
  background: var(--bg-3);
  color: var(--text-0);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}
.extras-content td {
  padding: 8px 12px;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
  font-size: 13.5px;
}
.extras-content tr:last-child td { border-bottom: 0; }
/* Headings that may appear directly in the body. Use the warm accent so
 * they read as section markers, not body copy. */
.extras-content h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 16px 0;
}
.extras-content h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  margin: 24px 0 10px 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.extras-content h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  margin: 18px 0 8px 0;
}

/* =================================================================
   What's New companion video — click-to-play facade.
   Only the YouTube thumbnail loads up front; initWhatsNewVideo()
   swaps in the youtube.com iframe on click. The container holds a
   fixed 16:9 box so layout never shifts when the iframe mounts.
   Play-button visuals mirror the RV-006 lesson card (pulsing accent
   ring + gradient orange disc + depth gradient).
   ================================================================= */
.wn-video {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  margin: 0 0 24px 0;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: border-color 280ms ease, box-shadow 320ms ease;
}
.wn-video:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 18px 40px rgba(0, 0, 0, 0.3);
}
.wn-video-facade {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: #000;
}
.wn-video-thumb {
  display: block;
  width: 100%;
  height: 100%;
  /* hqdefault is 4:3 with letterbox bars; cover crops them to a clean 16:9. */
  object-fit: cover;
  transition: transform 320ms ease, filter 320ms ease;
}
.wn-video-facade:hover .wn-video-thumb,
.wn-video-facade:focus-visible .wn-video-thumb {
  transform: scale(1.04);
  filter: brightness(1.05);
}
/* Depth gradient: darkens the top + bottom edges so the play button and
   badge stay legible over any thumbnail. */
.wn-video-grad {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0.55) 100%);
}
.wn-video-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  pointer-events: none;
}
.wn-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  pointer-events: none;
}
.wn-video-play-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent-glow);
  animation: wn-play-pulse 3s ease-in-out infinite;
}
.wn-video-play-disc {
  position: absolute;
  inset: 7px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #1a0f06;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.18),
    0 10px 22px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wn-video-facade:hover .wn-video-play-disc,
.wn-video-facade:focus-visible .wn-video-play-disc {
  transform: scale(1.08);
}
.wn-video-play-icon { margin-left: 2px; }
@keyframes wn-play-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.18); opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .wn-video-play-ring { animation: none; }
}
.wn-video-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =================================================================
   Obsolete-removal toggles inside the What's New "Obsolete API
   removals" list. Each removed item becomes a click-to-expand button
   revealing the prior year's deprecation message. Reads as plain list
   text with a small chevron; no card chrome so it stays seamless.
   ================================================================= */
.wnp-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  cursor: pointer;
  display: inline;
  text-align: left;
}
.wnp-toggle:hover { color: var(--accent); }
.wnp-toggle:hover .wnp-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.wnp-toggle[aria-expanded="true"] { color: var(--accent); }
.wnp-name { font-weight: inherit; }
.wnp-chev {
  display: inline-block;
  font-size: 0.7em;
  line-height: 1;
  margin-left: 0.25rem;
  color: var(--text-3);
  transition: transform 120ms ease;
}
.wnp-toggle[aria-expanded="true"] .wnp-chev {
  transform: rotate(180deg);
  color: var(--accent);
}
.wnp-detail {
  display: block;
  margin: 0.3rem 0 0.55rem 0.6rem;
  padding: 0.1rem 0 0.1rem 0.7rem;
  border-left: 2px solid var(--border);
  font-family: var(--font-sans, system-ui);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-2);
}
.wnp-detail[hidden] { display: none; }
.wnp-detail-inner { display: block; }
.wnp-detail-meta {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  color: var(--text-3);
  margin-bottom: 0.25rem;
  letter-spacing: 0.02em;
}
.wnp-detail-msg {
  display: block;
  color: var(--text-2);
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* =================================================================
   Anchors inside the Syntax code block — type names like Document /
   ElementId / FilteredElementCollector are wrapped by the parser so the
   reader can click through. Make them visibly clickable: accent color,
   underline on hover. Override hljs's color-on-token rules with
   !important so the link reads as a link regardless of theme.
   ================================================================= */
.code-snippet a,
pre code a {
  color: var(--accent) !important;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color 0.15s, color 0.15s, filter 0.15s;
  cursor: pointer;
}
.code-snippet a:hover,
pre code a:hover {
  border-bottom-color: var(--accent);
  filter: brightness(1.1);
}
/* hljs paints a span around tokens after we hand it pre>code. Make sure
 * the anchor text stays accent even when hljs colored its child span. */
.code-snippet a > span,
pre code a > span,
.code-snippet a span.identifier,
pre code a span.identifier {
  color: inherit !important;
}

/* =================================================================
   Parser-rendered syntax-block classes.
   The CHM parser emits its own <span class="keyword|identifier|parameter|nolink">
   wrappers, then the syntax card's <code class="hljs ..."> stops hljs from
   re-processing the block (which would destroy the type-name anchors).
   Without hljs running, these classes need their OWN coloring — mirrors
   the github-dark hljs palette so the look matches example blocks.
   ================================================================= */
pre code .keyword            { color: #d73a49; }         /* red — public/static/bool */
pre code .identifier         { color: #6f42c1; }         /* purple — method names */
pre code .parameter          { color: var(--text-2); }   /* muted — parameter names */
pre code .nolink             { color: #005cc5; }         /* blue — built-in types (bool, IList) */
.dark pre code .keyword      { color: #ff7b72; }
.dark pre code .identifier   { color: #d2a8ff; }
.dark pre code .parameter    { color: var(--text-1); }
.dark pre code .nolink       { color: #79c0ff; }

/* =================================================================
   Headline-card bookmark button — top-right corner of the page header
   card. Click to toggle this page in the sidebar's Bookmarks tab
   (localStorage shared between the two surfaces).
   ================================================================= */
.headline-card { position: relative; }
.bookmark-button {
  /* In-flow inside the .card-breadcrumb-bar (used to be absolutely
     positioned over the card). Slightly smaller to feel proportionate
     to the strip; uses --bg-1 so it lifts off the bar's --bg-2 fill. */
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.bookmark-button:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow);
  transform: translateY(-1px);
}
.bookmark-button:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.bookmark-button.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow);
}
.bookmark-button.is-active:hover {
  /* hover on an already-bookmarked card hints at "click to remove" */
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(184, 57, 90, 0.10);
}

/* =================================================================
   Home page — minimal hero + three compact info cards + disclaimer.
   Goal: make it instantly clear this is the Revit API documentation,
   without overwhelming first-time visitors with options.
   ================================================================= */
.rvt-home {
  max-width: 920px;
  margin: 0 auto;
  padding: 56px 24px 32px 24px;
  font-family: var(--font-sans);
}
.rvt-home-hero {
  text-align: center;
  margin-bottom: 36px;
}
.rvt-home-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 38px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.rvt-home-mark-bracket {
  color: var(--text-3);
  font-weight: 400;
  animation: rvt-home-bracket-pulse 2.4s ease-in-out infinite;
}
.rvt-home-mark-bracket:last-child { animation-delay: 1.2s; }
.rvt-home-mark-letter {
  background: linear-gradient(135deg, var(--accent) 0%, #d68a30 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px var(--accent-glow);
}
@keyframes rvt-home-bracket-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
.rvt-home-title {
  font-family: var(--font-sans);
  font-size: 38px;
  font-weight: 800;
  color: var(--text-0);
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.rvt-home-title-tld {
  color: var(--text-3);
  font-weight: 400;
}
.rvt-home-subtitle {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--text-2);
  margin: 0 0 26px 0;
  line-height: 1.55;
}
.rvt-home-subtitle-extra {
  display: block;
  color: var(--text-3);
  font-size: 13.5px;
  margin-top: 2px;
}

/* Terminal-style typing animation strip — sets the tone without taking
 * up the page. Mono font + accent prompt + blinking cursor. */
.rvt-home-terminal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 28px auto;
  padding: 12px 16px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--accent-glow);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-0);
  min-width: min(560px, 92vw);
  max-width: 92vw;
  text-align: left;
  overflow: hidden;
}
.rvt-home-terminal-prompt {
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}
.rvt-home-terminal-line {
  flex: 1;
  white-space: pre;
  overflow: hidden;
  text-overflow: clip;
}
.rvt-home-typed { color: var(--text-0); }
.rvt-home-cursor {
  display: inline-block;
  margin-left: 1px;
  color: var(--accent);
  animation: rvt-home-cursor-blink 1s steps(1) infinite;
}
@keyframes rvt-home-cursor-blink {
  50% { opacity: 0; }
}

.rvt-home-cta-row {
  /* Block-level so the CTA sits BELOW the typing animation, not flowing
   * onto the same baseline (the previous inline-flex put the button to
   * the right of the terminal, which read as a sidecar). */
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.rvt-home-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--bg-0);
  border: 0;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.rvt-home-cta-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.rvt-home-cta-kbd {
  display: inline-flex;
  gap: 2px;
  margin-left: 6px;
}
.rvt-home-cta-kbd kbd {
  display: inline-block;
  padding: 0 4px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--bg-0);
}
.rvt-home-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}
.rvt-home-cta-secondary:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow);
}

/* Top contributors widget on the home page. Compact horizontal list, link
   to the full leaderboard at the right. Renders only when at least one
   user has earned XP in the 30d window so the home page never shows an
   empty box. Top-3 rows get the trophy-medal rank chip in markup. */
.rvt-home-board {
  max-width: 760px;
  margin: 0 auto 28px auto;
  padding: 14px 18px 16px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.rvt-home-board-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.rvt-home-board-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
  margin: 0;
}
.rvt-home-board-window {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
}
.rvt-home-board-more {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent);
  text-decoration: none;
}
.rvt-home-board-more:hover { text-decoration: underline; }
.rvt-home-board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rvt-home-board-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 120ms ease;
}
.rvt-home-board-row:hover { background: var(--bg-2); }
.rvt-home-board-rank {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-3);
  text-align: center;
}
.rvt-home-board-row[data-rank="1"] .rvt-home-board-rank,
.rvt-home-board-row[data-rank="2"] .rvt-home-board-rank,
.rvt-home-board-row[data-rank="3"] .rvt-home-board-rank {
  font-size: 16px;
}
.rvt-home-board-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text-1);
  min-width: 0;
}
.rvt-home-board-avatar {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-3);
}
.rvt-home-board-avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-0);
}
.rvt-home-board-name {
  font-weight: 600;
  color: var(--text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rvt-home-board-handle {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
}
.rvt-home-board-xp {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

/* Tier chip-set rendered inline by `{% tier_chips_for user %}`. Sits
   next to a user's @handle on every byline so power users get visible
   credit. Up to 4 chips (one per track), color tinted by tier. */
.rvt-tier-chips {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  margin-left: 6px;
}
.rvt-tier-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  background: var(--bg-2);
  border: 1.5px solid var(--tier-color, var(--border-strong));
  cursor: default;
  user-select: none;
}
.rvt-tier-chip--platinum { box-shadow: 0 0 6px rgba(179, 212, 245, 0.5); }

/* Three side-by-side info cards (compact). */
.rvt-home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0 auto 28px auto;
  max-width: 760px;
}
.rvt-home-card {
  position: relative;
  display: block;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-1);
  text-decoration: none;
  transition: all 0.15s;
}
.rvt-home-card:hover {
  background: var(--bg-2);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.rvt-home-card-icon {
  display: inline-block;
  font-size: 20px;
  margin-bottom: 6px;
}
.rvt-home-card-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-0);
  margin: 0 0 4px 0;
}
.rvt-home-card-text {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
}
.rvt-home-card-arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--text-3);
  font-size: 14px;
  transition: color 0.15s, transform 0.15s;
}
.rvt-home-card:hover .rvt-home-card-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

/* Disclaimer — small, muted, kept on the home page per request. */
.rvt-home-disclaimer {
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 16px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-3);
  text-align: center;
}
.rvt-home-disclaimer strong {
  color: var(--text-2);
}

/* =================================================================
   Per-version landing page (/2027/, /2026/, ...). Compact hero + a
   short list of "extras" (What's New, migration guides) + at-a-glance
   stats + a tiny tips strip. Lives at .rvt-vhome-* — kept distinct
   from .rvt-home-* (the site root) so design tweaks don't cross-leak.
   ================================================================= */
.rvt-vhome {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 20px 24px;
}

.rvt-vhome-hero {
  text-align: center;
  margin-bottom: 36px;
}
/* Brand mark above the hero — same look as the topbar logo (R-square + RVT
 * Docs.com text) so the version landing reads as "RVTDocs.com" first, then
 * the particle-painted "Revit API <year>" title below. Centered + nudged
 * up slightly larger than the topbar instance. */
.rvt-vhome-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.rvt-vhome-brand-logo {
  font-size: 17px;
  gap: 12px;
}
.rvt-vhome-brand-logo .rvt-logo-mark {
  width: 32px;
  height: 32px;
  font-size: 16px;
  border-radius: 8px;
}
/* The particle title carries its own typography via .rvt-pt-domain — no
 * .rvt-vhome-title rule needed any more. We only need to space it from the
 * subtitle below. */
.rvt-pt-domain { margin-bottom: 10px; }
.rvt-vhome-subtitle {
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--text-2);
  margin: 0 auto 22px;
  max-width: 560px;
  line-height: 1.55;
}

.rvt-vhome-cta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.rvt-vhome-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--bg-0);
  border: 0;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.rvt-vhome-cta-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.rvt-vhome-cta-kbd {
  display: inline-flex;
  gap: 2px;
  margin-left: 6px;
}
.rvt-vhome-cta-kbd kbd {
  display: inline-block;
  padding: 0 4px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--bg-0);
}
.rvt-vhome-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}
.rvt-vhome-cta-secondary:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow);
}

.rvt-vhome-section {
  margin: 0 0 32px 0;
}
.rvt-vhome-section-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-0);
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}
.rvt-vhome-section-sub {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-3);
  margin: 0 0 14px 0;
  max-width: 760px;
}

/* "At a glance" stat tiles. Two rows:
 *   .rvt-vhome-stats--headline   → Total + New/Removed/Obsolete (bigger numbers)
 *   .rvt-vhome-stats--breakdown  → per-type counts (smaller, denser grid)
 * Tone modifiers --new / --removed / --obsolete tint the count colour
 * subtly using the same palette the version tabs already use for
 * same/changed/missing status dots. */
.rvt-vhome-stats {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.rvt-vhome-stats--headline {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.rvt-vhome-stats--breakdown {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  margin-top: 4px;
}
.rvt-vhome-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.rvt-vhome-stat:hover {
  border-color: var(--border-strong);
  background: var(--bg-2);
}
.rvt-vhome-stat--compact {
  padding: 8px 12px;
}
.rvt-vhome-stat-count {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -0.02em;
  line-height: 1;
}
.rvt-vhome-stat--compact .rvt-vhome-stat-count {
  font-size: 16px;
}
.rvt-vhome-stat-label {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 4px;
}
.rvt-vhome-stat--compact .rvt-vhome-stat-label {
  font-size: 10.5px;
}

/* Tone tints — subtle, count colour only. Borders nudged to match so the
 * tile reads as "this is a different kind of number" without shouting.
 *   * New      → blue   (matches the sidebar's tree-new-star marker)
 *   * Obsolete → red    (matches the sidebar's tree-obsolete-star marker)
 *   * Removed  → muted  (informational only, no click action) */
.rvt-vhome-stat--new .rvt-vhome-stat-count       { color: var(--type-class); }
.rvt-vhome-stat--new                             { border-color: rgba(96, 145, 206, 0.4); }
.rvt-vhome-stat--new .rvt-vhome-stat-symbol      { color: var(--type-class); }
.rvt-vhome-stat--obsolete .rvt-vhome-stat-count  { color: #c46577; }
.rvt-vhome-stat--obsolete                        { border-color: rgba(197, 74, 100, 0.4); }
.rvt-vhome-stat--obsolete .rvt-vhome-stat-symbol { color: #c46577; }
.rvt-vhome-stat--removed .rvt-vhome-stat-count   { color: var(--text-3); }
.rvt-vhome-stat--removed                         { border-color: var(--border); opacity: 0.85; }

/* Small star symbol used by the clickable diff tiles (New, Obsolete).
 * Mirrors the .tree-new-star + .tree-obsolete-star markers in the sidebar
 * so users have one consistent visual language for "this is changed". */
.rvt-vhome-stat-symbol {
  position: absolute;
  top: 8px;
  right: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}

/* Clickable tiles (type breakdown + headline diffs) — pointer cursor and
 * a brighter hover. Active state uses the accent border + a subtle glow so
 * users can see at a glance which filter is on. */
.rvt-vhome-stat--clickable {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.rvt-vhome-stat--clickable:hover {
  border-color: var(--accent);
  background: var(--bg-2);
}
.rvt-vhome-stat--clickable.is-active {
  border-color: var(--accent);
  background: var(--accent-glow);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.rvt-vhome-stat--clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Others tile + hover popover. The tile shows a small "i" hint in the
 * top-right corner; the popover is absolute-positioned and revealed on
 * hover/focus. Mouse can travel onto the popover (no gap) before it
 * dismisses, so the user can read it without flicker. */
.rvt-vhome-stat--others {
  position: relative;
  cursor: help;
}
.rvt-vhome-others-hint {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  color: var(--text-3);
  background: var(--bg-1);
  transition: color 0.15s, border-color 0.15s;
}
.rvt-vhome-stat--others:hover .rvt-vhome-others-hint,
.rvt-vhome-stat--others:focus-within .rvt-vhome-others-hint {
  color: var(--accent);
  border-color: var(--accent);
}
.rvt-vhome-others-pop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 200px;
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
/* Invisible bridge that fills the visual gap between the tile and the
 * popover, so the mouse can travel across without losing :hover. Without
 * this, slow hovers dismiss the popover before the user reaches it. */
.rvt-vhome-others-pop::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}
.rvt-vhome-stat--others:hover .rvt-vhome-others-pop,
.rvt-vhome-stat--others:focus-within .rvt-vhome-others-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.rvt-vhome-others-pop-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.rvt-vhome-others-pop-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rvt-vhome-others-pop-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 6px;
  margin: 0 -6px;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-1);
}
.rvt-vhome-others-pop-item--clickable {
  cursor: pointer;
  user-select: none;
}
.rvt-vhome-others-pop-item--clickable:hover {
  background: var(--bg-2);
  color: var(--accent);
}
.rvt-vhome-others-pop-item--clickable:hover .rvt-vhome-others-pop-label,
.rvt-vhome-others-pop-item--clickable:hover .rvt-vhome-others-pop-count {
  color: var(--accent);
}
.rvt-vhome-others-pop-item--clickable.is-active {
  background: var(--accent-glow);
}
.rvt-vhome-others-pop-item--clickable.is-active .rvt-vhome-others-pop-label,
.rvt-vhome-others-pop-item--clickable.is-active .rvt-vhome-others-pop-count {
  color: var(--accent);
}
.rvt-vhome-others-pop-label {
  color: var(--text-2);
}
.rvt-vhome-others-pop-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-0);
}

/* Tips strip — three short rows with a key chip on the left. */
.rvt-vhome-tips {
  margin: 0 0 12px 0;
}
.rvt-vhome-tip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rvt-vhome-tip-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
}
.rvt-vhome-tip-key {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 84px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-1);
  font-weight: 600;
}
.rvt-vhome-tip-key kbd,
.rvt-vhome-tip-list li kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 1px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-0);
}

@media (max-width: 640px) {
  .rvt-vhome { padding: 22px 14px 18px; }
  .rvt-vhome-brand-logo { font-size: 15px; }
  .rvt-vhome-brand-logo .rvt-logo-mark { width: 28px; height: 28px; font-size: 14px; }
}

/* =================================================================
   Footer — warm carbon, sits below the main content + right-side TOC.
   ================================================================= */
.rvt-footer {
  width: 100%;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  padding: 6px 20px 8px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-sans);
}
.rvt-footer-line {
  font-size: 11px;
  color: var(--text-2);
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.rvt-footer-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  margin: 0 1px;
  transition: color 0.15s, text-decoration-color 0.15s;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
}
.rvt-footer-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
  filter: brightness(1.08);
}
.rvt-footer-disclaimer {
  margin: 2px 0 0 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-3);
  /* Single line on wide-enough viewports — the disclaimer fits comfortably
   * at 10px without wrapping "Inc." onto the next line. On narrow viewports
   * (phones) we let it wrap rather than ellipsise. */
  max-width: 100%;
  white-space: normal;
}
@media (min-width: 900px) {
  .rvt-footer-disclaimer { white-space: nowrap; }
}

/* =================================================================
   Sidebar bottom Extras section — "What's New", migration guides, etc.
   Appears below the navigation tree on the Navigation pane. Each link is
   colored with the accent so it stands out from the tree above.
   ================================================================= */
/* Sidebar footer block — sits OUTSIDE .sidebar-content (the scroll
 * container) so it's pinned to the bottom of the sidebar at all times,
 * regardless of how deep the user is scrolled into the tree.
 * Intentionally minimal — no icons, no heading, no chunky hover states —
 * because this is a tucked-away utility, not a CTA. */
.sidebar-extras {
  flex-shrink: 0;
  padding: 6px 8px 8px 8px;
  background: var(--sidebar-bg);
  border-top: 1px solid var(--border);
}
.sidebar-extras[hidden] { display: none; }
.sidebar-extras-link {
  display: block;
  padding: 3px 6px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-2);
  text-decoration: none;
  border-radius: 3px;
  transition: color 0.12s;
}
.sidebar-extras-link:hover { color: var(--accent); }
.sidebar-extras-link.active { color: var(--accent); }
/* The permanent "How to use sidebar search" link — sits below the dynamic
 * (year-specific) extras with a subtle divider so it reads as meta info,
 * not another doc page. */
.sidebar-extras-link--meta {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  color: var(--text-3);
  font-style: italic;
}


/* User-defined type identifiers in highlighted code blocks. hljs C# does
 * not tag Revit / .NET PascalCase classes, so a JS post-processor in
 * init_dynamic_components.js wraps them in `.hljs-rvt-type`. Colored a
 * dim warm-brown that fits the carbon palette without competing with
 * the accent orange used for keywords / call-outs. */
.hljs-rvt-type {
  color: #8b6346;
  font-weight: 500;
}
.dark .hljs-rvt-type {
  color: #b89472;
}

/* ---------------------------------------------------------------------------
   RV-007 Overloads tree — rendered in the headline card's right column using the
   .card-hierarchy box + label + .selflink styling (shared with Inheritance Hierarchy).
   These rules only add the per-line tree layout (the box/label/link/selflink styling
   is inherited from .card-hierarchy above).
   --------------------------------------------------------------------------- */
.overloads-tree {
  margin-top: 0.15rem;
}
.ovl-line {
  line-height: 1.7;
  white-space: nowrap;
}
.ovl-child {
  padding-left: 0.5rem;
}
.ovl-branch {
  color: var(--text-3);
  opacity: 0.7;
}