custom.css

/*
 * Brand colors plus the full-bleed layout.
 *
 * Day and night use different accents:
 *   light  #49378b  active nav, links, Cloud outline
 *   dark   #f2ff59  active nav and Cloud button on a neutral shell
 * Shell: light #f7f6f9, dark #151417 (matching the live docs).
 */

:root {
  --ink-900: #151417;
  --hub-shell-light: #f7f6f9;
  --accent-purple: #49378b;
  --accent-yellow: #f2ff59;
  --primary: 73 55 139 !important;
  --primary-light: 242 255 89 !important;
  --primary-dark: 242 255 89 !important;
}

html.dark {
  --primary: 242 255 89 !important;
  --background-dark: 14 14 13 !important;
}

html.dark body {
  background-color: #0e0e0d !important;
}

/* ── Dark shell ─────────────────────────────────────────────────────────────── */

html.dark #navbar,
html.dark #navbar-transition {
  background-color: var(--ink-900) !important;
}

/* Match the article background so the sidebar has no contrasting color seam. */
html.dark #sidebar,
html.dark #sidebar-content {
  background-color: rgb(var(--background-dark)) !important;
}

html.dark #navbar,
html.dark #navbar-transition {
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.dark #navbar-transition {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  opacity: 1 !important;
}

html.dark img.nav-logo {
  filter: none;
}

/* Inactive sidebar links stay readable on the ink shell */
html.dark #sidebar-content a:not([aria-current="page"]) {
  color: rgba(255, 255, 255, 0.72) !important;
}

html.dark #sidebar-content a:not([aria-current="page"]) * {
  color: inherit !important;
}

/* Active page: brand yellow text with a subtle yellow tint. */
html.dark #sidebar-content a[aria-current="page"] {
  color: var(--accent-yellow) !important;
  background-color: rgba(242, 255, 89, 0.10) !important;
}

html.dark #sidebar-content a[aria-current="page"] * {
  color: inherit !important;
}

html.dark .nav-tabs-item[data-active],
html.dark mobile-nav-tabs-item[data-active] {
  color: var(--accent-yellow) !important;
}

/* Cloud button: brand yellow fill with a dark label. */
html.dark #navbar a[href*="comfy.org/cloud"] span.absolute {
  background-color: var(--accent-yellow) !important;
}

html.dark #navbar a[href*="comfy.org/cloud"] span.text-white {
  color: #151417 !important;
}

/* ── Light shell ────────────────────────────────────────────────────────────── */

html:not(.dark) #background-color,
html:not(.dark) #navbar,
html:not(.dark) #navbar-transition,
html:not(.dark) #sidebar,
html:not(.dark) #sidebar-content {
  background-color: var(--hub-shell-light) !important;
}

html:not(.dark) .nav-tabs-item[data-active],
html:not(.dark) mobile-nav-tabs-item[data-active],
html:not(.dark) nav-dropdown-item[data-active] {
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--accent-purple) !important;
  font-weight: 600 !important;
}

html:not(.dark) .nav-tabs-item[data-active] *,
html:not(.dark) mobile-nav-tabs-item[data-active] *,
html:not(.dark) nav-dropdown-item[data-active] * {
  color: inherit !important;
}

/* Current page only. Expanded groups keep the default gray. */
html:not(.dark) #sidebar-content li:has(> a[aria-current="page"]) {
  background-color: transparent !important;
  box-shadow: none !important;
}

html:not(.dark) #sidebar-content a[aria-current="page"] {
  color: var(--accent-purple) !important;
  background-color: rgba(73, 55, 139, 0.1) !important;
  font-weight: 600 !important;
}

html:not(.dark) #sidebar-content a[aria-current="page"] * {
  color: inherit !important;
}

html:not(.dark) toc-item[data-active],
html:not(.dark) toc-item[data-active-deepest],
html:not(.dark) toc-item[data-active] a,
html:not(.dark) toc-item[data-active-deepest] a {
  background-color: transparent !important;
  color: var(--accent-purple) !important;
  font-weight: 600 !important;
}

html:not(.dark) #header :where(h1, h2, h3, h4, h5, h6),
html:not(.dark) #content-area :where(h1, h2, h3, h4, h5, h6) {
  color: #151417 !important;
}

/* Cloud button: purple outline, no fill */
html:not(.dark) #navbar a[href*="comfy.org/cloud"] {
  background-color: transparent !important;
  color: var(--accent-purple) !important;
  border-radius: 0.75rem;
  box-shadow: inset 0 0 0 1px var(--accent-purple) !important;
}

html:not(.dark) #navbar a[href*="comfy.org/cloud"] span.absolute {
  background-color: transparent !important;
}

html:not(.dark) #navbar a[href*="comfy.org/cloud"] * {
  color: inherit !important;
}

/* Mintlify's sticky sidebar fade uses the default background token, which
   appears black over the custom shell. Keep its spacing without the gradient. */
#sidebar .sticky.top-0.pointer-events-none.bg-linear-to-b {
  background-image: none !important;
}

/* Full-bleed layout. Uncaps Mintlify's centered max-w-8xl shell so sidebar
   and content span the viewport, matching the fixed #sidebar at 18rem. */

