/* ==========================================================================
   parse-server-kit documentation
   One stylesheet, no framework, no build step.
   ========================================================================== */

:root {
  /* A single accent, kept close to Parse's own blue so the two sit together. */
  --accent: #0b6fb8;
  --accent-soft: #e8f2fa;
  --accent-line: #b8d8ee;

  --ink: #15191e;
  --ink-2: #3d4650;
  --ink-3: #667486;
  --ink-4: #8b97a6;

  --bg: #ffffff;
  --bg-2: #f7f8fa;
  --bg-3: #eef0f4;
  --rule: #e2e6ec;

  --code-bg: #f6f7f9;
  --code-ink: #24292f;

  --warn-bg: #fdf6e7;
  --warn-line: #e8cf94;
  --warn-ink: #6b5310;

  --danger-bg: #fdf0ef;
  --danger-line: #eab8b3;
  --danger-ink: #8a2b21;

  --good-bg: #eef8f1;
  --good-line: #b3ddc1;
  --good-ink: #1d6b38;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --measure: 44rem;
  --sidebar: 16rem;
  --radius: 6px;

  /* Logo. Two layers: the muted spiral is Parse Server, the blue one is this
     library on top of it. Kept as their own tokens rather than reusing
     --accent, so retuning the site's accent cannot quietly restyle the mark. */
  --logo-base: #94a3b8;
  --logo-kit: #2563eb;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #57b0ef;
    --accent-soft: #12222f;
    --accent-line: #234b68;

    --ink: #e6eaf0;
    --ink-2: #b9c2cd;
    --ink-3: #8e9aa8;
    --ink-4: #6c7887;

    --bg: #0f1216;
    --bg-2: #14181e;
    --bg-3: #1b2129;
    --rule: #262d36;

    --code-bg: #14181e;
    --code-ink: #d7dde5;

    --warn-bg: #221c0c;
    --warn-line: #4d3f15;
    --warn-ink: #e8c86a;

    --danger-bg: #241310;
    --danger-line: #56241d;
    --danger-ink: #f0a79c;

    --good-bg: #0f1f15;
    --good-line: #22452f;
    --good-ink: #7fd39a;

    /* #2563EB goes muddy against #0f1216; lift it so the mark stays vivid. */
    --logo-base: #8fa0b5;
    --logo-kit: #5b9dff;
  }
}

:root[data-theme="dark"] {
  --accent: #57b0ef;
  --accent-soft: #12222f;
  --accent-line: #234b68;
  --ink: #e6eaf0;
  --ink-2: #b9c2cd;
  --ink-3: #8e9aa8;
  --ink-4: #6c7887;
  --bg: #0f1216;
  --bg-2: #14181e;
  --bg-3: #1b2129;
  --rule: #262d36;
  --code-bg: #14181e;
  --code-ink: #d7dde5;
  --warn-bg: #221c0c;
  --warn-line: #4d3f15;
  --warn-ink: #e8c86a;
  --danger-bg: #241310;
  --danger-line: #56241d;
  --danger-ink: #f0a79c;
  --good-bg: #0f1f15;
  --good-line: #22452f;
  --good-ink: #7fd39a;
  --logo-base: #8fa0b5;
  --logo-kit: #5b9dff;
}

/* The toggle has to win in both directions: a viewer whose system is dark but
   who chose light explicitly needs the light mark back. */
:root[data-theme="light"] {
  --logo-base: #94a3b8;
  --logo-kit: #2563eb;
}

/* --- base ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.011em;
  margin: 0;
}

h1 {
  font-size: 2.1rem;
  letter-spacing: -0.02em;
}
h2 {
  font-size: 1.4rem;
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
  padding-top: 0.5rem;
}
h3 {
  font-size: 1.08rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
h4 {
  font-size: 0.95rem;
  margin-top: 1.5rem;
  margin-bottom: 0.35rem;
  color: var(--ink-2);
}

p {
  margin: 0 0 1rem;
  color: var(--ink-2);
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

small {
  font-size: 0.85rem;
  color: var(--ink-3);
}

/* anchor links on headings */
.anchor {
  color: var(--ink-4);
  opacity: 0;
  margin-left: 0.4rem;
  font-weight: 400;
  text-decoration: none;
}
h2:hover .anchor,
h3:hover .anchor {
  opacity: 1;
}

