/* ============================================================================
   Self-hosted fonts — CSP-safe (NO Google Fonts @import; works over file://).
   Roboto + Roboto Mono latin-subset variable woff2 (Apache-2.0) live next to
   this file under assets/fonts/. font-display:swap keeps text visible while
   loading. The --font-body/--font-mono stacks below fall back gracefully if a
   file is unavailable.
============================================================================ */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/roboto-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('assets/fonts/roboto-mono-latin.woff2') format('woff2');
}

/* ============================================================================
   DevHub :root — WorkAxle Web-MVP design-system conformance.
   Source of truth: feature-dashboard/dashboard/src/ds-tokens.css
   (UUID 4654d935-8771-47a2-a0e2-e0f7cc36199a). Foundation primitives are
   copied verbatim; DevHub's legacy variable NAMES are kept as aliases so the
   6 pages + JS bundles inherit with zero markup churn.
============================================================================ */
:root {
  /* ---- Web-MVP foundation primitives (verbatim from ds-tokens.css) -------- */
  /* Brand */
  --color-brand-orange:      rgb(252, 109, 45);   /* ds:10 */
  --color-brand-orange-dark: rgb(185, 57, 0);     /* ds:11 hover/press, AA on white */
  --color-brand-orange-bg:   rgb(251, 225, 223);  /* ds:12 */
  --color-brand-purple:      rgb(151, 71, 255);   /* ds:13 integration accent */

  /* Ink (navy) */
  --color-ink-900: rgb(20, 21, 39);   /* ds:18  page bg (dark) */
  --color-ink-700: rgb(34, 35, 56);   /* ds:20  text-primary / dark surface */
  --color-ink-600: rgb(46, 46, 70);   /* ds:21 */
  --color-ink-500: rgb(54, 54, 89);   /* ds:22 */
  --color-ink-400: rgb(82, 82, 125);  /* ds:23  secondary text */
  --color-ink-200: rgb(114, 115, 146);/* ds:25  tertiary text */

  /* Neutrals */
  --color-neutral-50:  rgb(247, 247, 249); /* ds:30  page surface */
  --color-neutral-100: rgb(240, 240, 244); /* ds:31  subtle surface */
  --color-neutral-200: rgb(230, 231, 233); /* ds:32  minimal border */
  --color-neutral-300: rgb(217, 217, 227); /* ds:33  default border */
  --color-neutral-400: rgb(193, 194, 209); /* ds:34  emphasis border */
  --color-neutral-500: rgb(177, 178, 193); /* ds:35  placeholder / muted-on-dark */
  --color-white: rgb(255, 255, 255);       /* ds:37 */

  /* Feedback */
  --color-success:    rgb(76, 175, 80);    /* ds:41 */
  --color-success-bg: rgb(221, 238, 221);  /* ds:42 */
  --color-warning:    rgb(255, 193, 7);    /* ds:43 */
  --color-warning-bg: rgb(255, 243, 204);  /* ds:44 */
  --color-danger:     rgb(244, 67, 54);    /* ds:45 */
  --color-danger-bg:  rgb(253, 209, 206);  /* ds:46 */
  --color-info:       rgb(33, 150, 243);   /* ds:48 */
  --color-info-bg:    rgb(207, 230, 252);  /* ds:49 */

  /* Utility palette (code-syntax tints; AA-verified on ink-900) */
  --color-util-cyan:     rgb(39, 206, 237);   /* ds:53 */
  --color-util-lavender: rgb(157, 132, 232);  /* ds:55 */
  --color-util-lime:     rgb(166, 220, 57);   /* ds:60 */
  --color-util-purple-bg: rgb(235, 228, 246); /* ds:63 */

  /* Semantic */
  --color-text-primary:   var(--color-ink-700);     /* ds:66 */
  --color-text-link:      var(--color-brand-orange); /* ds:71 */
  --color-bg-surface:     var(--color-white);        /* ds:76 */
  --color-bg-surface-1:   var(--color-neutral-50);   /* ds:77 */
  --color-border-default: var(--color-neutral-300);  /* ds:85 */
  --color-border-minimal: var(--color-neutral-200);  /* ds:86 */
  --color-border-emphasis:var(--color-neutral-400);  /* ds:87 */
  --color-border-focus:   var(--color-brand-orange); /* ds:88 */

  /* Radius */
  --radius-2: 2px;      /* ds:117 */
  --radius-4: 4px;      /* ds:118  buttons, inputs, code blocks */
  --radius-8: 8px;      /* ds:119  cards */
  --radius-16: 16px;    /* ds:120 */
  --radius-pill: 999px; /* ds:122  chips/pills */

  /* Shadows */
  --shadow-1: 0 0 4px 0 rgba(0, 0, 0, 0.12); /* ds:126 cards/hover/focus halo */
  --shadow-2: 0 0 8px 0 rgba(0, 0, 0, 0.16); /* ds:127 sidebar/header chrome */
  --shadow-3: 0 0 16px 0 rgba(0, 0, 0, 0.20);/* ds:128 popover/dropdown */
  --shadow-4: 0 0 20px 0 rgba(0, 0, 0, 0.25);/* ds:129 modal/overlay */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-border-focus) 18%, transparent); /* input focus halo; tracks --color-border-focus */

  /* Type */
  --font-body: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* ds:132 + CSP-safe fallback */
  --font-mono: 'Roboto Mono', 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace; /* README mono = Roboto Mono; CSP-safe fallback */
  --font-size-h1: 32px;     /* ds:139 */
  --font-size-h2: 24px;     /* ds:140 */
  --font-size-h3: 20px;     /* ds:141 */
  --font-size-body-l: 16px; /* ds:143 */
  --font-size-body-m: 14px; /* ds:144 */
  --font-size-body-s: 12px; /* ds:145 */
  --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700;
  --line-spacious: 1.5;  /* ds:156 headings */
  --line-default:  1.45; /* ds:157 body */
  --line-compact:  1.2;  /* ds:158 dense UI */

  /* Motion */
  --duration-fast: 150ms; --duration-base: 200ms; /* ds:161-162 */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);     /* ds:164 */

  /* ---- DevHub LEGACY ALIASES (names kept; now resolve to on-system) ------- */
  --content-bg:       var(--color-bg-surface);     /* was #ffffff */
  --content-fg:       var(--color-text-primary);   /* was #1a1a1a -> ink-700 */
  --content-muted:    var(--color-ink-400);        /* was #555 -> ink-400 */
  --rule:             var(--color-border-default);  /* was #e6e6e6 -> neutral-300 */
  --link:             var(--color-brand-orange-dark); /* was #2275d7; orange-dark = AA on white 5.76:1 (Decision D) */
  --link-hover:       var(--color-brand-orange-dark); /* also orange-dark — bright orange is 2.85:1 (fails AA 1.4.3); underline is the hover indicator */
  --btn-primary-bg:       var(--color-brand-orange-dark); /* primary CTA fill; decoupled from --link so a link recolor won't shift buttons */
  --btn-primary-bg-hover: rgb(150, 46, 0); /* derived darker shade for CTA hover feedback — DS has no token darker than orange-dark, and going lighter (brand-orange) fails AA on white text. white-on-this = 7.8:1 */

  /* Sidebar — on-system dark: ink + brand-orange accent */
  --sidebar-bg:        var(--color-ink-700);   /* was #2a2f33 */
  --sidebar-bg-deep:   var(--color-ink-900);   /* was #232729 */
  --sidebar-fg:        var(--color-white);     /* was #e8e8e8 */
  --sidebar-fg-dim:    var(--color-neutral-400); /* was #a3a8ad */
  --sidebar-accent:    var(--color-brand-orange); /* was amber #f6aa11 */
  --sidebar-active-bg: var(--color-ink-900);   /* was #1c1f21 */

  /* Code blocks — ink-900 surface (no Monokai in the system) */
  --code-bg:        var(--color-ink-900);   /* was Monokai #272822 */
  --code-fg:        var(--color-white);     /* was #f8f8f2 */
  --inline-code-bg: var(--color-neutral-100); /* was #f4f4f4 */
  --inline-code-fg: var(--color-brand-orange-dark); /* was crimson; orange-dark = AA on neutral-100 */

  /* Callouts / markers -> feedback tokens */
  --callout-bg:     var(--color-info-bg);     /* was #f7fbff */
  --callout-border: var(--color-info);        /* was blue #2275d7 -> info */
  --warn-bg:        var(--color-warning-bg);  /* was #fff7e0 */
  --warn-border:    var(--color-warning);     /* was amber #f6aa11 -> warning */
  --marker-bg:      var(--color-warning-bg);  /* was #fff3a8 */
  --marker-fg:      var(--color-brand-orange-dark); /* was #6b5800 -> orange-dark (AA on warning-bg) */

  --table-head-bg:  var(--color-neutral-50);  /* was #f5f7f8 */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--content-fg);
  background: var(--content-bg);
  font-size: var(--font-size-body-l);
  line-height: var(--line-default);
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
/* WCAG 1.4.1: in-prose links need a non-color cue (orange-dark vs ink-700 body
   text is 2.67:1, under the 3:1 color-only exception). Standalone nav/card/
   button links are not "within text" and opt out. */
