@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Brand accent */
  --primary: #1B5FD9;
  --primary-hover: #14459C;
  --primary-light: #EAF0FC;

  /* Surfaces */
  --bg: #FFFFFF;
  --bg-alt: #F8F7F4;
  --bg-sidebar: #F8F7F4;
  --bg-card: #FFFFFF;
  --table-head-bg: #F7F5F2;
  --hover-surface: #EEECE7;

  /* Borders */
  --border: #E8E5E0;
  --border-light: #EAE7E2;
  --border-table-row: #F1EEE9;
  --border-nav-guide: #E4E1DB;

  /* Text */
  --text: #1A1A19;
  --text-heading-alt: #2B2823;
  --text-body: #3D3A34;
  --text-lead: #5C574F;
  --text-muted: #6E6960;
  --text-muted-link: #6B6660;
  --text-label: #8C877F;
  --text-label-alt: #9C968D;
  --text-faint: #A8A29A;

  /* Callout tint (info/blue is the only callout family in the reference —
     warning/tip keep their own hue but reuse the same shape) */
  --callout-info-bg: #F6F9FE;
  --callout-info-border: #E2E9F7;
  --callout-warning-bg: #FBF3EA;
  --callout-warning-border: #F0E0CC;
  --callout-tip-bg: #EFF7F1;
  --callout-tip-border: #D9EBDD;

  --success: #1F8A4C;
  --warning: #B25000;
  --danger: #D70015;
  --purple: #8944AB;
  --badge-admin-bg: rgba(215,0,21,0.08);
  --badge-all-bg: rgba(31,138,76,0.1);

  /* Code */
  --code-bg: #1C1B19;
  --code-bar-bg: #232220;
  --code-bar-border: #302E2B;
  --code-text: #E6E2DA;
  --inline-code-bg: #F1EEE9;
  --inline-code-text: #1A1A19;

  --wordmark-sub: #8A9A8E;

  --header-h: 48px;
  --sidebar-width: 248px;
  --toc-width: 200px;

  --radius: 8px;
  --radius-sm: 5px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --focus-ring: 0 0 0 4px rgba(27,95,217,0.18);

  --font-head: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #5B9BFF;
    --primary-hover: #8AB8FF;
    --primary-light: rgba(91,155,255,0.14);
    --bg: #171614;
    --bg-alt: #201F1C;
    --bg-sidebar: #171614;
    --bg-card: #201F1C;
    --table-head-bg: #201F1C;
    --hover-surface: #2A2925;
    --border: #33322D;
    --border-light: #2B2A26;
    --border-table-row: #262521;
    --border-nav-guide: #33322D;
    --text: #F0EEE9;
    --text-heading-alt: #EDEAE3;
    --text-body: #D8D4CB;
    --text-lead: #B7B1A5;
    --text-muted: #A39C8F;
    --text-muted-link: #A39C8F;
    --text-label: #8C8578;
    --text-label-alt: #8C8578;
    --text-faint: #7A7466;
    --callout-info-bg: rgba(91,155,255,0.08);
    --callout-info-border: rgba(91,155,255,0.28);
    --callout-warning-bg: rgba(255,159,10,0.08);
    --callout-warning-border: rgba(255,159,10,0.28);
    --callout-tip-bg: rgba(50,215,75,0.07);
    --callout-tip-border: rgba(50,215,75,0.25);
    --success: #3ECB70;
    --warning: #FF9F0A;
    --danger: #FF453A;
    --badge-admin-bg: rgba(255,69,58,0.14);
    --badge-all-bg: rgba(62,203,112,0.14);
    --code-bg: #0F0F0E;
    --code-bar-bg: #171614;
    --code-bar-border: #2B2A26;
    --code-text: #E6E2DA;
    --inline-code-bg: #2A2925;
    --inline-code-text: #F0EEE9;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --primary: #5B9BFF;
  --primary-hover: #8AB8FF;
  --primary-light: rgba(91,155,255,0.14);
  --bg: #171614;
  --bg-alt: #201F1C;
  --bg-sidebar: #171614;
  --bg-card: #201F1C;
  --table-head-bg: #201F1C;
  --hover-surface: #2A2925;
  --border: #33322D;
  --border-light: #2B2A26;
  --border-table-row: #262521;
  --border-nav-guide: #33322D;
  --text: #F0EEE9;
  --text-heading-alt: #EDEAE3;
  --text-body: #D8D4CB;
  --text-lead: #B7B1A5;
  --text-muted: #A39C8F;
  --text-muted-link: #A39C8F;
  --text-label: #8C8578;
  --text-label-alt: #8C8578;
  --text-faint: #7A7466;
  --callout-info-bg: rgba(91,155,255,0.08);
  --callout-info-border: rgba(91,155,255,0.28);
  --callout-warning-bg: rgba(255,159,10,0.08);
  --callout-warning-border: rgba(255,159,10,0.28);
  --callout-tip-bg: rgba(50,215,75,0.07);
  --callout-tip-border: rgba(50,215,75,0.25);
  --success: #3ECB70;
  --warning: #FF9F0A;
  --danger: #FF453A;
  --badge-admin-bg: rgba(255,69,58,0.14);
  --badge-all-bg: rgba(62,203,112,0.14);
  --code-bg: #0F0F0E;
  --code-bar-bg: #171614;
  --code-bar-border: #2B2A26;
  --code-text: #E6E2DA;
  --inline-code-bg: #2A2925;
  --inline-code-text: #F0EEE9;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
  color-scheme: dark;
}

