/* =========================================================================
   AgencyDash — documentation library

   Layered on top of the marketing site's stylesheet, which is linked first and
   carries the palette, the type scale, the buttons, the header and the footer.
   Nothing here redefines a colour token: if the product's palette moves, it
   moves in one place (src/app/globals.css -> landing/styles.css) and this
   sheet follows for free.

   What this file adds is only what a documentation library needs and a
   marketing page does not — a three-column reading layout, a sidebar, an
   on-this-page rail, prose styles, screenshot figures, callouts and search.
   ========================================================================= */

/* ---------- Shell ---------- */

.docs-body {
  /* The sticky header is 4rem; anchored headings must clear it plus a little
     breathing room, or a deep link lands with the heading under the bar. */
  --header-h: 4rem;
  --side-w: 17rem;
  --toc-w: 15rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.875rem;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

.docs-shell {
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .docs-shell {
    grid-template-columns: var(--side-w) minmax(0, 1fr);
  }
}

@media (min-width: 1360px) {
  .docs-shell {
    grid-template-columns: var(--side-w) minmax(0, 1fr) var(--toc-w);
    gap: 3rem;
  }
  /* The index has no on-this-page rail, so it must not reserve a column for
     one — otherwise the reading column is squeezed for nothing. */
  .docs-shell-wide {
    grid-template-columns: var(--side-w) minmax(0, 1fr);
  }
}

/* The wordmark picks up a small "Docs" tag so the header says which site you
   are on without needing a second row of navigation. */
.wordmark-tag {
  margin-left: 0.1rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--primary) 12%, transparent);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The internal build is a different artefact that looks identical, which is
   exactly how a screenshot of it ends up in a public deck. The tag is the one
   place it says so on every page. */
.wordmark-tag.is-internal {
  border-color: color-mix(in oklch, var(--warning) 55%, var(--border));
  background: color-mix(in oklch, var(--warning) 18%, transparent);
  color: var(--warning);
}

/* ---------- Header search button ---------- */

.search-trigger {
  display: none;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklch, var(--muted) 55%, transparent);
  color: var(--muted-foreground);
  font-family: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}

.search-trigger:hover {
  border-color: color-mix(in oklch, var(--primary) 45%, var(--border));
  color: var(--foreground);
}

@media (min-width: 720px) {
  .search-trigger {
    display: inline-flex;
    min-width: 12rem;
  }
  .search-trigger span {
    flex: 1;
    text-align: left;
  }
}

kbd {
  display: inline-block;
  min-width: 1.4rem;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 0.375rem;
  background: var(--card);
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.3;
  text-align: center;
}

/* ---------- Sidebar ---------- */

.docs-sidebar {
  position: sticky;
  top: var(--header-h);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding-block: 2rem 3rem;
  scrollbar-width: thin;
}

.docs-sidebar::-webkit-scrollbar {
  width: 6px;
}

.docs-sidebar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.side-home {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  transition: background-color 0.18s, color 0.18s;
}

.side-home:hover,
.side-home.is-current {
  background: var(--muted);
  color: var(--foreground);
}

.side-group + .side-group {
  margin-top: 0.25rem;
}

.side-group-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s;
}

.side-group-toggle:hover {
  background: var(--muted);
}

.side-group-toggle span {
  flex: 1;
}

.side-caret {
  color: var(--muted-foreground);
  transition: transform 0.18s;
}

.side-group[data-open="true"] .side-caret {
  transform: rotate(90deg);
}

.side-group ul {
  display: none;
  margin: 0.125rem 0 0.5rem;
  padding-left: 1.4rem;
  border-left: 1px solid var(--border);
  margin-left: 1.15rem;
}

.side-group[data-open="true"] ul {
  display: block;
}

.side-group li a {
  display: block;
  padding: 0.3rem 0.6rem;
  margin-left: -0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
  transition: background-color 0.18s, color 0.18s;
}

.side-group li a:hover {
  background: var(--muted);
  color: var(--foreground);
}

