/* Docs and API reference sidebar (desktop aside and the mobile drawer), drawn
   with whatnot.com's home-feed sidebar: pages are Whatnot's category links,
   folders are Whatnot's filter accordion rows.

   Every rule is scoped to .t-doc__sidebar. The theme's utilities are unlayered
   and written as `.scalar-app .x` (0,2,0; hover 0,3,0), so row selectors carry
   at least one class or attribute more than that. The theme preset redeclares
   the --scalar-sidebar-* colours on body.light-mode / body.dark-mode, so colour
   tokens are set on `.light-mode .t-doc__sidebar` and `.dark-mode
   .t-doc__sidebar`, never on :root. */

/* Whatnot palette, light. Values are Whatnot's own tokens. */
.light-mode .t-doc__sidebar {
  /* --color-neutral-transparent-black-40 / -70 */
  --wn-link: rgb(0 0 0 / 0.4);
  --wn-link-hover: rgb(0 0 0 / 0.7);
  /* --color-blue-500 / --color-blue-700 */
  --wn-link-active: #0245f6;
  --wn-link-active-hover: #01288f;
  /* --color-neutral-900 */
  --wn-heading: #1c1c1c;
  /* --color-neutral-100 */
  --wn-divider: #d6d6d6;
  --wn-focus: #0245f6;
}

/* Whatnot's .dark variant: neutral-0 for primary text, white-transparent for
   the category links, blue-300 for the active link and neutral-800 for the
   dividers. The category links define no dark colours of their own. */
.dark-mode .t-doc__sidebar {
  /* --color-neutral-transparent-white-40 / -70 */
  --wn-link: rgb(255 255 255 / 0.4);
  --wn-link-hover: rgb(255 255 255 / 0.7);
  /* --color-blue-300, lifted 30% toward white on hover so hover still adds
     contrast on a dark ground, as blue-700 does on white */
  --wn-link-active: #3368f6;
  --wn-link-active-hover: color-mix(in srgb, #3368f6 70%, #fff);
  /* --color-neutral-0 */
  --wn-heading: #fff;
  /* --color-neutral-800 */
  --wn-divider: #2d2d2d;
  --wn-focus: #3368f6;
}

/* Theme tokens the sidebar utilities read. Whatnot's links have no hover or
   active background, and its sidebar has no vertical rule against the feed.
   --scalar-sidebar-border-color also paints the indent lines, which are hidden
   below. */
.light-mode .t-doc__sidebar,
.dark-mode .t-doc__sidebar {
  --scalar-focus-color: var(--wn-focus);
  --scalar-sidebar-border-color: transparent;
  --scalar-sidebar-item-hover-background: transparent;
  --scalar-sidebar-item-active-background: transparent;
}

/* Whatnot sets every sidebar string in its system-ui stack. Setting
   --scalar-font here would do nothing: body resolves it and the aside inherits
   the computed family. */
.t-doc__sidebar {
  font-family:
    system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
}

/* Root list: Whatnot's sidebar padding of 12px 0 plus a 20px side inset, which
   keeps today's 280px width and label x while making rows Whatnot's 240px
   column (its 256px sidebar minus the list's 16px padding-right). Rows touch,
   as Whatnot's do. */
.t-doc__sidebar > .items > ul.group\/items {
  gap: 0;
  padding: 12px 20px;
}

/* Child list of an open folder. Every level lines up with its folder's title,
   as Whatnot's filter panels do, so nesting shows through the folder rows'
   weight and dividers rather than an indent. */
.t-doc__sidebar li > ul.group\/items {
  gap: 0;
  padding-left: 0;
}

/* Whatnot has no tree lines; the folder rows and their dividers carry the
   hierarchy. The indent column is presentational only. */
.t-doc__sidebar .group\/button > .scalar-sidebar-indent {
  display: none;
}

/* Every row, page or folder: no side padding and no pill, with Whatnot's
   12px 0 row padding (page rows tighten it below). The radius only shapes the
   focus ring. */
.t-doc__sidebar .group\/button:is(button, a) {
  padding: 12px 0;
  border-radius: 4px;
  background-color: transparent;
}

/* Keyboard focus: a 2px Whatnot-blue ring outside the row. Rows have no side
   padding, so the theme's inset 1px ring would sit on the first letter. The
   list's 20px side inset leaves room for it inside the scroll container, which
   clips anything wider. */
.t-doc__sidebar .group\/button:is(button, a):focus-visible {
  outline: 2px solid var(--wn-focus);
  outline-offset: 4px;
}

/* Keyboard focus scrolls a row flush with the scroll edge; leave room for the
   ring's 2px width plus 4px offset. */
.t-doc__sidebar > .custom-scroll {
  scroll-padding-block: 8px;
}

/* Page rows (pages, API operations, schemas) reproduce Whatnot's category
   links (For You, Electronics…) in transparent black 40%, 70% on hover, at the
   folders' 16px title size on compact 8px rows with a 20px line. */
.t-doc__sidebar .group\/button:is(button, a):not([aria-expanded]) {
  padding-block: 8px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--wn-link);
}

.t-doc__sidebar .group\/button:is(button, a):not([aria-expanded]):hover {
  color: var(--wn-link-hover);
}

/* Current page reproduces the selected category: bold Whatnot blue, no pill
   and no indicator bar. aria-current also lands on a folder that is itself
   the current page, so leaves are matched with :not([aria-expanded]). */