/* Recolor the logo artwork to solid white on dark backgrounds instead of
   boxing it in a white chip — brightness(0) flattens every non-transparent
   pixel to black regardless of its original hue (navy "PERSIV", green "APP"),
   then invert(1) flips that to white, so it reads cleanly on dark without
   changing the image's box size between themes. */
:root:not([data-theme="light"]) .header-brand img,
:root[data-theme="dark"] .header-brand img {
  filter: brightness(0) invert(1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.6;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.15s ease, color 0.15s ease;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

::selection { background: var(--primary-light); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* Search inputs show focus on their own pill-shaped container instead (see
   .header-search:focus-within / .sidebar-search input:focus below) — letting
   the input itself also pick up the generic ring above double-stacks two
   overlapping shadows of different shapes on top of each other. */
.header-search input:focus-visible,
.sidebar-search input:focus-visible {
  box-shadow: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 6px 0;
  z-index: 500;
  font-size: 13px;
  font-weight: 600;
}

.skip-link:focus { left: 0; }

/* ── Header — persistent, sticky, spans the full width above the grid ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  padding: 0 20px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

:root:not([data-theme="light"]) .site-header,
:root[data-theme="dark"] .site-header {
  background: rgba(23,22,20,0.85);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 0;
}

.header-brand img { height: 18px; width: auto; }

.wordmark {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}

.wordmark-sub { color: var(--wordmark-sub); }

.docs-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--primary);
  color: #fff;
  flex-shrink: 0;
  white-space: nowrap;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}

.header-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 320px;
  min-width: 0;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.header-search:focus-within {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.header-search-icon {
  font-size: 12px;
  color: var(--text-label);
  flex-shrink: 0;
  line-height: 1;
}

.header-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
}

.header-search input::placeholder { color: var(--text-label); }

/* Global search results dropdown, anchored to .header-search */
.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 250;
}

.search-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
}

.search-result:hover, .search-result.active {
  background: var(--hover-surface);
  text-decoration: none;
}

.search-result-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.search-result-sep { color: var(--text-faint); font-weight: 400; }

.search-result-snippet {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

.search-results mark {
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 2px;
  padding: 0 1px;
}

.search-empty {
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 800px) {
  .search-results { min-width: 0; }
}

.kbd-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 5px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text-label);
  flex-shrink: 0;
  white-space: nowrap;
}

.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.12s ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--hover-surface);
  color: var(--text);
  border-color: var(--text-muted);
}

.menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text);
  padding: 4px 6px;
  flex-shrink: 0;
}

/* ── Doc grid — header above, sidebar + content grid below ── */
.doc-grid {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0,1fr);
  gap: 0;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: var(--header-h);
  align-self: start;
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 20px 16px 48px 24px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  z-index: 50;
}

.sidebar-search {
  position: relative;
  margin-bottom: 12px;
}

.sidebar-search::before {
  content: "🔍";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  line-height: 1;
  opacity: 0.55;
  pointer-events: none;
}

.sidebar-search input {
  width: 100%;
  padding: 7px 10px 7px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.sidebar-search input::placeholder { color: var(--text-label); }

.sidebar-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
}

.sidebar nav a {
  display: block;
  padding: 4px 8px;
  color: var(--text-muted-link);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 400;
  border-radius: var(--radius-sm);
  transition: color 0.12s ease, background-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.4;
}

.sidebar nav a:hover { color: var(--text); text-decoration: none; }

.sidebar nav a.active {
  color: var(--primary);
  font-weight: 600;
  background: transparent;
}

.sidebar nav a.nav-hidden,
.sidebar nav .nav-section.nav-hidden,
.sidebar nav .nav-subgroup.nav-hidden {
  display: none !important;
}

.sidebar nav .no-results {
  padding: 8px 8px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.sidebar nav .nav-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-heading-alt);
  cursor: pointer;
  user-select: none;
}

.sidebar nav .nav-section:hover { background: var(--hover-surface); }

.sidebar nav .nav-section.collapsible::after {
  content: "▾";
  font-size: 13px;
  line-height: 1;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}