.content p a, .content li a, .content td a, .callout a, .breadcrumb a { text-decoration: underline; }
a:focus-visible { text-decoration: underline; } /* focus parity with :hover */

/* === Layout === */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-2);
}
.content {
  flex: 1;
  padding: 40px 56px 80px 56px;
  max-width: 1080px;
  min-width: 0; /* allow content to shrink below child intrinsic width */
}

/* === Sidebar === */
.logo {
  padding: 22px 20px 18px 20px;
  border-bottom: 1px solid var(--sidebar-bg-deep);
  background: var(--sidebar-bg-deep);
}
.logo a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
}
.logo a:hover { text-decoration: none; }
.logo-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--sidebar-accent); /* glyph uses fill:currentColor */
}
.logo .logo-text { min-width: 0; }
.logo .brand {
  font-weight: 700;
  font-size: 18px;
}
.logo .brand .accent { color: var(--sidebar-accent); }
.logo .tagline {
  font-size: 12px;
  color: var(--sidebar-fg-dim);
  margin-top: 2px;
}
.toc {
  flex: 1;
  padding: 14px 0;
  font-size: 14px;
}
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc .h1 > a {
  display: block;
  padding: 9px 20px;
  color: var(--sidebar-fg);
  font-weight: 600;
  border-left: 3px solid transparent;
}
.toc .h1 > a:hover {
  background: var(--sidebar-active-bg);
  text-decoration: none;
  border-left-color: var(--sidebar-accent);
}
.toc .h1.active > a {
  background: var(--sidebar-active-bg);
  border-left-color: var(--sidebar-accent);
  color: var(--color-white);
}
.toc .h2 > a {
  display: block;
  padding: 6px 20px 6px 36px;
  color: var(--sidebar-fg-dim);
  font-size: 13px;
  border-left: 3px solid transparent;
}
.toc .h2 > a:hover {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-fg);
  text-decoration: none;
}
.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--sidebar-bg-deep);
  font-size: 12px;
  color: var(--sidebar-fg-dim);
}
.sidebar-footer a { color: var(--sidebar-fg-dim); }
.sidebar-footer .env-pill {
  display: inline-block;
  background: var(--sidebar-bg-deep);
  color: var(--sidebar-accent);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
/* Production variant — danger-toned chip (light danger bg + danger border +
   ink text, AA-safe like the badge chips). */
.sidebar-footer .env-pill--prod {
  background: var(--color-danger-bg);
  color: var(--color-ink-700);
  border: 1px solid var(--color-danger);
  font-weight: 700;
}
.sidebar-footer .env-host-row { margin-top: 8px; }

/* === Content === */
.content section {
  padding-bottom: 48px;
}
h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-spacious);
  margin: 0 0 8px 0;
}
h1 .anchor-tag {
  display: inline-block;
  font-size: 11px;
  background: var(--sidebar-bg);
  color: var(--sidebar-accent);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  margin-left: 12px;
  vertical-align: middle;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
h2 {
  font-size: var(--font-size-h2);
  line-height: 1.3;
  margin: 36px 0 12px 0;
  padding-top: 8px;
}
h3 {
  font-size: var(--font-size-h3);
  margin: 28px 0 10px 0;
  color: var(--content-muted);
}
p { margin: 12px 0; }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
th {
  background: var(--table-head-bg);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--content-muted);
}
td code { font-size: 12.5px; }

