/* Anchor links land below the sticky header. */
html {
  scroll-padding-top: 6.5rem;
}

/* The sidebar scrolls on its own without a visible scrollbar. */
.docs-shell__sidebar {
  scrollbar-width: none;
}

.docs-shell__sidebar::-webkit-scrollbar {
  display: none;
}

/* Docs color, from the Wada tokens in application.css: links, list markers and the current page take
   the red pen, and bold text gets a faint highlighter mark. */
.lc-prose {
  /* Body copy a step brighter than the library's muted text, so the page isn't all grey. */
  --tw-prose-body: color-mix(in oklab, var(--foreground) 88%, var(--background));
  --tw-prose-lead: var(--tw-prose-body);
  --tw-prose-links: var(--ezu-shu-text);
  --tw-prose-bullets: color-mix(in oklab, var(--ezu-shu-text) 75%, var(--background));
  --tw-prose-counters: var(--ezu-shu-text);
  --tw-prose-th-borders: color-mix(in oklab, var(--ezu-shu) 60%, var(--background));
}

.lc-prose :where(a):not(:where([class*="no-underline"])) {
  text-decoration-color: color-mix(in oklab, var(--ezu-shu-text) 45%, transparent);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.15s ease;
}

.lc-prose :where(a):not(:where([class*="no-underline"])):hover {
  text-decoration-color: var(--ezu-shu-text);
}

.lc-prose :where(code):not(:where(pre code)) {
  color: color-mix(in oklab, var(--ezu-shu-text) 55%, var(--foreground));
}

/* A name in a table's first column stays whole instead of breaking mid-word. */
.lc-prose td:first-child code {
  overflow-wrap: normal;
  word-break: normal;
}

.lc-prose :where(strong) {
  background: color-mix(in oklab, var(--ezu-ochre) 16%, transparent);
  border-radius: 0.2em;
  padding-inline: 0.15em;
  box-decoration-break: clone;
}

/* The page title is underlined like a route on a picture map: a dotted vermilion path. */
.lc-prose :where(h1) {
  text-decoration: underline dotted var(--ezu-shu);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.28em;
}

/* The current page, in the sidebar and the header. */
[data-slot="nav-link"][aria-current="page"],
header [data-slot="button"][aria-current="page"] {
  background: color-mix(in oklab, var(--ezu-shu) 18%, var(--background)) !important;
  color: var(--ezu-shu-text) !important;
}

[data-slot="nav-group-title"] {
  color: color-mix(in oklab, var(--ezu-shu-text) 70%, var(--foreground));
}