.sidebar nav .nav-section.collapsible.collapsed::after {
  transform: rotate(-90deg);
}

.nav-chevron { display: none; }

.nav-section-links {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 8px 9px;
  padding-left: 8px;
  border-left: 1px solid var(--border-nav-guide);
  max-height: 600px;
  overflow: hidden;
  transition: max-height 0.22s ease, opacity 0.18s ease;
}

.nav-section-links.collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.sidebar nav.search-active .nav-section-links.collapsed {
  max-height: 600px;
  opacity: 1;
  margin: 2px 0 8px 9px;
}

/* Nested "subfolder" — a group of sub-pages within one nav-section, for a
   topic too large for one page (e.g. SmartTable Settings' 10 tabs). One
   extra indentation level, same collapse mechanics as the top-level group. */
.nav-subgroup { display: flex; flex-direction: column; }

.nav-subgroup-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted-link);
  text-align: left;
  cursor: pointer;
}

.nav-subgroup-toggle:hover { color: var(--text); background: var(--hover-surface); }

.nav-subgroup.has-active .nav-subgroup-toggle { color: var(--text); font-weight: 600; }

.nav-subgroup-chevron {
  font-size: 11px;
  line-height: 1;
  color: var(--text-faint);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.nav-subgroup.collapsed .nav-subgroup-chevron { transform: rotate(-90deg); }

.nav-subgroup-links {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 1px 0 4px 9px;
  padding-left: 8px;
  border-left: 1px solid var(--border-nav-guide);
  max-height: 400px;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.16s ease;
}

.nav-subgroup-links a { font-size: 12px; }

.nav-subgroup.collapsed .nav-subgroup-links {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.sidebar nav.search-active .nav-subgroup.collapsed .nav-subgroup-links {
  max-height: 400px;
  opacity: 1;
  margin: 1px 0 4px 9px;
}

/* ── Content grid: article + TOC, centered, max 1000px ── */
.main {
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--toc-width);
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
  align-items: start;
}

.main-content {
  min-width: 0;
  padding: 36px 0 90px;
}

.breadcrumb {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
  min-height: 13px;
}

.breadcrumb:empty { margin-bottom: 0; min-height: 0; }

.main h1 {
  font-family: var(--font-head);
  font-size: 29px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.028em;
  margin: 0 0 10px;
  color: var(--text);
  scroll-margin-top: 80px;
}

.subtitle {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-lead);
  max-width: 64ch;
  margin-bottom: 0;
  font-weight: 400;
}

/* Lead rule — the divider under the H1/lead pair before the first block */
.main-content > .subtitle {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 24px;
}

.main h2 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin: 28px 0 9px;
  padding-top: 0;
  border-top: none;
  color: var(--text);
  scroll-margin-top: 80px;
}

.main h2:first-of-type { margin-top: 0; }

.main h3 {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading-alt);
  margin: 20px 0 6px;
  scroll-margin-top: 80px;
}

.main p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 76ch;
  margin-bottom: 10px;
}

/* Tables */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.doc-table th, .doc-table td {
  padding: 7px 12px;
  text-align: left;
  vertical-align: top;
}

.doc-table th {
  background: var(--table-head-bg);
  font-weight: 700;
  font-size: 9.5px;
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border-light);
}

.doc-table td {
  color: var(--text-body);
  line-height: 1.45;
  border-bottom: 1px solid var(--border-table-row);
}

.doc-table tr:last-child td { border-bottom: none; }

.doc-table td code, .main p code, .main li code, .callout code {
  background: var(--inline-code-bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--inline-code-text);
  font-weight: 500;
  white-space: nowrap;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.doc-table tr:hover td { background: var(--hover-surface); }

/* Callouts */
.callout {
  padding: 11px 13px;
  border-radius: var(--radius);
  margin: 14px 0;
  border: 1px solid var(--callout-info-border);
  border-left: 3px solid var(--primary);
  background: var(--callout-info-bg);
  font-size: 13px;
  line-height: 1.55;
}

.callout-warning { border-color: var(--callout-warning-border); border-left-color: var(--warning); background: var(--callout-warning-bg); }
.callout-tip { border-color: var(--callout-tip-border); border-left-color: var(--success); background: var(--callout-tip-bg); }

.callout strong {
  display: block;
  margin-bottom: 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.callout-info strong { color: var(--primary); }
.callout-warning strong { color: var(--warning); }
.callout-tip strong { color: var(--success); }

.callout a { font-weight: 500; }

/* Badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
}

.badge-admin { background: var(--badge-admin-bg); color: var(--danger); }
.badge-all { background: var(--badge-all-bg); color: var(--success); }

/* Images */
.main img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  margin: 14px 0 16px;
}

.main img.no-shadow { border: none; }

/* Lists */
.main ul, .main ol {
  margin: 2px 0 12px;
  padding-left: 17px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.main li {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-body);
  max-width: 74ch;
}

.main li strong { color: var(--text); }

/* Code blocks */
.code-block {
  margin: 14px 0 16px;
  border: 1px solid var(--code-bar-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--code-bg);
}

.code-block-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  background: var(--code-bar-bg);
  border-bottom: 1px solid var(--code-bar-border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-label);
}