/* --- code ---------------------------------------------------------------- */

code {
  font-family: var(--mono);
  font-size: 0.855em;
  background: var(--bg-3);
  color: var(--code-ink);
  padding: 0.15em 0.38em;
  border-radius: 4px;
}

pre {
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 0.855rem;
  line-height: 1.6;
}
pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: var(--code-ink);
}

/* Minimal, hand-rolled token colours. No highlighter dependency. */
.t-key {
  color: #b3306e;
}
.t-str {
  color: #1a7f4b;
}
.t-com {
  color: var(--ink-4);
  font-style: italic;
}
.t-dec {
  color: #8a5cf6;
}
.t-num {
  color: #b45309;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .t-key {
    color: #ff7ab2;
  }
  :root:not([data-theme="light"]) .t-str {
    color: #7ee2a8;
  }
  :root:not([data-theme="light"]) .t-dec {
    color: #c4a7fc;
  }
  :root:not([data-theme="light"]) .t-num {
    color: #f0b866;
  }
}
:root[data-theme="dark"] .t-key {
  color: #ff7ab2;
}
:root[data-theme="dark"] .t-str {
  color: #7ee2a8;
}
:root[data-theme="dark"] .t-dec {
  color: #c4a7fc;
}
:root[data-theme="dark"] .t-num {
  color: #f0b866;
}

/* --- lists & tables ------------------------------------------------------ */

ul,
ol {
  margin: 0 0 1rem;
  padding-left: 1.35rem;
  color: var(--ink-2);
}
li {
  margin-bottom: 0.35rem;
}
li > ul,
li > ol {
  margin-top: 0.35rem;
}

.table-wrap {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}
th,
td {
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
th {
  background: var(--bg-2);
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
tbody tr:last-child td {
  border-bottom: 0;
}
td code {
  white-space: nowrap;
}

/* --- callouts ------------------------------------------------------------ */

.note {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.5rem;
}
.note :last-child {
  margin-bottom: 0;
}
.note-title {
  font-weight: 650;
  color: var(--ink);
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.92rem;
}

.note.warn {
  border-left-color: var(--warn-line);
  background: var(--warn-bg);
}
.note.warn .note-title {
  color: var(--warn-ink);
}
.note.danger {
  border-left-color: var(--danger-line);
  background: var(--danger-bg);
}
.note.danger .note-title {
  color: var(--danger-ink);
}
.note.good {
  border-left-color: var(--good-line);
  background: var(--good-bg);
}
.note.good .note-title {
  color: var(--good-ink);
}

/* --- header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header .inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.brand {
  font-weight: 650;
  color: var(--ink);
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  /* Holds the mark against the wordmark's baseline rather than its line box. */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* The mark. Its viewBox is cropped to the artwork, so height alone sizes it and
   the width follows — no magic numbers to keep in step with the drawing. */
.brand-mark {
  height: 1.55rem;
  width: auto;
  flex: none;
  overflow: visible;
}

/* --- logo animation ------------------------------------------------------
   The mark is two offset spirals: the muted one is Parse Server, the blue one
   is this library on top of it. Both are a SINGLE continuous stroke, which is
   what makes a draw-on read as drawing rather than as a wipe.

   `pathLength="1"` on the paths normalises each one's length to 1, so the dash
   offset animates from 1 to 0 without measuring the real geometry in script.

   Everything here lives inside `prefers-reduced-motion: no-preference`. That
   way the dash offset is never applied at all for someone who asked for no
   motion — they get the finished mark, not a frozen half-drawn one. */

@media (prefers-reduced-motion: no-preference) {
  /* The individual `translate` property, not `transform` — it COMPOSES with the
     group's `transform="translate(-3, -4)"` attribute instead of replacing it.
     Overriding the attribute from CSS would mean restating the resting offset
     here and trusting px to equal a user unit; this way the artwork keeps
     owning its own geometry and CSS only adds a nudge on top. */
  .logo-layer {
    translate: 0 0;
    transition: translate 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
  }

  /* Hover pushes the layer further out. The mark's whole idea is one thing
     sitting on another, so separating them is the one gesture that says
     something rather than just moving. */
  .brand:hover .logo-layer {
    translate: -2.5px -3px;
  }

  /* --- the hero draw-on, once, on load --- */

  .hero-mark .logo-base,
  .hero-mark .logo-kit-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: logo-draw 1.15s cubic-bezier(0.35, 0.1, 0.25, 1) forwards;
  }
  /* The base goes first, so the layering is legible as it happens. */
  .hero-mark .logo-kit-path {
    animation-delay: 0.2s;
  }

  /* The dot arrives once both strokes have landed — the full stop. */
  .hero-mark .logo-dot {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    animation: logo-dot-in 0.42s cubic-bezier(0.2, 1.5, 0.4, 1) 1.15s forwards;
  }
}

@keyframes logo-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes logo-dot-in {
  to {
    transform: scale(1);
  }
}
.brand:hover {
  text-decoration: none;
}
.brand .v {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-4);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.5rem;
  font-weight: 400;
}
.nav {
  display: flex;
  gap: 1.25rem;
  margin-left: auto;
  align-items: center;
  font-size: 0.9rem;
}
.nav a {
  color: var(--ink-2);
}
.nav a:hover,
.nav a[aria-current] {
  color: var(--accent);
  text-decoration: none;
}