/* Code */
code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--inline-code-bg);
  color: var(--inline-code-fg);
  padding: 1px 6px;
  border-radius: var(--radius-4);
}
pre {
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: var(--radius-4);
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
  margin: 14px 0;
}
pre code { background: transparent; color: inherit; padding: 0; font-size: 13px; }
.pre-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--content-muted);
  font-weight: 600;
  margin-top: 18px;
  margin-bottom: -8px;
}
/* syntax tints for the cURL / JSON blocks — util palette, AA on ink-900 */
.tok-flag { color: var(--color-util-cyan); }
.tok-str  { color: var(--color-util-lime); }
.tok-key  { color: var(--color-util-lavender); }
.tok-num  { color: var(--color-brand-orange); }
.tok-com  { color: var(--color-neutral-500); }

/* Callouts */
.callout {
  background: var(--callout-bg);
  border-left: 4px solid var(--callout-border);
  padding: 12px 16px;
  margin: 18px 0;
  border-radius: 0 var(--radius-4) var(--radius-4) 0;
}
.callout.warn {
  background: var(--warn-bg);
  border-left-color: var(--warn-border);
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }
.callout-title {
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

/* Surface cards */
.surfaces {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 20px 0;
}
@media (min-width: 1100px) { .surfaces { grid-template-columns: 1fr 1fr 1fr; } }
.surface {
  border: 1px solid var(--rule);
  border-radius: var(--radius-8);
  padding: 16px 18px;
  background: var(--color-bg-surface-1);
}
.surface h4 {
  margin: 0 0 6px 0;
  font-size: 15px;
}
.surface .endpoint {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--content-muted);
  margin-bottom: 8px;
  word-break: break-all;
}
.surface .desc { font-size: 13.5px; color: var(--content-muted); margin: 0 0 10px 0; }
.surface .open-btn {
  display: inline-block;
  background: var(--btn-primary-bg);
  color: var(--color-white);
  padding: 6px 12px;
  border-radius: var(--radius-4);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--duration-fast) var(--ease-out);
}
.surface .open-btn:hover { background: var(--btn-primary-bg-hover); text-decoration: none; }

