:root {
  --docs-header-height: 48px;
}

#nd-docs-layout {
  --fd-banner-height: var(--docs-header-height);
  --fd-layout-width: 9999px;
}

html:has(#nd-docs-layout) {
  scroll-padding-top: calc(var(--docs-header-height) + 6rem);

  @media (min-width: 768px) {
    scroll-padding-top: calc(var(--docs-header-height) + 2.5rem);
  }

  @media (min-width: 1280px) {
    scroll-padding-top: calc(var(--docs-header-height) + 2rem);
  }
}

@media (min-width: 1280px) {
  #nd-page[data-full="true"] {
    max-width: 70%;
    justify-self: center;
  }
}

/* When container is narrow (e.g. assistant panel open), use full width */
@container (max-width: 1200px) {
  #nd-page[data-full="true"] {
    max-width: 100%;
  }
}

#nd-page[data-full="true"] ~ #nd-toc {
  justify-self: start;
}

#nd-page {
  padding-inline: 1rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1.5rem !important;
}

/* When container is narrow, let content fill the column instead of capping at 900px */
@container (max-width: 1500px) {
  #nd-page {
    max-width: 100% !important;
  }
}

#nd-toc > .sticky {
  top: calc(var(--docs-header-height) + 1rem) !important;
}

#nd-sidebar {
  --fd-background: transparent;
  background: transparent !important;
  border-inline-end: none !important;
}

:is(#nd-sidebar, #nd-sidebar-mobile) {
  & :is(a, button):not([data-sidebar-control]):not(.sidebar-tabs-container *) {
    padding-block: 0.375rem !important;
    padding-inline-end: 0.625rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    background: transparent !important;
    transition:
      color 0.15s ease,
      background-color 0.15s ease !important;

    &:hover {
      color: var(--fd-foreground) !important;
      background: var(--fd-accent) !important;
    }
  }

  & a[data-active="true"]:not(.sidebar-tabs-container *) {
    color: var(--fd-foreground) !important;
    font-weight: 500 !important;
    background: var(--fd-accent) !important;

    &::before {
      display: none !important;
    }
  }

  /* Sidebar separator */
  & p.inline-flex {
    margin-top: 1.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--fd-muted-foreground) !important;

    &:first-child {
      margin-top: 0 !important;
    }
  }

  & svg:not(.sidebar-tabs-container *) {
    width: 1rem !important;
    height: 1rem !important;
    opacity: 0.7;
    flex-shrink: 0;

    &[data-icon] {
      width: 0.875rem !important;
      height: 0.875rem !important;
    }
  }

  & .border-t {
    border-top: none !important;
  }
}

/* Sidebar section tabs - tighten gap between tabs and page tree */
#nd-sidebar .sidebar-tabs-container {
  margin-bottom: -0.25rem;
}

#nd-sidebar [class*="before:bg-fd-border"] {
  --tw-border-opacity: 0.4;
}

#nd-subnav {
  display: none !important;
}

#nd-sidebar-mobile {
  display: none !important;
}

[data-toc-popover] {
  width: 100vw !important;
  margin-inline-start: calc(-1 * var(--fd-sidebar-width, 0px)) !important;
  left: 0 !important;

  & header {
    border-bottom: none !important;
    background: var(--fd-background) !important;
  }
}

[data-toc-popover-trigger],
[data-toc-popover-content] {
  padding-inline: 1rem !important;
}

@media (min-width: 768px) {
  [data-toc-popover-trigger],
  [data-toc-popover-content] {
    padding-inline: 1.5rem !important;
  }
}

[data-toc-popover-trigger] {
  color: var(--fd-muted-foreground) !important;
  font-size: 0.875rem !important;

  & svg[role="progressbar"] {
    display: none !important;
  }
}