/* --- the AI link ---------------------------------------------------------
   Given a tinted pill and a ring that expands out of it every few seconds.
   The ring rather than a blinking dot: a dot sitting in the corner of a nav
   item is the most worn-out signal on the web, and it never stops demanding
   attention. A ring fires, finishes, and leaves a gap. */

.nav a.nav-ai {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.24rem 0.62rem;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 550;
  /* The ring is drawn against this box. */
  position: relative;
}
.nav a.nav-ai .ai-spark {
  width: 13px;
  height: 13px;
  flex: none;
  fill: currentColor;
  animation: ai-twinkle 1.5s ease-in-out infinite;
}
.nav a.nav-ai::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: ai-ring 1.5s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
  /* Never intercepts the click it is advertising. */
  pointer-events: none;
}

/* Once the pointer is on it the signal has done its job, so it stops. */
.nav a.nav-ai:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.nav a.nav-ai:hover::after,
.nav a.nav-ai:hover .ai-spark {
  animation: none;
}
.nav a.nav-ai:hover::after {
  opacity: 0;
}

@keyframes ai-ring {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  55%,
  100% {
    transform: scale(1.42);
    opacity: 0;
  }
}
@keyframes ai-twinkle {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  46% {
    opacity: 0.5;
    transform: scale(0.86);
  }
}

/* On the AI page itself there is nothing left to advertise: keep the pill so
   the current section is obvious, drop the motion. */
.nav a.nav-ai[aria-current]::after {
  animation: none;
  opacity: 0;
}
.nav a.nav-ai[aria-current] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.nav a.nav-ai[aria-current] .ai-spark {
  animation: none;
}

/* Still a pill, still an icon — just no motion. */
@media (prefers-reduced-motion: reduce) {
  .nav a.nav-ai::after {
    animation: none;
    opacity: 0;
  }
  .nav a.nav-ai .ai-spark {
    animation: none;
  }
}
.icon-btn {
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
}
.icon-btn:hover {
  color: var(--accent);
  border-color: var(--accent-line);
}
.menu-btn {
  display: none;
}

/* --- docs layout --------------------------------------------------------- */

.layout {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 3.5rem;
  max-height: calc(100vh - 3.5rem);
  overflow-y: auto;
  padding: 2rem 0 3rem;
  font-size: 0.895rem;
}
.sidebar h5 {
  margin: 1.6rem 0 0.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-4);
  font-weight: 650;
}
.sidebar h5:first-child {
  margin-top: 0;
}
.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar li {
  margin: 0;
}
.sidebar a,
.sidebar summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.7rem;
  color: var(--ink-2);
  border-left: 2px solid transparent;
  margin-left: -0.7rem;
  border-radius: 0 4px 4px 0;
  /* Nudged on hover and when current; the transition keeps that from reading
     as a twitch as the pointer runs down the list. */
  transition: padding-inline-start 0.12s ease;
}
.sidebar a:hover,
.sidebar summary:hover {
  color: var(--accent);
  background: var(--bg-2);
  text-decoration: none;
  padding-inline-start: 0.9rem;
}
.sidebar a[aria-current="page"] {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 550;
  /* Step the label in from the accent bar, so the current page reads as
     indented rather than only tinted. Logical property, so it follows the
     writing direction rather than assuming left-to-right. */
  padding-inline-start: 1.15rem;
}