/* [VERIFY] / [FILL] markers */
.marker {
  display: inline-block;
  background: var(--marker-bg);
  color: var(--marker-fg);
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: var(--radius-2);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.marker-block {
  background: var(--marker-bg);
  color: var(--marker-fg);
  padding: 8px 12px;
  border-radius: var(--radius-2);
  font-size: 13px;
  margin: 10px 0;
  border-left: 3px solid var(--warn-border);
}

/* === REST endpoint builder === */
.rest-intro {
  background: var(--callout-bg);
  border: 1px solid var(--color-border-minimal);
  border-radius: var(--radius-8);
  padding: 14px 18px;
  margin: 14px 0 24px 0;
}
.rest-intro p { margin: 6px 0; font-size: 14px; }
.rest-intro code { font-size: 12.5px; }
.auth-banner {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-8);
  padding: 10px 14px;
  margin: 14px 0 24px 0;
  font-size: 13.5px;
}
.auth-banner label { font-weight: 600; white-space: nowrap; }
.auth-banner input {
  flex: 1;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-4);
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.auth-banner .hint { color: var(--content-muted); font-size: 12px; }
.auth-banner .env-select-label { font-weight: 600; white-space: nowrap; }
.auth-banner .env-select {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-4);
  padding: 6px 8px;
  font-size: 12.5px;
  font-family: inherit;
  background: var(--color-bg-surface);
  cursor: pointer;
}

.endpoint-group { margin-top: 28px; }
.endpoint-group > h2 {
  background: var(--color-bg-surface-1);
  padding: 10px 14px;
  border-radius: var(--radius-4);
  border-left: 4px solid var(--sidebar-accent);
  font-size: 18px;
}

