/* Desktop page inset after whatnot.com's centred .container: from 1056px
   (Whatnot's lg) the page sits in a centred container of at most 1420px,
   gutter included, with a 32px gutter; narrower windows fill it fluidly. The
   header keeps its full-width band and bottom border; only its row is inset.
   Below 1056px the theme's full-width layout and the mobile drawer are
   unchanged.

   The theme anchors the header row, the fixed sidebar, main's sidebar padding
   and the Ask AI chat bar to the viewport edges, so each one takes the same
   inset. The theme's rules for main and the chat bar are scoped (0,2,0) or
   higher, hence the extra element/class on those selectors. */
/* main's horizontal padding in each layout. The footer cancels it to run the
   full viewport width. Up to 1000px the theme collapses the sidebar into a
   drawer and main has none; from 1001px it reserves the sidebar width. */
:root {
  --wn-main-pad-left: 0px;
  --wn-main-pad-right: 0px;
}

@media (min-width: 1001px) {
  :root {
    --wn-main-pad-left: var(--scalar-sidebar-width);
  }
}

@media (min-width: 1056px) {
  :root {
    --wn-container: 1420px;
    /* Viewport edge to the container's content edge, on either side */
    --wn-inset: calc(max(0px, (100vw - var(--wn-container)) / 2) + 32px);
    /* The right edge stops at the container; the table of contents and the
       API reference columns bring their own inner padding. */
    --wn-main-pad-left: calc(var(--wn-inset) - 20px + var(--scalar-sidebar-width));
    --wn-main-pad-right: calc(var(--wn-inset) - 32px);
  }
}

@media (min-width: 1056px) {
  header .t-header__row {
    padding-inline: var(--wn-inset);
  }

  /* Sidebar rows sit 20px inside the aside (sidebar.css), so the aside starts
     20px early to line its labels up with the logo. A drawer left open while
     the window widens keeps .sidebar-mobile-menu, so that is offset too. */
  .t-doc__sidebar {
    left: calc(var(--wn-inset) - 20px);
  }

  main.content.content-sidebar {
    padding-left: var(--wn-main-pad-left);
    padding-right: var(--wn-main-pad-right);
  }

  /* The API reference stacks to one column when its container is 900px or
     narrower. The 20px the aside starts early leaves main 12px narrower than
     the theme's, which would stack it from 1181px to 1192px; the container
     takes back up to that 12px, only while it is under 901px. */
  main.content.content-sidebar .references-container {
    margin-left: clamp(
      calc(20px - var(--wn-inset)),
      calc(100vw - var(--wn-main-pad-left) - var(--wn-main-pad-right) - 901px),
      0px
    );
  }

  /* The API reference's right edge sits on the container gutter, in line
     with the header's last item (Support). The theme's sections otherwise
     stop short of it: 60px of section padding above its 900px container
     width, and 24px once it stacks below that. Nested tag sections carry no
     padding of their own. */
  @container references-container (min-width: 901px) {
    main.content.content-sidebar .section-container:not(.tag-section-nested) {
      padding-right: 32px;
    }
  }

  @container references-container (max-width: 900px) {
    main.content.content-sidebar .section {
      padding-right: 32px;
    }
  }

  /* Model pages render outside the references container, so the query above
     never reaches them; they never stack and keep the 60px section padding. */
  main.content.content-sidebar .page-content > div:not(.references-container) > .section-container {
    padding-right: 32px;
  }

  /* The Ask AI bar centres on the content column: from the sidebar's right
     edge to the table of contents, or to the container edge on pages without
     one. Its 560px width is capped to that column, which is narrower than the
     bar at the narrow end of the desktop range. A right-anchored bar keeps the theme's
     left: auto. Fullscreen covers the viewport and keeps inset: 0. */
  body .chat-widget.chat-widget--sidebar:not(.chat-widget--right, .chat-widget--fullscreen) {
    left: calc(var(--wn-inset) - 20px + var(--scalar-sidebar-width));
  }

  body .chat-widget.chat-widget--sidebar:not(.chat-widget--toc, .chat-widget--right, .chat-widget--fullscreen) {
    right: calc(var(--wn-inset) - 32px);
  }

  body .chat-widget.chat-widget--toc:not(.chat-widget--fullscreen) {
    right: calc(var(--scalar-toc-width, 280px) + var(--wn-inset) - 32px);
  }

  body .chat-widget:not(.chat-widget--right, .chat-widget--fullscreen) {
    width: auto;
    max-width: min(560px, calc(100vw - 24px));
  }

  body .chat-widget.chat-widget--right.chat-widget--toc:not(.chat-widget--fullscreen) {
    right: calc(var(--scalar-toc-width, 280px) + 20px + var(--wn-inset) - 32px);
    width: min(560px, calc(100vw - 2 * var(--wn-inset) - 528px));
  }

  body .chat-widget.chat-widget--right:not(.chat-widget--toc, .chat-widget--fullscreen) {
    right: calc(var(--chat-widget-inset-inline-end, 20px) + var(--wn-inset) - 32px);
  }
}

/* The Ask AI panel (.agent-chat-panel, the current isolate's class -- the
   .chat-widget rules above target an older build and may no longer apply)
   otherwise falls back to the default theme's own surface colors instead of
   Whatnot's white/black. Match the rest of the site's chrome. */
.agent-chat-panel {
  background: var(--scalar-background-1);
  color: var(--scalar-color-1);
  border-color: var(--scalar-border-color);
}

/* Site footer (footer.html), placed below the whole site at full viewport
   width. The theme renders it inside main, beside the fixed sidebar, and has
   no config option to move it, so it cancels main's padding and, on desktop,
   stacks above the sidebar so it slides over the sidebar's lower end as the
   page reaches its bottom. The header (z-index 999) and the Ask AI bar (1000)
   stay above it. On the drawer layout it keeps the theme's stacking, so it
   never covers the open drawer. */
main.content.content-sidebar > .footer {
  margin-left: calc(-1 * var(--wn-main-pad-left));
  margin-right: calc(-1 * var(--wn-main-pad-right));
}

@media (min-width: 1001px) {
  /* The page fills at least the viewport under the header, so on short pages
     the footer starts at the fold instead of covering the sidebar's lower
     rows. The theme's flex: 1 has a zero basis, which would let long content
     run under the footer, hence 1 0 auto. */
  main.content.content-sidebar > .page-content {
    flex: 1 0 auto;
    min-height: calc(100dvh - var(--scalar-banner-height, 0px) - var(--scalar-header-height));
  }

  main.content.content-sidebar > .footer {
    position: relative;
    z-index: 1;
  }
}