.prose {
  font-size: 0.875rem !important;
  line-height: 1.7 !important;

  & :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important;
  }

  & :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.4 !important;
  }

  & :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    margin-top: 2rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.5 !important;
  }

  & :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.5 !important;
  }

  & :where(ul, ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  & :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  &
    :where(code):not(:where(pre code)):not(
      :where([class~="not-prose"], [class~="not-prose"] *)
    ) {
    font-size: 0.8125rem !important;
    padding: 0.125rem 0.375rem !important;
    border-radius: 0.375rem !important;
    border: none !important;
    background: var(--muted) !important;
    font-weight: 500 !important;
  }

  & [class~="not-prose"] :where(code):not(:where(pre code)) {
    font-size: 0.75rem !important;
    padding: 0.0625rem 0.25rem !important;
    border-radius: 0.375rem !important;
    border: none !important;
    background: var(--muted) !important;
    font-weight: 500 !important;
  }

  & :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important;
    border-radius: 0.5rem !important;
  }

  &
    :where(blockquote):not(
      :where([class~="not-prose"], [class~="not-prose"] *)
    ) {
    font-style: normal !important;
    font-weight: 400 !important;
    color: var(--muted-foreground) !important;
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important;
    padding-left: 1rem !important;
    border-left-width: 2px !important;
    border-left-color: var(--border) !important;
  }

  &
    :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):not(
      [data-card]
    ) {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    text-decoration-color: var(--fd-muted-foreground) !important;
  }

  & :where(.prose-no-margin):has(table) {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
  }

  & :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--muted) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;

    & thead {
      background: transparent !important;
    }

    & th {
      padding: 0.5rem 0.75rem !important;
      text-align: left !important;
      font-weight: 500 !important;
      color: var(--muted-foreground) !important;
      border: none !important;
    }

    & td {
      padding: 0.5rem 0.75rem !important;
      border: none !important;
      vertical-align: top !important;
    }

    & tr {
      border: none !important;
    }

    & tbody tr {
      background: var(--background) !important;
    }

    & tbody tr:first-child td:first-child {
      border-top-left-radius: 0.5rem !important;
    }

    & tbody tr:first-child td:last-child {
      border-top-right-radius: 0.5rem !important;
    }

    & tbody tr:last-child td:first-child {
      border-bottom-left-radius: 0.5rem !important;
    }

    & tbody tr:last-child td:last-child {
      border-bottom-right-radius: 0.5rem !important;
    }

    & code {
      font-size: 0.75rem !important;
      padding: 0.0625rem 0.25rem !important;
    }
  }

  & :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    border-color: var(--border) !important;
  }

  &
    :where(h2 + p, h3 + p, h4 + p):not(
      :where([class~="not-prose"], [class~="not-prose"] *)
    ) {
    margin-top: 0 !important;
  }

  &
    :where(h2 + ul, h3 + ul, h4 + ul, h2 + ol, h3 + ol, h4 + ol):not(
      :where([class~="not-prose"], [class~="not-prose"] *)
    ) {
    margin-top: 0.5rem !important;
  }

  & :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 0.75rem !important;
  }
}