.endpoint {
  border: 1px solid var(--rule);
  border-radius: var(--radius-8);
  margin: 18px 0;
  overflow: hidden;
  background: var(--color-bg-surface);
}
.endpoint-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--color-bg-surface-1);
  border-bottom: 1px solid var(--rule);
}
/* Shared chip recipe — every badge family (light feedback bg + ink text +
   colored border). White-on-solid feedback fills fail AA; ink-700 on the light
   bg passes 11-14:1, and the border carries the family's hue. Per-family rules
   below keep only background/border-color + intentional size overrides. */
.method-badge, .schema-badge, .scope-badge, .cid-badge,
.dep-badge, .stub-badge, .drift-badge, .removed-badge {
  font-family: var(--font-mono);
  font-weight: 700;
  border-radius: var(--radius-2);
  color: var(--color-ink-700);
  border: 1px solid transparent;
}
/* HTTP method badges */
.method-badge {
  font-size: 11.5px;
  padding: 3px 8px;
  letter-spacing: 0.5px;
}
.method-GET    { background: var(--color-info-bg);        border-color: var(--color-info); }
.method-POST   { background: var(--color-success-bg);     border-color: var(--color-success); }
.method-PATCH  { background: var(--color-warning-bg);     border-color: var(--color-warning); }
.method-PUT    { background: var(--color-util-purple-bg); border-color: var(--color-brand-purple); }
.method-DELETE { background: var(--color-danger-bg);      border-color: var(--color-danger); }
.endpoint-header .path {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--content-fg);
  word-break: break-all;
}
.endpoint-header .path .param { color: var(--inline-code-fg); font-weight: 600; }
.endpoint-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
@media (min-width: 1080px) {
  .endpoint-body {
    /* minmax(0, ...) is essential — without it, the cURL <pre> would expand
       the right column past its share and squish the form column. */
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.1fr);
  }
}
.endpoint-left, .endpoint-right {
  padding: 16px 20px;
  min-width: 0;
}
.endpoint-left {
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 1080px) {
  .endpoint-left { border-bottom: none; border-right: 1px solid var(--rule); }
}
.endpoint-desc {
  font-size: 14px;
  color: var(--content-muted);
  margin: 0 0 14px 0;
}
.param-group {
  margin: 14px 0 4px 0;
}
.param-group h5 {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--content-muted);
  margin: 0 0 8px 0;
  font-weight: 700;
}
.param-row {
  display: grid;
  grid-template-columns: minmax(110px, 140px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 6px 0;
}
.param-row label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding-top: 6px;
  color: var(--content-fg);
  word-break: break-all;
}
.param-row label .req { color: var(--color-danger); margin-left: 2px; }
.param-row .input-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.param-row input[type="text"],
.param-row input[type="number"],
.param-row input[type="date"],
.param-row input[type="datetime-local"] {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-4);
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.param-row input:focus,
.param-row select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--focus-ring);
}
.param-row .desc { font-size: 12px; color: var(--content-muted); }
.param-empty {
  font-size: 12.5px;
  color: var(--content-muted);
  padding: 4px 0;
  font-style: italic;
}

/* ---- schema-aware variable form (window.WA_VARSPEC) ---- */
.param-row select {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-4);
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--color-bg-surface);
}
.param-row select[multiple] { padding: 4px; }
/* nested input object → indented fieldset */
fieldset.vs-object {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--sidebar-accent);
  border-radius: var(--radius-4);
  margin: 8px 0 8px 0;
  padding: 6px 12px 10px 12px;
}
fieldset.vs-object > legend {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--content-fg);
  padding: 0 6px;
}
.vs-type {
  color: var(--content-muted);
  font-weight: 400;
  font-size: 11px;
}
/* comparison filter: operator dropdown + value editor */
.vs-cmp-wrap { display: flex; flex-direction: column; gap: 4px; }
.vs-cmp-wrap .vs-op { max-width: 140px; }
.vs-cmp-value { display: flex; flex-direction: column; gap: 3px; }
.vs-rawonly .desc { font-style: italic; }