/* --- sidebar icons -------------------------------------------------------- */

/* The sprite itself is never displayed; only its symbols are referenced. */
.icon-sprite {
  display: none;
}
.ic {
  width: 15px;
  height: 15px;
  flex: none;
  /* currentColor is what makes an icon follow the link's state — muted by
     default, accent on hover and when current — with no extra rules. */
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}
.sidebar a:hover .ic,
.sidebar summary:hover .ic,
.sidebar a[aria-current="page"] .ic {
  opacity: 1;
}

/* --- sidebar submenu ------------------------------------------------------ */

.sidebar details > summary {
  cursor: pointer;
  list-style: none;
  /* Safari draws its own triangle through ::-webkit-details-marker. */
}
.sidebar details > summary::-webkit-details-marker {
  display: none;
}
/* The chevron, drawn in CSS so it can rotate rather than swap glyphs. */
.sidebar details > summary::after {
  content: "";
  width: 0.34rem;
  height: 0.34rem;
  margin-left: auto;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.5;
  transition: transform 0.15s ease;
}
.sidebar details[open] > summary::after {
  transform: rotate(45deg);
}
.sidebar details > ul {
  margin: 0.1rem 0 0.25rem;
  /* Indent the children and run a hairline down them, so the grouping reads
     without a box or a background. */
  padding-left: 1.15rem;
  margin-left: 0.35rem;
  border-left: 1px solid var(--rule);
}
.sidebar details > ul a {
  margin-left: -1.85rem;
  padding-inline-start: 1.85rem;
  font-size: 0.88rem;
}
.sidebar details > ul a:hover {
  padding-inline-start: 2.05rem;
}
.sidebar details > ul a[aria-current="page"] {
  padding-inline-start: 2.3rem;
}

.content {
  padding: 2.5rem 0 5rem;
  max-width: var(--measure);
  min-width: 0;
}
.content > .eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  font-weight: 650;
  margin-bottom: 0.4rem;
}
.lede {
  font-size: 1.06rem;
  color: var(--ink-2);
  margin: 0.75rem 0 2rem;
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
}
.pager a {
  display: block;
  padding: 0.7rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  flex: 1;
  max-width: 48%;
}
.pager a:hover {
  border-color: var(--accent-line);
  text-decoration: none;
}
.pager span {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-4);
  margin-bottom: 0.1rem;
}
.pager .next {
  text-align: right;
  margin-left: auto;
}

/* --- footer -------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--bg-2);
  padding: 2rem 1.5rem;
  font-size: 0.875rem;
  color: var(--ink-3);
}
.site-footer .inner {
  max-width: 78rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
}
.site-footer a {
  color: var(--ink-2);
}
.site-footer .spacer {
  margin-left: auto;
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .menu-btn {
    display: grid;
  }
  .sidebar {
    position: fixed;
    inset: 3.5rem 0 auto 0;
    max-height: calc(100vh - 3.5rem);
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    padding: 1.25rem 1.5rem 2rem;
    display: none;
    z-index: 40;
  }
  .sidebar.open {
    display: block;
  }
  .nav .hide-sm {
    display: none;
  }
  h1 {
    font-size: 1.75rem;
  }
}


/* --- copy button --------------------------------------------------------- */

pre.code-block {
  position: relative;
}
.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  color: var(--ink-3);
  border-radius: 4px;
  font: inherit;
  font-size: 0.72rem;
  font-family: var(--sans);
  padding: 0.15rem 0.45rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
}
pre.code-block:hover .copy-btn,
.copy-btn:focus-visible {
  opacity: 1;
}
.copy-btn:hover {
  color: var(--accent);
  border-color: var(--accent-line);
}