.side-group li a[aria-current="page"] {
  background: color-mix(in oklch, var(--primary) 12%, transparent);
  color: var(--primary);
  font-weight: 600;
}

/* Sidebar as a drawer, below the two-column breakpoint. */

.side-open {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.docs-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgb(0 0 0 / 0.45);
}

@media (max-width: 1023px) {
  .docs-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    width: min(20rem, 86vw);
    max-height: none;
    padding: 1.5rem 1rem 3rem;
    background: var(--background);
    border-right: 1px solid var(--border);
    transform: translateX(-102%);
    transition: transform 0.22s ease;
  }
  .docs-sidebar[data-open="true"] {
    transform: none;
  }
}

@media (min-width: 1024px) {
  .side-open,
  .docs-sidebar-backdrop {
    display: none !important;
  }
}

/* ---------- Main column ---------- */

.docs-main {
  min-width: 0;
  padding-block: 2.5rem 4rem;
}

.docs-crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.docs-crumbs a {
  color: var(--primary);
}

.docs-crumbs a:hover {
  text-decoration: underline;
}

.doc h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.doc-lede {
  margin-top: 0.9rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  max-width: 46rem;
}

/* ---------- Prose ---------- */

.doc {
  max-width: 52rem;
}

.doc h2 {
  position: relative;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.doc h3 {
  position: relative;
  margin-top: 2.25rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.doc h4 {
  margin-top: 1.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

.heading-anchor {
  position: absolute;
  left: -1.25rem;
  color: var(--border);
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.doc h2:hover .heading-anchor,
.doc h3:hover .heading-anchor,
.heading-anchor:focus {
  opacity: 1;
  color: var(--primary);
}

@media (max-width: 720px) {
  .heading-anchor {
    display: none;
  }
}

.doc p,
.doc ul,
.doc ol,
.doc dl {
  margin-top: 1rem;
  line-height: 1.7;
}

.doc p,
.doc li {
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
}

.doc ul,
.doc ol {
  padding-left: 1.35rem;
}

.doc ul {
  list-style: disc;
}

.doc ol {
  list-style: decimal;
}

.doc li + li {
  margin-top: 0.4rem;
}

.doc li > ul,
.doc li > ol {
  margin-top: 0.4rem;
}

.doc a:not(.btn):not(.heading-anchor):not(.shot-link):not(.card) {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--primary) 35%, transparent);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.18s;
}

.doc a:not(.btn):not(.heading-anchor):not(.shot-link):not(.card):hover {
  text-decoration-color: var(--primary);
}

.doc strong {
  font-weight: 700;
  color: var(--foreground);
}

.doc code {
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: color-mix(in oklch, var(--muted) 65%, transparent);
  font-family: var(--font-mono);
  font-size: 0.8125em;
  word-break: break-word;
}

.doc pre {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.65;
}

.doc pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
}

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

.doc blockquote {
  margin-top: 1.25rem;
  padding-left: 1.15rem;
  border-left: 3px solid var(--primary);
  color: var(--muted-foreground);
  font-style: italic;
}

/* ---------- Tables ---------- */

.table-scroll {
  margin-top: 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.doc table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.doc thead th {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--muted) 50%, transparent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.doc tbody td,
.doc tbody th {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

.doc tbody th {
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
}

/* An address or a permission key in a cell reads as one token; letting it wrap
   mid-string turns a hostname into three lines of nonsense. The wrapper
   scrolls instead. */
.doc td code,
.doc th code {
  white-space: nowrap;
}

.doc tbody tr:hover {
  background: color-mix(in oklch, var(--muted) 32%, transparent);
}

/* A permission matrix: many narrow tick columns against one wide label column.
   The header row rotates nothing and wraps instead — rotated headers are
   unreadable at this size and unreadable to a screen reader at any size. */
.doc table.matrix thead th:not(:first-child) {
  white-space: normal;
  min-width: 6.5rem;
  text-align: center;
}

.doc table.matrix tbody td {
  text-align: center;
  font-size: 1rem;
}

.doc table.matrix tbody th {
  white-space: nowrap;
  position: sticky;
  left: 0;
  background: var(--background);
}

.doc table .yes {
  color: var(--success);
  font-weight: 700;
}

.doc table .no {
  color: var(--muted-foreground);
}

/* A permission key, a route, or any other identifier read verbatim off a
   screen. Monospace so a hyphen is never mistaken for an en dash. */
.key {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 1px solid color-mix(in oklch, var(--primary) 30%, var(--border));
  border-radius: 0.375rem;
  background: color-mix(in oklch, var(--primary) 10%, transparent);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
}

/* ---------- Callouts ---------- */

.note {
  display: flex;
  gap: 0.85rem;
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--muted) 40%, transparent);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.note > .icon {
  flex-shrink: 0;
  margin-top: 0.2rem;
  font-size: 1.05rem;
  color: var(--muted-foreground);
}

.note > div > :first-child {
  margin-top: 0;
}

.note p {
  margin-top: 0.6rem;
}

.note-title {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 700;
  color: var(--foreground);
}

.note.info {
  border-left-color: var(--info);
}
.note.info > .icon {
  color: var(--info);
}

.note.tip {
  border-left-color: var(--success);
}
.note.tip > .icon {
  color: var(--success);
}

.note.warn {
  border-left-color: var(--warning);
  background: color-mix(in oklch, var(--warning) 9%, transparent);
}
.note.warn > .icon {
  color: var(--warning);
}

.note.danger {
  border-left-color: var(--destructive);
  background: color-mix(in oklch, var(--destructive) 9%, transparent);
}
.note.danger > .icon {
  color: var(--destructive);
}

/* Permission requirement line, at the top of a section that needs one. */
.requires {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.6rem 0.85rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.requires b {
  color: var(--foreground);
  font-weight: 600;
}

/* ---------- Screenshots ---------- */

.shot {
  margin-top: 1.75rem;
}

.shot-link {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.shot-link:hover {
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
  box-shadow: var(--shadow-xl);
}

.shot img {
  width: 100%;
  height: auto;
  display: block;
}

.shot figcaption {
  margin-top: 0.65rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* Wide screenshots are allowed to break the prose measure on big screens —
   a Kanban board or a wide table is unreadable at 52rem. */
@media (min-width: 1120px) {
  .shot-wide {
    width: calc(100% + 8rem);
    max-width: none;
    margin-inline: -4rem;
  }
}

@media (min-width: 1360px) {
  .shot-wide {
    width: calc(100% + 4rem);
    margin-inline: -2rem;
  }
}

.shot-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 3.5rem 1.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--muted) 35%, transparent);
  color: var(--muted-foreground);
  font-size: 0.8125rem;
}

/* ---------- Numbered walkthroughs ---------- */

.steps {
  margin-top: 1.5rem;
  padding-left: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  position: relative;
  padding-left: 2.75rem;
  padding-bottom: 1.5rem;
  counter-increment: step;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The rail joining the markers. Stops at the last one so the line does not
   dangle past the final step. */
.steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 1.9rem;
  bottom: 0.15rem;
  width: 1px;
  background: var(--border);
}

.steps > li + li {
  margin-top: 0;
}

.steps > li > :first-child {
  margin-top: 0;
}

.steps strong:first-child {
  color: var(--foreground);
}

/* ---------- Definition lists ---------- */

.doc dl {
  display: grid;
  gap: 0;
}

.doc dt {
  margin-top: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
}

.doc dd {
  margin-top: 0.35rem;
  line-height: 1.7;
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
}

/* ---------- Index page cards ---------- */

.section-cards {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .section-cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* A card, not a link — the card contains links, and an <a> inside an <a> is
   invalid HTML that browsers silently split into two elements. The heading
   carries the link instead, and ::after stretches it over the whole card so
   the whole surface is still clickable. */
.section-card {
  position: relative;
  display: block;
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.section-card:hover {
  border-color: color-mix(in oklch, var(--primary) 45%, var(--border));
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.section-card .card-title {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
}

.section-card .card-title .icon {
  font-size: 1.15rem;
  color: var(--primary);
}

.section-card .card-title a {
  color: inherit !important;
  text-decoration: none !important;
}

.section-card .card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* The chips sit above that stretched overlay so they stay individually
   clickable. */
.section-card ul {
  position: relative;
  z-index: 1;
}

.section-card > p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.section-card ul {
  margin-top: 0.9rem;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.section-card li {
  margin-top: 0 !important;
}

.section-card li a {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklch, var(--muted) 45%, transparent);
  font-size: 0.75rem;
  color: var(--muted-foreground) !important;
  text-decoration: none !important;
  transition: border-color 0.18s, color 0.18s;
}

.section-card li a:hover {
  border-color: var(--primary);
  color: var(--primary) !important;
}

/* ---------- On this page ---------- */

.docs-toc {
  display: none;
}

@media (min-width: 1360px) {
  .docs-toc {
    display: block;
    position: sticky;
    top: var(--header-h);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding-block: 3.25rem 3rem;
    scrollbar-width: thin;
  }
}

.toc-title {
  margin-bottom: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.docs-toc ul {
  list-style: none;
  border-left: 1px solid var(--border);
}

.docs-toc li a {
  display: block;
  padding: 0.28rem 0 0.28rem 0.85rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
  transition: color 0.18s, border-color 0.18s;
}

.docs-toc li a:hover {
  color: var(--foreground);
}

.docs-toc li.toc-l3 a {
  padding-left: 1.65rem;
  font-size: 0.78125rem;
}

.docs-toc li a.is-active {
  border-left-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

/* ---------- Pager ---------- */

.docs-pager {
  display: grid;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  grid-template-columns: 1fr 1fr;
  max-width: 52rem;
}

.pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  transition: border-color 0.18s, box-shadow 0.18s;
}

.pager-link.is-empty {
  border: 0;
  background: none;
}

.pager-link:not(.is-empty):hover {
  border-color: color-mix(in oklch, var(--primary) 45%, var(--border));
  box-shadow: var(--shadow-lg);
}

.pager-dir {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.pager-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--foreground);
}

.pager-next {
  text-align: right;
}

.pager-next .pager-dir {
  flex-direction: row-reverse;
}

/* ---------- Search ---------- */

.search-dialog {
  width: min(40rem, 92vw);
  margin-top: 8vh;
  margin-inline: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-xl);
}

.search-dialog::backdrop {
  background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(3px);
}

.search-field {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}

.search-field > .icon {
  font-size: 1.1rem;
  color: var(--muted-foreground);
}

#search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  outline: none;
}

#search-input::-webkit-search-cancel-button {
  display: none;
}

.search-results {
  list-style: none;
  max-height: min(28rem, 55vh);
  overflow-y: auto;
  padding: 0.4rem;
}

.search-results:empty {
  display: none;
}

.search-results li a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  color: inherit;
}

.search-results li a:hover,
.search-results li[data-active="true"] a {
  background: color-mix(in oklch, var(--primary) 12%, transparent);
}

.search-results .r-section {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}

.search-results .r-title {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.search-results .r-text {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted-foreground);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.search-results mark {
  padding: 0 0.1em;
  border-radius: 0.2rem;
  background: color-mix(in oklch, var(--primary) 26%, transparent);
  color: inherit;
}

.search-empty {
  padding: 1.75rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.search-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* ---------- Print ---------- */

@media print {
  .site-header,
  .docs-sidebar,
  .docs-toc,
  .docs-pager,
  .side-open,
  .site-footer,
  .skip-link {
    display: none !important;
  }
  .docs-shell {
    display: block;
    padding: 0;
  }
  .doc {
    max-width: none;
  }
  .shot-link {
    box-shadow: none;
  }
}