.body-tabs {
  display: flex;
  gap: 0;
  margin: 6px 0 10px 0;
  border-bottom: 1px solid var(--rule);
}
.body-tabs button {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--content-muted);
  cursor: pointer;
  font-family: inherit;
}
.body-tabs button.active {
  color: var(--content-fg);
  border-bottom-color: var(--sidebar-accent);
}
.body-form, .body-raw { display: none; }
.body-form.active, .body-raw.active { display: block; }
.body-raw textarea {
  width: 100%;
  min-height: 180px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-4);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  resize: vertical;
  background: var(--color-bg-surface-1);
  color: var(--content-fg);
}
.body-note {
  font-size: 12px;
  color: var(--content-muted);
  margin: 4px 0 8px 0;
  font-style: italic;
}

.preview-section { min-width: 0; }
.preview-section h5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--content-muted);
  margin: 8px 0 6px 0;
  font-weight: 700;
}
.preview-section h5 .copy-btn {
  flex-shrink: 0;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  color: var(--content-fg);
  padding: 4px 12px;
  border-radius: var(--radius-2);
  font-size: 11px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-family: inherit;
}
.preview-section h5 .copy-btn:hover { background: var(--color-neutral-100); }
.preview-section h5 .copy-btn.copied {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-ink-700);
}
.preview-section h5 .h5-btns { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.preview-section h5 a.copy-btn { text-decoration: none; display: inline-block; line-height: 1.4; }
.preview-section h5 .graphiql-btn {
  background: var(--color-info-bg);
  border-color: var(--color-info);
  color: var(--color-ink-700);
}
.preview-section h5 .graphiql-btn:hover { background: var(--color-neutral-100); }
.preview-section h5 .response-hint {
  font-size: 10.5px;
  color: var(--content-muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.2px;
  margin-left: 10px;
  font-style: italic;
}
.curl-preview, .response-preview {
  position: relative;
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: var(--radius-4);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
  margin: 0 0 12px 0;
}
/* slimmer scrollbar inside the dark code blocks */
.curl-preview::-webkit-scrollbar,
.response-preview::-webkit-scrollbar { height: 8px; }
.curl-preview::-webkit-scrollbar-thumb,
.response-preview::-webkit-scrollbar-thumb { background: var(--color-ink-400); border-radius: var(--radius-4); }
.curl-preview::-webkit-scrollbar-track,
.response-preview::-webkit-scrollbar-track { background: transparent; }

/* === Landing / group / operation navigation === */
.group-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 18px 0 8px 0;
}
@media (min-width: 900px)  { .group-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .group-grid { grid-template-columns: 1fr 1fr 1fr; } }
.group-card {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius-8);
  padding: 16px 18px;
  background: var(--color-bg-surface-1);
  color: var(--content-fg);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.group-card:hover {
  text-decoration: none;
  background: var(--color-bg-surface);
  border-color: var(--color-border-emphasis);
  box-shadow: var(--shadow-1);
}
.group-card h3 {
  margin: 0 0 6px 0;
  color: var(--content-fg);
  font-size: 16px;
}
.group-card p {
  margin: 4px 0 10px 0;
  font-size: 13.5px;
  color: var(--content-muted);
}
.group-card .group-count {
  display: inline-block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--marker-fg);
  background: var(--marker-bg);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.breadcrumb {
  font-size: 13px;
  color: var(--content-muted);
  margin: -4px 0 20px 0;
}
.breadcrumb a { color: var(--link); }
.breadcrumb > span { color: var(--content-fg); }
.breadcrumb .sep { margin: 0 6px; color: var(--content-muted); opacity: 0.6; }

.op-list {
  list-style: none;
  padding: 0;
  margin: 18px 0;
}
.op-list li { margin: 8px 0; }
.op-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-8);
  background: var(--color-bg-surface-1);
  color: var(--content-fg);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.op-list a:hover {
  background: var(--color-bg-surface);
  border-color: var(--color-border-emphasis);
  box-shadow: var(--shadow-1);
  text-decoration: none;
}
.op-list .path {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--content-fg);
  word-break: break-all;
}
.op-list .op-name {
  font-size: 13.5px;
  color: var(--content-muted);
  margin-left: auto;
  flex-shrink: 0;
}