.code-block pre {
  margin: 0;
  padding: 11px 13px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--code-text);
}

/* Divider */
.doc-divider {
  height: 1px;
  background: var(--border-light);
  margin: 26px 0;
  border: none;
}

/* Hero image */
.hero-img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  margin-bottom: 32px;
}

/* On-this-page TOC */
.toc {
  position: sticky;
  top: var(--header-h);
  align-self: start;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 36px 0 48px;
}

.toc-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-label-alt);
  margin-bottom: 8px;
}

.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-light);
}

.toc li { margin: 0; }

.toc a {
  display: block;
  padding: 4px 0 4px 11px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 11.5px;
  line-height: 1.4;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.toc a:hover { color: var(--text); text-decoration: none; }

.toc a.active {
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 600;
}

/* Prev / next page navigation */
.page-nav {
  display: flex;
  gap: 10px;
  margin-top: 40px;
}

.page-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 13px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  background: var(--bg-card);
  transition: border-color 0.15s ease;
}

.page-nav a:hover { border-color: var(--text-faint); text-decoration: none; }

.page-nav .page-nav-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-label-alt);
}

.page-nav .page-nav-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.page-nav-next { text-align: right; align-items: flex-end; margin-left: auto; }

/* Topics grid */
.topics-category {
  margin: 28px 0 6px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-label-alt);
  font-weight: 700;
}

.topics-category:first-child { margin-top: 0; }

.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px 28px;
  margin-bottom: 8px;
  --topic-color: var(--primary);
  --topic-color-bg: var(--primary-light);
}

.topics-grid a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
}

.topic-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  background: var(--topic-color-bg);
  color: var(--topic-color);
  transition: transform 0.12s ease;
}

.topic-body { min-width: 0; }

.topics-grid a .topic-title {
  display: block;
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  font-family: var(--font-head);
}

.topics-grid a .topic-desc {
  display: block;
  color: var(--text-muted);
  font-size: 12.5px;
  margin-top: 2px;
  line-height: 1.4;
}

.topics-grid a:hover .topic-title { text-decoration: underline; }
.topics-grid a:hover .topic-icon { transform: scale(1.05); }

/* Platform/capability availability row */
.platform-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 20px;
}

.platform-badges span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 550;
}

/* Docs footer */
.docs-footer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.docs-footer a { color: var(--text-muted); }
.docs-footer a:hover { color: var(--primary); }

/* Scrollbars */
.sidebar::-webkit-scrollbar, .toc::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb, .toc::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

/* Overlay (mobile nav drawer) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 199;
}

.sidebar-overlay.active { display: block; }

/* Table wrapper for horizontal scroll */
.table-wrap {
  margin: 12px 0 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--bg-card);
  -webkit-overflow-scrolling: touch;
}

.table-wrap .doc-table {
  margin: 0;
  min-width: 480px;
}

/* Mobile */
@media (max-width: 800px) {
  .doc-grid { grid-template-columns: minmax(0,1fr); }

  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }

  .header-search { flex: 1; max-width: none; }
  .header-brand .wordmark { font-size: 13px; }

  .sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    height: calc(100vh - var(--header-h));
    width: 280px;
    max-width: 84vw;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 250;
    box-shadow: var(--shadow-md);
  }

  .sidebar.open { transform: translateX(0); }
}

@media (max-width: 1120px) {
  .main { grid-template-columns: minmax(0,1fr); }
  .toc { display: none; }
}

@media (max-width: 768px) {
  .main { padding: 0 18px; }
  .main-content { padding: 24px 0 60px; }

  .main h1 { font-size: 24px; }
  .main h2 { font-size: 17px; }

  .doc-table { font-size: 12px; }
  .doc-table th, .doc-table td { padding: 7px 9px; }

  .callout { padding: 10px 12px; font-size: 12.5px; }

  .page-nav { flex-direction: column; }
}

@media (min-width: 801px) and (max-width: 1120px) {
  .main { padding: 0 32px; }
}

/* Print */
@media print {
  .sidebar, .site-header, .sidebar-overlay, .toc, .page-nav, .theme-toggle, .skip-link { display: none !important; }
  .doc-grid { display: block; }
  .main { max-width: none; padding: 0; }
  .main-content { padding: 0; }
  .main img { box-shadow: none; }
  a { color: inherit; text-decoration: underline; }
}