figure.shiki {
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
  border-radius: 0.75rem !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  background: var(--background) !important;
  overflow: hidden;

  /* Header with title */
  & > div:first-child:has(figcaption) {
    height: 2.25rem !important;
    padding-inline: 0.875rem !important;
    border-bottom: none !important;
    background: var(--background) !important;
  }

  & figcaption {
    font-family: var(--font-mono), ui-monospace, monospace !important;
    font-size: 0.8625rem !important;
    font-weight: 500 !important;
    color: var(--muted-foreground) !important;
  }

  /* Copy button position (no title) */
  & > div:first-child:not(:has(figcaption)) {
    top: 0.5rem !important;
    right: 0.5rem !important;
  }

  /* Copy button */
  & button[aria-label*="Copy"] {
    width: 1.75rem !important;
    height: 1.75rem !important;
    padding: 0 !important;
    border-radius: 0.375rem !important;
    background: transparent !important;
    color: var(--muted-foreground) !important;
    opacity: 0.5;
    transition: all 0.15s ease !important;

    &:hover {
      background: var(--background) !important;
      color: var(--foreground) !important;
      opacity: 1;
    }

    & svg {
      width: 0.875rem !important;
      height: 0.875rem !important;
    }
  }

  &:hover button[aria-label*="Copy"] {
    opacity: 1;
  }

  /* Code region */
  & > div[role="region"] {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.65 !important;
    background: var(--muted) !important;
  }

  /* Code region top corners, when a title header sits above it */
  &:has(figcaption) > div[role="region"] {
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
  }

  & pre {
    --padding-left: 0.875rem !important;
    --padding-right: 0.875rem !important;
  }

  /* Line numbers */
  & [data-line-numbers] .line {
    padding-left: calc(0.875rem + 2.25rem) !important;
  }

  /* Highlighted lines */
  & .highlighted {
    background: oklch(0.7 0.12 250 / 0.1) !important;

    .dark & {
      background: oklch(0.5 0.15 250 / 0.15) !important;
    }
  }

  /* Diff styles */
  & .diff.add {
    background: oklch(0.85 0.12 145 / 0.2) !important;

    .dark & {
      background: oklch(0.45 0.12 145 / 0.2) !important;
    }
  }

  & .diff.remove {
    background: oklch(0.85 0.15 25 / 0.2) !important;

    .dark & {
      background: oklch(0.45 0.15 25 / 0.2) !important;
    }
  }
}

/* Content inside tabs */
[role="tabpanel"] {
  & > :first-child {
    margin-top: 0 !important;
  }
  & > :last-child {
    margin-bottom: 0 !important;
  }
}

[role="tabpanel"]:has(> figure.shiki:only-child) {
  padding: 0 !important;
}

/* A Callout (or any not-prose block) inside a tab owns its own link styling.
   The tab's [&_a] color/weight would otherwise bleed in, turning callout links
   foreground-white and medium-weight. Let them inherit, like .prose does. */
[role="tabpanel"] :where([class~="not-prose"], [class~="not-prose"] *) a {
  color: inherit;
  font-weight: inherit;
}

/* Steps component */
.steps-container {
  counter-reset: step;
}

.step-number {
  counter-increment: step;
}

.step-number::before {
  content: counter(step);
}

/* PreviewCode component - remove nested SampleFrame styling */
.preview-code-preview > .not-prose {
  margin: 0 !important;
}

.preview-code-preview > .not-prose > div {
  border: none !important;
  border-radius: 0 !important;
  height: auto !important;
}

.preview-code-block {
  background: var(--muted) !important;
  border-radius: 0.75rem !important;
  border: none !important;

  & pre {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    counter-reset: line !important;
  }

  & code {
    display: block !important;
    background: transparent !important;
  }

  /* Override Shiki theme background */
  & .shiki {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Dark mode: apply shiki-dark CSS variables */
  :is(.dark *) & span {
    color: var(--shiki-dark) !important;
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }

  & .line {
    display: inline-block !important;
    width: 100% !important;
    padding-left: 2.5rem !important;
    padding-right: 0.5rem !important;
    position: relative !important;
  }

  & .line::before {
    content: counter(line) !important;
    counter-increment: line !important;
    position: absolute !important;
    left: 0.5rem !important;
    width: 1.5rem !important;
    text-align: right !important;
    color: var(--muted-foreground) !important;
    opacity: 0.5 !important;
    font-size: 0.8125rem !important;
    line-height: inherit !important;
    user-select: none !important;
  }
}

/* Override fumadocs line numbers to be right-aligned */
figure.shiki pre[data-line-numbers] span.line::after,
.shiki pre[data-line-numbers] span.line::after,
pre.shiki[data-line-numbers] span.line::after,
[data-line-numbers] span.line::after {
  width: 1.5rem !important;
  text-align: right !important;
  left: 0.5rem !important;
}