.t-doc__sidebar .group\/button[aria-current="page"]:not([aria-expanded]) {
  font-weight: 700;
  color: var(--wn-link-active);
}

.t-doc__sidebar .group\/button[aria-current="page"]:not([aria-expanded]):hover {
  color: var(--wn-link-active-hover);
}

/* Folder rows reproduce Whatnot's filter accordion buttons (Time of Show,
   Show Format…): 16px/20px semibold neutral-900. The theme gives the folder
   holding the current page weight 500 and the active colour; Whatnot's filter
   labels have one weight, so that is overridden. Hover eases to the link
   hover colour so folders still answer the pointer. */
.t-doc__sidebar .group\/button[aria-expanded] {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: var(--wn-heading);
}

.t-doc__sidebar .group\/button[aria-expanded]:hover {
  color: var(--wn-link-hover);
}

/* A collapsed folder that hides the current page, and a folder that is the
   current page (an OpenAPI tag page), take the selected-category blue so the
   reader can still find their place. The theme marks the former only with the
   .text-sidebar-c-active class; it has no aria hook. */
.t-doc__sidebar .group\/button[aria-expanded="false"].text-sidebar-c-active,
.t-doc__sidebar .group\/button[aria-expanded][aria-current="page"] {
  color: var(--wn-link-active);
}

.t-doc__sidebar .group\/button[aria-expanded="false"].text-sidebar-c-active:hover,
.t-doc__sidebar .group\/button[aria-expanded][aria-current="page"]:hover {
  color: var(--wn-link-active-hover);
}

/* Accordion divider: Whatnot puts the 1px neutral-100 border on the row's
   wrapper, so an open panel sits inside it and the line closes the panel. The
   group li is that wrapper here. */
.t-doc__sidebar li.group\/item:has(> .group\/group-button) {
  gap: 0;
  border-bottom: 1px solid var(--wn-divider);
}

/* A folder that ends its parent's panel shares the parent's closing line, so
   it draws none of its own instead of doubling it. */
.t-doc__sidebar li > ul.group\/items > li.group\/item:last-child:has(> .group\/group-button) {
  border-bottom: 0;
}

/* Whatnot's 20x20 chevron-down, right-aligned and in the label colour. The
   theme's caret SVG is hidden and Whatnot's path is painted through a mask,
   so the glyph follows `color`. The box keeps the theme's rotate transition;
   open turns it 180deg (chevron up) in place of the theme's 90deg. The sr-only
   "Open Group" / "Close Group" text stays in the box. */
.t-doc__sidebar .group\/button[aria-expanded] > div.size-4 {
  width: 20px;
  height: 20px;
  margin-left: 12px;
  color: inherit;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.293 9.294a1 1 0 0 1 1.414 0L12 13.586l4.293-4.292a1 1 0 1 1 1.414 1.414L13.414 15a2 2 0 0 1-2.828 0l-4.293-4.293a1 1 0 0 1 0-1.414'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.293 9.294a1 1 0 0 1 1.414 0L12 13.586l4.293-4.292a1 1 0 1 1 1.414 1.414L13.414 15a2 2 0 0 1-2.828 0l-4.293-4.293a1 1 0 0 1 0-1.414'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}

.t-doc__sidebar .group\/button[aria-expanded] > div.size-4 > svg {
  display: none;
}

.t-doc__sidebar .group\/button[aria-expanded="true"] > div.size-4 {
  rotate: 180deg;
}

/* Forced colors repaint the mask's background as Canvas, which would hide the
   chevron. */
@media (forced-colors: active) {
  .t-doc__sidebar .group\/button[aria-expanded] > div.size-4 {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}

/* OpenAPI method badges (GET, POST…) on operation rows. Whatnot has no
   equivalent, so they keep the theme's per-method colours (set inline through
   --method-color) and sit a step under Whatnot's 12px small text, at 11px
   in the sidebar font. The box is one label line tall so the badge centres
   on the first line of the 20px label. */
.t-doc__sidebar .group\/button > .sidebar-heading-type {
  height: 20px;
  margin-left: 12px;
  font-family: inherit;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* External link arrow (Support, in the drawer): centred on the 20px line,
   at its own size however long the label is. */
.t-doc__sidebar a.group\/button[target="_blank"] > svg {
  flex: none;
  align-self: center;
}

/* Drawer only: the header links (Documentation, API Reference, Support) form
   a section above the page tree. It closes like Whatnot's category list: the
   last row's 12px padding, a 1px neutral-100 border, then 4px. */
.t-doc__sidebar .group\/sidebar-section > ul {
  gap: 0;
}

/* The drawer section's title row is empty (its label holds a single space,
   so :empty never matches) and would leave a 28px gap above the links. */
.t-doc__sidebar .group\/sidebar-section > div.group\/button:not(:is(button, a)) {
  display: none;
}

.t-doc__sidebar .group\/sidebar-section > .group\/spacer-after {
  height: 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--wn-divider);
}

/* The sidebar footer holds only "Powered by Scalar" (free plan) and the
   colour-mode toggle, which the config hides; the site follows the system
   setting instead. Without either, the bar would be an empty bordered strip.
   It would also carry navigation.sidebar links, which this site does not use. */
.t-doc__sidebar > div.border-t {
  display: none;
}