@media (min-width: 1024px) {
  /* Uncap centered mint shell */
  #navbar.is-not-custom.is-not-center + div:has(> #sidebar),
  .max-w-8xl.mx-auto.relative,
  .max-w-8xl.mx-auto {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Logo row + tabs row: kill Mintlify px-12 / mx-4 inset */
  #navbar [class*="px-12"],
  #navbar [class*="mx-4"] {
    padding-left: 0 !important;
    padding-right: 1.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* First logo cluster: small left pad so mark isn't flush to window chrome */
  #navbar a.select-none,
  #navbar .nav-logo {
    margin-left: 1rem !important;
  }

  /* Tabs line up with sidebar link text: 1rem rail inset + link's own pl-4 */
  #navbar .nav-tabs {
    padding-left: 2rem !important;
  }

  /* Rail stays at the viewport edge; links sit 1rem in so the active pill is not flush */
  #sidebar {
    left: 0 !important;
    margin-left: 0 !important;
    box-shadow: none !important;
  }

  #sidebar-content {
    margin-left: 0 !important;
    padding-left: 1rem !important;
    box-sizing: border-box !important;
  }

  /* Header underlay must span full viewport (same left as sidebar) */
  #navbar,
  #navbar-transition {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Content: clear of 18rem sidebar; drop -ml-12 paired with px-12 */
  #content-area {
    margin-left: 0 !important;
    max-width: none !important;
    width: 100% !important;
    padding-left: 18rem !important; /* match w-[18rem] sidebar */
  }

  /* Hosted Mintlify uses an in-flow sticky sidebar, which already reserves
     its width. Keep only the article gutter instead of reserving it twice.
     Older local previews still use the fixed-sidebar rule above. */
  #sidebar.sticky ~ #content-container #content-area {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  #content-container,
  #body-content {
    max-width: none !important;
    width: 100% !important;
  }

  :root {
    --content-width: 100%;
    --sidebar-width: 18rem;
  }
}

/* Sidebar x-position: force flush with header underlay (overrides Mintlify inline left) */
@media (min-width: 1024px) {
  nav#sidebar,
  #sidebar[style] {
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  /* Download sits immediately left of the Comfy Cloud button, as an outline button */
  #navbar li.navbar-link:has(a[href*="comfy.org/download"]) {
    margin-right: 0 !important;
  }

  #navbar a[href*="comfy.org/download"] {
    box-sizing: border-box;
    border: 1px solid rgb(255 255 255 / 0.22);
    border-radius: 0.75rem;
    padding: 7px 0.875rem !important;
    color: #fff !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  html:not(.dark) #navbar a[href*="comfy.org/download"] {
    border-color: rgb(0 0 0 / 0.16);
    color: #151417 !important;
  }

  #navbar a[href*="comfy.org/download"]:hover {
    background: rgb(255 255 255 / 0.06);
  }

  html:not(.dark) #navbar a[href*="comfy.org/download"]:hover {
    background: rgb(0 0 0 / 0.04);
  }

  /* Pull the outline button and the filled Cloud button together */
  #navbar li.navbar-link:has(a[href*="comfy.org/download"]) + .whitespace-nowrap,
  #navbar .flex.space-x-6 > .whitespace-nowrap.hidden {
    margin-left: 0.5rem !important;
  }
}

/* Router-specific reading widths belong to the article, not the outer layout:
   fixed local and sticky hosted sidebars reserve their space differently. */
body:has(.router-api-reference-marker) #content,
body:has(.router-api-reference-marker) #header {
  max-width: 48rem;
}

body:has(.router-api-reference-marker) #content-area table {
  width: 100%;
  table-layout: auto;
}

body:has(.router-api-reference-marker) #content-area th,
body:has(.router-api-reference-marker) #content-area td {
  min-width: 4rem !important;
  overflow-wrap: anywhere;
}

body:has(.router-api-reference-marker) #content-area table:has(th:nth-child(6)) th:nth-child(3),
body:has(.router-api-reference-marker) #content-area table:has(th:nth-child(6)) td:nth-child(3) {
  min-width: 5rem !important;
}

/* Leave room for API parameter tables before showing the desktop outline. */
@media (max-width: 1535px) {
  body:has(.router-api-reference-marker) #content-side-layout {
    display: none !important;
  }
}

body:has(.router-provider-coverage-marker) #content,
body:has(.router-provider-coverage-marker) #header {
  max-width: 64rem;
}

body:has(.router-provider-coverage-marker) #content-area table {
  width: 100%;
  table-layout: auto;
}

body:has(.router-provider-coverage-marker) #content-area th,
body:has(.router-provider-coverage-marker) #content-area td {
  min-width: 5rem !important;
  overflow-wrap: anywhere;
}

body:has(.router-provider-coverage-marker) #content-area th:first-child,
body:has(.router-provider-coverage-marker) #content-area td:first-child {
  min-width: 12rem !important;
}

/*
 * The "Migrate to Comfy Router with your agent" card holds the migration
 * prompt in an expandable code block. Mintlify collapses an expandable block
 * to 190px (about seven lines) and offers no smaller setting, which pushes
 * the first setup step down the page. Show three lines while the block is
 * collapsed: 14px top padding plus 3 × 24px line height. Mintlify writes the
 * collapsed height as an inline style and replaces it with the full height
 * when the reader expands the block, so the rule stops matching at that
 * moment and the expanded state is untouched. Both spellings cover the
 * server-rendered and the hydrated markup. If Mintlify changes its collapsed
 * height, the rule stops matching and the block falls back to seven lines.
 */
body:has(.router-quickstart-marker) [data-component-part="card-content"] [data-component-part="code-block-root"][style*="height:190px"],
body:has(.router-quickstart-marker) [data-component-part="card-content"] [data-component-part="code-block-root"][style*="height: 190px"] {
  height: 86px !important;
}