/* --- search -------------------------------------------------------------- */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--ink) 28%, transparent);
  backdrop-filter: blur(2px);
  display: none;
  padding: 8vh 1rem 1rem;
}
.search-overlay.open {
  display: block;
}
.search-panel {
  max-width: 40rem;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.search-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  padding: 0.95rem 1.1rem;
  outline: none;
}
.search-input::placeholder {
  color: var(--ink-4);
}
.search-results {
  max-height: 55vh;
  overflow-y: auto;
}
.search-hit {
  display: block;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}
.search-hit:hover,
.search-hit.active {
  background: var(--accent-soft);
  text-decoration: none;
}
.search-hit-title {
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.94rem;
}
.search-hit-page {
  display: block;
  font-size: 0.74rem;
  color: var(--accent);
  margin: 0.1rem 0 0.2rem;
}
.search-hit-text {
  display: block;
  font-size: 0.83rem;
  color: var(--ink-3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.search-empty {
  padding: 1.1rem;
  margin: 0;
  color: var(--ink-3);
  font-size: 0.9rem;
}
.search-hint {
  padding: 0.55rem 1.1rem;
  font-size: 0.74rem;
  color: var(--ink-4);
  background: var(--bg-2);
  border-top: 1px solid var(--rule);
}
.search-hint kbd {
  font-family: var(--mono);
  font-size: 0.72rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.02rem 0.3rem;
  margin-right: 0.15rem;
  background: var(--bg);
}


/* --- scrollbars ---------------------------------------------------------- */
/* Themed through the same tokens as everything else, so they follow the
   light/dark switch without a second set of rules. Firefox and the standard
   property first; WebKit and Chromium get the finer-grained version. */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 8px;
  /* Inset the thumb so it reads as a slim bar rather than a full-width block. */
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ink-4);
  background-clip: content-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* The sidebar is a quiet surface; keep its bar invisible until it is used. */
.sidebar {
  scrollbar-color: transparent transparent;
}
.sidebar:hover,
.sidebar:focus-within {
  scrollbar-color: var(--rule) transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  background-clip: content-box;
}
.sidebar:hover::-webkit-scrollbar-thumb,
.sidebar:focus-within::-webkit-scrollbar-thumb {
  background: var(--rule);
  background-clip: content-box;
}

/* Code blocks and wide tables scroll horizontally; a shorter bar sits better
   against their border radius. */
pre::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
  height: 8px;
}

/* Search results sit on a raised panel, so the bar can be a little stronger. */
.search-results {
  scrollbar-color: var(--ink-4) transparent;
}
.search-results::-webkit-scrollbar-thumb {
  background: var(--ink-4);
  background-clip: content-box;
}


/* --- request / handler / response exchange ------------------------------- */

.wire {
  margin: 1.5rem 0;
  border-left: 2px solid var(--rule);
  padding-left: 1.1rem;
}
.wire-step + .wire-step {
  margin-top: 0.9rem;
}
.wire-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.12rem 0.5rem;
  border-radius: 3px;
  margin-bottom: 0.4rem;
  /* Pull the pill onto the rail so each step is visibly a beat in a sequence. */
  margin-left: -1.6rem;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink-3);
}
/* Frontend -> backend. */
.wire-tag.req {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}
/* What your code does with it. */
.wire-tag.run {
  border-color: var(--rule);
  background: var(--bg-2);
  color: var(--ink-2);
}
/* Backend -> frontend. */
.wire-tag.res {
  border-color: var(--good-line);
  background: var(--good-bg);
  color: var(--good-ink);
}
/* A rejected exchange: the 4xx a wrong request earns. */
.wire-tag.err {
  border-color: var(--danger-line);
  background: var(--danger-bg);
  color: var(--danger-ink);
}
.wire pre {
  margin: 0;
}
.wire-note {
  margin: 0.45rem 0 0;
  font-size: 0.86rem;
  color: var(--ink-3);
}

@media (max-width: 700px) {
  .wire {
    padding-left: 0.8rem;
  }
  .wire-tag {
    margin-left: -1.3rem;
  }
}