/* === GraphQL builder additions === */
.schema-badge {
  font-size: 10.5px;
  padding: 3px 8px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.schema-app         { background: var(--color-info-bg);        border-color: var(--color-info); }
.schema-integration { background: var(--color-util-purple-bg); border-color: var(--color-brand-purple); }
.endpoint-header .op-name {
  font-size: 13px;
  color: var(--content-muted);
  margin-left: auto;
  font-weight: 500;
}
.gql-query {
  background: var(--color-neutral-100);
  color: var(--content-fg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-4);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  margin: 0;
  max-width: 100%;
}

/* ============================================================================
   === Phase 4: dynamic family nav + filter, catalog search, extra badges ===
============================================================================ */

/* Sidebar family filter + scrollable family list */
.toc-filter-wrap { padding: 6px 16px 8px; }
#toc-filter {
  width: 100%;
  background: var(--sidebar-bg-deep);
  border: 1px solid var(--color-ink-500);
  color: var(--sidebar-fg);
  border-radius: var(--radius-4);
  padding: 6px 9px;
  font-size: 12.5px;
  outline: none;
}
#toc-filter:focus { border-color: var(--sidebar-accent); }
#toc-filter::placeholder { color: var(--sidebar-fg-dim); }
.toc-fam {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 46vh;
  overflow-y: auto;
}
.toc-fam .fam > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 20px 5px 36px;
  color: var(--sidebar-fg-dim);
  font-size: 12.5px;
  border-left: 3px solid transparent;
}
.toc-fam .fam > a:hover {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-fg);
  text-decoration: none;
}
.toc-fam .fam.active > a {
  background: var(--sidebar-active-bg);
  border-left-color: var(--sidebar-accent);
  color: var(--color-white);
}
.toc-fam .fam-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-fam .fam-count {
  font-size: 10.5px;
  color: var(--sidebar-fg-dim);
  background: var(--sidebar-bg-deep);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  flex-shrink: 0;
}
#toc-empty {
  display: none;
  padding: 8px 20px 8px 36px;
  font-size: 12px;
  color: var(--sidebar-fg-dim);
  font-style: italic;
}

/* Catalog search box on the landing */
.catalog-search { margin: 6px 0 4px; }
#op-search {
  width: 100%;
  padding: 11px 14px;
  font-size: 15px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-8);
  outline: none;
}
#op-search:focus { border-color: var(--color-border-focus); box-shadow: var(--focus-ring); }
.search-count {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--content-muted);
  margin: 14px 0 2px;
}
.search-empty { margin: 18px 0; color: var(--content-muted); }
.op-list.search-results { margin-top: 4px; }
.op-list .search-fam {
  font-size: 11px;
  color: var(--content-muted);
  background: var(--table-head-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  flex-shrink: 0;
}

/* Extra badges: scope / company-id / deprecated / sync state — smaller chips
   (shared recipe above), tokenized. */
.scope-badge, .cid-badge, .dep-badge,
.stub-badge, .drift-badge, .removed-badge {
  font-size: 10px;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  text-transform: lowercase;
  flex-shrink: 0;
}
.scope-badge   { background: var(--color-info-bg);        border-color: var(--color-info); }
.cid-badge     { background: var(--color-util-purple-bg); border-color: var(--color-brand-purple); }
.dep-badge     { background: var(--color-danger-bg);      border-color: var(--color-danger); }
.stub-badge    { background: var(--color-warning-bg);     border-color: var(--color-warning); }
.drift-badge   { background: var(--color-brand-orange-bg); border-color: var(--color-brand-orange); }
.removed-badge { background: var(--color-neutral-200);    border-color: var(--color-neutral-400); color: var(--color-ink-400); text-decoration: line-through; }
.endpoint-header .scope-badge,
.endpoint-header .cid-badge,
.endpoint-header .dep-badge,
.endpoint-header .stub-badge,
.endpoint-header .drift-badge,
.endpoint-header .removed-badge { margin-left: 4px; }

/* small responsive */
@media (max-width: 800px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: relative; }
  .content { padding: 24px; }
  .param-row { grid-template-columns: 1fr; }
  .toc-fam { max-height: none; }
}