/* ==========================================================================
   Aihio docs — application shell
   Monochrome. The page canvas is the token canvas (true white / true black),
   surfaces are one step off it, and everything is separated by hairlines
   rather than by shadow. Colour appears only where it carries state.
   ========================================================================== */

:root {
  --docs-topbar-height: 3.5rem;
  --docs-sidebar-width: 17rem;
  --docs-gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --docs-column: 62rem;
  --docs-measure: 40rem;

  /* Exponential ease-out: fast departure, long settle. The one motion curve
     in the site, so drawer and hover feedback feel like the same hand. */
  --docs-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --docs-hairline: var(--aihio-color-border-subtle);
  --docs-chrome: color-mix(in oklch, var(--aihio-color-page-bg) 72%, transparent);
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
  scroll-behavior: smooth;
  /* Anchored headings must clear the sticky chrome. */
  scroll-padding-top: calc(var(--docs-topbar-height) + 1.5rem);
}

body {
  min-height: 100dvh;
}

a {
  color: inherit;
}

::selection {
  background: var(--aihio-color-page-fg);
  color: var(--aihio-color-page-bg);
}

.docs-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.docs-skip {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.625rem 1rem;
  border-radius: var(--aihio-radius-interactive);
  background: var(--aihio-color-primary-action-bg);
  color: var(--aihio-color-primary-action-fg);
  font-size: var(--aihio-font-size-sm);
  font-weight: var(--aihio-font-weight-control);
  text-decoration: none;
  transform: translateY(-200%);
}

.docs-skip:focus-visible {
  transform: none;
}

/* ==========================================================================
   Top bar
   ========================================================================== */

.docs-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--aihio-spacing-4);
  height: var(--docs-topbar-height);
  padding-inline: var(--docs-gutter);
  border-bottom: 1px solid var(--docs-hairline);
  /* Content scrolls beneath the chrome; the blur is what keeps the bar
     readable over it, not an ornament. */
  background: var(--docs-chrome);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.docs-topbar__lead {
  display: flex;
  align-items: center;
  gap: var(--aihio-spacing-3);
  min-width: 0;
  flex: 1;
}

.docs-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--aihio-spacing-4);
}

.docs-topbar__link {
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-sm);
  font-weight: var(--aihio-font-weight-control);
  text-decoration: none;
  transition: color var(--aihio-duration-feedback) ease;
}

.docs-topbar__link:hover {
  color: var(--aihio-color-page-fg);
}

.docs-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--aihio-spacing-2-5);
  min-width: 0;
  text-decoration: none;
}

.docs-brand__mark {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--aihio-radius-interactive-compact);
  background: var(--aihio-color-primary-action-bg);
  color: var(--aihio-color-primary-action-fg);
  font-size: 0.8125rem;
  font-weight: var(--aihio-font-weight-bold);
  line-height: 1;
}

.docs-brand__name {
  font-size: var(--aihio-font-size-base);
  font-weight: var(--aihio-font-weight-semibold);
  letter-spacing: var(--aihio-letter-spacing-heading);
}

.docs-brand__version {
  padding: 0.125rem 0.4375rem;
  border: 1px solid var(--docs-hairline);
  border-radius: var(--aihio-radius-pill);
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
}

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

.docs-search-trigger__label {
  margin-right: var(--aihio-spacing-3);
}

.docs-search-trigger__key {
  padding: 0 0.3125rem;
  border: 1px solid var(--docs-hairline);
  border-radius: var(--aihio-radius-sm);
  color: var(--aihio-color-muted-fg);
  font-family: var(--aihio-font-family-code);
  font-size: var(--aihio-font-size-xs);
  line-height: 1.4;
}

.docs-search {
  --aihio-dialog-width: 40rem;
}

.docs-search__results {
  display: grid;
  gap: var(--aihio-spacing-4);
  max-height: min(60vh, 32rem);
  margin-top: var(--aihio-spacing-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.docs-search__results:empty {
  display: none;
}

.docs-search__group h3 {
  margin: 0 0 var(--aihio-spacing-1);
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
  font-weight: var(--aihio-font-weight-semibold);
  letter-spacing: var(--aihio-letter-spacing-label);
  text-transform: uppercase;
}

.docs-search__group ul {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-search__link {
  display: grid;
  gap: 0.125rem;
  padding: var(--aihio-spacing-2) var(--aihio-spacing-3);
  border-radius: var(--aihio-radius-interactive);
  text-decoration: none;
}

.docs-search__link:hover,
.docs-search__link:focus-visible {
  background: var(--aihio-color-control-highlight-bg);
}

.docs-search__name {
  font-size: var(--aihio-font-size-sm);
  font-weight: var(--aihio-font-weight-medium);
}

.docs-search__meta {
  display: -webkit-box;
  overflow: hidden;
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
  line-height: var(--aihio-line-height-relaxed);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.docs-search__group:has(.docs-search__suggestion) ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aihio-spacing-2);
}

.docs-search__suggestion {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--docs-hairline);
  border-radius: var(--aihio-radius-pill);
  background: transparent;
  color: inherit;
  font-size: var(--aihio-font-size-xs);
  cursor: pointer;
}

.docs-search__suggestion:hover {
  background: var(--aihio-color-control-highlight-bg);
}

.docs-search__empty {
  margin: 0;
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-sm);
}

/* Segmented theme control ------------------------------------------------ */

.docs-theme {
  display: flex;
  gap: 0.125rem;
  padding: 0.1875rem;
  border-radius: var(--aihio-radius-pill);
  background: var(--aihio-color-muted-bg);
  border: 1px solid var(--docs-hairline);
}

.docs-theme__option {
  padding: 0.25rem 0.6875rem;
  border: 0;
  border-radius: var(--aihio-radius-pill);
  background: transparent;
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
  font-weight: var(--aihio-font-weight-control);
  cursor: pointer;
  transition:
    background-color var(--aihio-duration-feedback) ease,
    color var(--aihio-duration-feedback) ease;
}

.docs-theme__option:hover {
  color: var(--aihio-color-page-fg);
}

.docs-theme__option[aria-pressed='true'] {
  background: var(--aihio-color-page-bg);
  color: var(--aihio-color-page-fg);
  box-shadow: var(--aihio-shadow-surface);
}

/* Drawer toggle ---------------------------------------------------------- */

.docs-navtoggle {
  display: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-left: -0.375rem;
  border: 0;
  border-radius: var(--aihio-radius-interactive-compact);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.docs-navtoggle:hover {
  background: var(--aihio-color-control-highlight-bg);
}

.docs-navtoggle__glyph,
.docs-navtoggle__glyph::before,
.docs-navtoggle__glyph::after {
  display: block;
  width: 1rem;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--aihio-duration-feedback) var(--docs-ease);
}

.docs-navtoggle__glyph {
  position: relative;
}

.docs-navtoggle__glyph::before,
.docs-navtoggle__glyph::after {
  content: '';
  position: absolute;
  left: 0;
}

.docs-navtoggle__glyph::before { transform: translateY(-5px); }
.docs-navtoggle__glyph::after  { transform: translateY(5px); }

[data-nav-open] .docs-navtoggle__glyph { background: transparent; }
[data-nav-open] .docs-navtoggle__glyph::before { transform: rotate(45deg); }
[data-nav-open] .docs-navtoggle__glyph::after  { transform: rotate(-45deg); }

/* ==========================================================================
   Layout
   ========================================================================== */

.docs-layout {
  display: grid;
  grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr);
  align-items: start;
}

.docs-scrim {
  display: none;
}

.docs-sidebar {
  position: sticky;
  top: var(--docs-topbar-height);
  height: calc(100dvh - var(--docs-topbar-height));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--aihio-spacing-6) var(--aihio-spacing-4) var(--aihio-spacing-10);
  border-right: 1px solid var(--docs-hairline);
}

.docs-main {
  min-width: 0;
  padding-inline: var(--docs-gutter);
  /* The detail layout below reflows on the width of this column, not the
     viewport — the sidebar takes 17rem out of the viewport and a media query
     cannot see that. */
  container-type: inline-size;
  container-name: docs-main;
}

.docs-content {
  width: min(100%, var(--docs-column));
  margin-inline: auto;
  padding-block: clamp(2rem, 1.4rem + 2vw, 3.5rem) var(--aihio-spacing-16);
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 2rem + 2vw, 4rem);
}

/* Section is the page's own rhythm unit; nothing inside it may push the
   column wider than the column. */
.docs-content > section {
  min-width: 0;
}

/* ==========================================================================
   Sidebar navigation
   ========================================================================== */

.docs-sidenav {
  display: flex;
  flex-direction: column;
  gap: var(--aihio-spacing-6);
}

.docs-sidenav__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aihio-spacing-2);
  margin: 0 0 var(--aihio-spacing-2);
  padding-inline: var(--aihio-spacing-3);
  color: var(--aihio-color-muted-fg);
  font-size: 0.6875rem;
  font-weight: var(--aihio-font-weight-semibold);
  letter-spacing: var(--aihio-letter-spacing-label);
  text-transform: uppercase;
}

.docs-sidenav__heading a {
  text-decoration: none;
}

.docs-sidenav__heading a:hover {
  color: var(--aihio-color-page-fg);
}

.docs-sidenav__count {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  opacity: 0.7;
}

.docs-sidenav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-sidenav__link {
  display: block;
  padding: 0.375rem var(--aihio-spacing-3);
  border-radius: var(--aihio-radius-interactive);
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-sm);
  text-decoration: none;
  transition:
    background-color var(--aihio-duration-feedback) ease,
    color var(--aihio-duration-feedback) ease;
}

.docs-sidenav__link:hover {
  background: var(--aihio-color-control-highlight-bg);
  color: var(--aihio-color-page-fg);
}

.docs-sidenav__link[aria-current='page'] {
  background: var(--aihio-color-control-highlight-bg);
  color: var(--aihio-color-page-fg);
  font-weight: var(--aihio-font-weight-control);
}

/* ==========================================================================
   Page typography
   ========================================================================== */

.docs-page-intro {
  display: flex;
  flex-direction: column;
  gap: var(--aihio-spacing-4);
}

.docs-page-intro h1 {
  margin: 0;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  font-weight: var(--aihio-font-weight-semibold);
  line-height: 1.08;
  letter-spacing: var(--aihio-letter-spacing-display);
  text-wrap: balance;
}

.docs-lede,
.docs-page-intro > p {
  max-width: var(--docs-measure);
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: var(--aihio-line-height-relaxed);
  color: var(--aihio-color-muted-fg);
  text-wrap: pretty;
}

/* Two classes deep, to outrank the lede rule every intro paragraph gets. */
.docs-page-intro .docs-page-intro__meta,
.docs-page-intro .docs-page-intro__intents {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--aihio-spacing-1) var(--aihio-spacing-3);
  margin: 0;
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-sm);
}

.docs-page-intro__intents > span {
  font-size: var(--aihio-font-size-xs);
  font-weight: var(--aihio-font-weight-medium);
  letter-spacing: var(--aihio-letter-spacing-label);
  text-transform: uppercase;
}

.docs-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--aihio-spacing-4);
  flex-wrap: wrap;
  margin-bottom: var(--aihio-spacing-5);
  padding-bottom: var(--aihio-spacing-4);
  border-bottom: 1px solid var(--docs-hairline);
}

.docs-section-heading > div {
  min-width: 0;
}

/* The heading already ends in a hairline, so a list that starts with one
   would draw it twice. */
.docs-section-heading + :is(.docs-api, .docs-specimens, .docs-measures, .docs-durations, .docs-obligations, .docs-handled, .docs-intents) {
  border-top: 0;
}

.docs-section-heading h1,
.docs-section-heading h2 {
  margin: 0 0 var(--aihio-spacing-2);
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
  font-weight: var(--aihio-font-weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--aihio-letter-spacing-heading);
}

.docs-section-heading p {
  max-width: var(--docs-measure);
  margin: 0;
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-sm);
  line-height: var(--aihio-line-height-relaxed);
  text-wrap: pretty;
}

.docs-muted {
  color: var(--aihio-color-muted-fg);
}

.docs-inline-link {
  color: var(--aihio-color-page-fg);
  font-size: var(--aihio-font-size-sm);
  font-weight: var(--aihio-font-weight-control);
  text-decoration: underline;
  text-decoration-color: var(--docs-hairline);
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--aihio-duration-feedback) ease;
}

.docs-inline-link:hover {
  text-decoration-color: currentColor;
}

/* ==========================================================================
   Grids
   ========================================================================== */

.docs-feature-grid,
.docs-component-grid {
  display: grid;
  gap: var(--aihio-spacing-4);
}

/* Fluid rather than stepped: cards reflow at whatever width they stop
   fitting, so there is no range where the layout is merely tolerable. */
.docs-component-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.docs-feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

/* Grid and flex children default to min-width:auto, which lets a long code
   sample or table set the column width and push the page sideways. */
.docs-feature-grid > *,
.docs-component-grid > * {
  min-width: 0;
}

/* ==========================================================================
   Surfaces
   ========================================================================== */

.docs-feature-card {
  display: block;
  padding: var(--aihio-spacing-5);
  border: 1px solid var(--docs-hairline);
  border-radius: var(--aihio-radius-surface);
  background: var(--aihio-color-surface-bg);
  text-decoration: none;
}

.docs-feature-card h3 {
  margin: 0 0 var(--aihio-spacing-2);
  font-size: var(--aihio-font-size-base);
  font-weight: var(--aihio-font-weight-semibold);
  letter-spacing: var(--aihio-letter-spacing-heading);
}

.docs-feature-card p {
  margin: 0;
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-sm);
  line-height: var(--aihio-line-height-relaxed);
}

.docs-feature-card--link {
  position: relative;
  transition:
    background-color var(--aihio-duration-feedback) ease,
    border-color var(--aihio-duration-feedback) ease;
}

.docs-feature-card--link:hover {
  background: var(--aihio-color-control-highlight-bg);
  border-color: color-mix(in oklch, var(--aihio-color-field-border) 40%, transparent);
}

.docs-feature-card--link h3::after {
  content: ' →';
  color: var(--aihio-color-muted-fg);
}

/* Quick start ------------------------------------------------------------ */

/* Numbered because the order is load-bearing: the stylesheet has to be there
   before the elements upgrade. */
.docs-steps {
  display: grid;
  gap: var(--aihio-spacing-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: docs-step;
}

.docs-step {
  position: relative;
  min-width: 0;
  padding-left: 2.25rem;
  counter-increment: docs-step;
}

.docs-step::before {
  content: counter(docs-step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--docs-hairline);
  border-radius: var(--aihio-radius-pill);
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.docs-step__label {
  margin: 0.1875rem 0 var(--aihio-spacing-3);
  font-size: var(--aihio-font-size-sm);
  font-weight: var(--aihio-font-weight-control);
}

.docs-step .docs-code {
  margin-top: 0;
}

.docs-step__preview {
  margin-top: var(--aihio-spacing-3);
  padding: var(--aihio-spacing-4);
  border: 1px solid var(--docs-hairline);
  border-radius: var(--aihio-radius-surface);
  background: var(--aihio-color-surface-bg);
}

.docs-step__aside {
  max-width: var(--docs-measure);
  margin: var(--aihio-spacing-6) 0 0;
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-sm);
  line-height: var(--aihio-line-height-relaxed);
}

/* ==========================================================================
   Component cards and variants
   ========================================================================== */

/* A component, drawn live above its name. The preview is the point of the
   card, so it gets the room; the facts are one line under it. */
.docs-component-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--docs-hairline);
  border-radius: var(--aihio-radius-surface);
  background: var(--aihio-color-page-bg);
}

.docs-component-card__preview {
  display: grid;
  place-items: center;
  min-height: 9rem;
  padding: var(--aihio-spacing-6) var(--aihio-spacing-5);
  border-bottom: 1px solid var(--docs-hairline);
  border-radius: var(--aihio-radius-surface) var(--aihio-radius-surface) 0 0;
  background: var(--aihio-color-surface-bg);
}

.docs-component-card__preview > * {
  max-width: 100%;
}

.docs-component-card__preview > :is(aihio-field, aihio-alert, aihio-card, aihio-tabs, aihio-stack, aihio-grid, aihio-combobox, aihio-input) {
  width: 100%;
}

/* The preview is a raised surface, so a table drawn on it takes the surface
   pair, as it does in a card. */
.docs-component-card__preview :is(aihio-table, aihio-data-grid) {
  --aihio-table-bg: var(--aihio-color-surface-bg);
  --aihio-table-row-hover-bg: var(--aihio-color-page-bg);
}

.docs-component-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--aihio-spacing-1-5);
  padding: var(--aihio-spacing-4) var(--aihio-spacing-5) var(--aihio-spacing-5);
}

.docs-component-card__title {
  margin: 0;
  font-size: var(--aihio-font-size-base);
  font-weight: var(--aihio-font-weight-semibold);
  letter-spacing: var(--aihio-letter-spacing-heading);
}

.docs-component-card__title a {
  text-decoration: none;
}

.docs-component-card__title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.docs-component-card__description {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-sm);
  line-height: var(--aihio-line-height-relaxed);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.docs-component-card__meta {
  margin: auto 0 0;
  padding-top: var(--aihio-spacing-2);
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
}

/* A pattern drawn at half size: laid out at twice the card's width, then
   scaled, so the thumbnail is the pattern itself rather than a picture of
   it. A transform rather than zoom, which WebKit applies to the width too,
   so its grid laid out at the card's own width, one column. */
.docs-component-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.docs-pattern-card__preview {
  display: block;
  /* The component card centres its preview; engines that align block-level
     children would centre the double-width layout and clip its left half. */
  place-items: normal;
  height: 15rem;
  padding: var(--aihio-spacing-4);
  overflow: hidden;
}

.docs-pattern-card__preview > .docs-pattern-card__scale {
  width: 200%;
  max-width: none;
  transform: scale(0.5);
  transform-origin: 0 0;
}

/* Variants: one cell per value, its attribute written under it. */
.docs-variants {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aihio-spacing-3);
  margin-bottom: var(--aihio-spacing-4);
}

.docs-variants--stack {
  flex-direction: column;
}

.docs-variants--wide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.docs-variant {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--docs-hairline);
  border-radius: var(--aihio-radius-surface);
}

.docs-variant__preview {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 5.5rem;
  padding: var(--aihio-spacing-5);
}

.docs-variants--stack .docs-variant__preview,
.docs-variants--wide .docs-variant__preview {
  place-items: stretch;
}

.docs-variant figcaption {
  padding: var(--aihio-spacing-2) var(--aihio-spacing-3);
  border-top: 1px solid var(--docs-hairline);
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
}

.docs-content .docs-variant figcaption code {
  padding: 0;
  background: none;
}

/* Stand-ins for content in layout previews: the gap is what is on show. */
.docs-sample-box {
  min-width: 2.5rem;
  min-height: 2.5rem;
  border: 1px dashed color-mix(in oklch, var(--aihio-color-field-border) 70%, transparent);
  border-radius: var(--aihio-radius-interactive-compact);
  background: var(--aihio-color-muted-bg);
}

/* ==========================================================================
   Example frames
   ========================================================================== */

/* One column of examples, each a heading over a single frame: the preview on
   the page canvas, the source under a hairline. A frame inside a card inside
   a grid cell left a phone a third of its width for code. */
.docs-examples {
  display: grid;
  gap: var(--aihio-spacing-10);
}

.docs-example {
  min-width: 0;
  scroll-margin-top: calc(var(--docs-topbar-height) + 1rem);
}

.docs-example__title {
  margin: 0 0 var(--aihio-spacing-1);
  font-size: var(--aihio-font-size-base);
  font-weight: var(--aihio-font-weight-semibold);
  letter-spacing: var(--aihio-letter-spacing-heading);
}

.docs-example__description {
  max-width: var(--docs-measure);
  margin: 0 0 var(--aihio-spacing-3);
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-sm);
  line-height: var(--aihio-line-height-relaxed);
  text-wrap: pretty;
}

.docs-example__title + .docs-example__frame {
  margin-top: var(--aihio-spacing-3);
}

.docs-example__frame {
  border: 1px solid var(--docs-hairline);
  border-radius: var(--aihio-radius-surface);
  background: var(--aihio-color-page-bg);
}

.docs-example__preview {
  display: grid;
  /* Grid items stretch by default, which made every inline control in a
     preview render full-bleed and disagree with the code sample beneath it.
     Components that should fill the row set their own width. */
  justify-items: start;
  gap: var(--aihio-spacing-4);
  padding: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
  /* `clip` rather than `auto`: an `auto` on one axis blockifies the other, and
     that was cutting the tops off dropdown menus that are supposed to escape
     the frame. `clip` leaves the block axis genuinely visible. */
  overflow-x: clip;
  overflow-y: visible;
  /* Overlays that escape the frame have to land on top of the source below,
     which is a later sibling and would otherwise paint over them. */
  position: relative;
  z-index: 1;
}

/* The width switch on pattern previews. A narrowed preview keeps its frame
   and shows its edges, so the width it has been given is visible. */
.docs-example__toolbar {
  display: flex;
  justify-content: flex-end;
  padding: var(--aihio-spacing-2) var(--aihio-spacing-3);
  border-bottom: 1px solid var(--docs-hairline);
}

.docs-example__frame > .docs-example__preview {
  max-width: var(--docs-preview-width, none);
  margin-inline: auto;
}

/* A pattern stands in for a section of a page, so it fills the width it is
   given, as it would in one; a grid needs that width to lay out its columns. */
.docs-example__frame--section > .docs-example__preview {
  justify-items: stretch;
}

.docs-example__frame[data-narrowed] > .docs-example__preview {
  border-inline: 1px dashed var(--docs-hairline);
}

.docs-example__frame > .docs-code,
.docs-example__frame > .docs-codeblock > .docs-code,
.docs-example__source {
  border-top: 1px solid var(--docs-hairline);
}

.docs-example__frame .docs-code {
  margin: 0;
  border: 0;
  border-radius: 0 0 var(--aihio-radius-surface) var(--aihio-radius-surface);
}

.docs-example__source > summary {
  padding: var(--aihio-spacing-3) var(--aihio-spacing-4);
  font-size: var(--aihio-font-size-sm);
  font-weight: var(--aihio-font-weight-medium);
  cursor: pointer;
}

.docs-example__source > summary:hover {
  background: var(--aihio-color-control-highlight-bg);
}

.docs-example__source[open] > summary {
  border-bottom: 1px solid var(--docs-hairline);
}

/* Mistakes: the wrong markup as code, with the linter's verdict, beside the
   fix rendered live. Side by side where the column allows; stacked, wrong
   first, where it does not. */
.docs-mistake {
  min-width: 0;
  scroll-margin-top: calc(var(--docs-topbar-height) + 1rem);
}

.docs-mistake__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--aihio-spacing-4);
  margin-top: var(--aihio-spacing-3);
}

.docs-mistake__side {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.docs-mistake__label {
  display: flex;
  align-items: center;
  gap: var(--aihio-spacing-1-5);
  margin: 0 0 var(--aihio-spacing-2);
  font-size: var(--aihio-font-size-xs);
  font-weight: var(--aihio-font-weight-semibold);
  letter-spacing: var(--aihio-letter-spacing-label);
  text-transform: uppercase;
}

.docs-mistake__label::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--aihio-radius-pill);
  background: currentColor;
}

.docs-mistake__side--dont .docs-mistake__label {
  color: var(--aihio-color-destructive-text);
}

.docs-mistake__side--do .docs-mistake__label {
  color: var(--aihio-color-success-text);
}

.docs-mistake__side--dont .docs-code {
  margin: 0;
  border-color: color-mix(in oklch, var(--aihio-color-destructive-bg) 35%, transparent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.docs-mistake__side .docs-codeblock {
  flex: none;
}

/* The fix's frame matches the height of the mistake beside it; the preview
   takes the slack, so the source stays at the foot of the frame. */
.docs-mistake__side--do .docs-example__frame {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.docs-mistake__side--do .docs-example__preview {
  flex: 1;
}

.docs-mistake__lint {
  flex: 1;
  padding: var(--aihio-spacing-3) var(--aihio-spacing-4);
  border: 1px solid color-mix(in oklch, var(--aihio-color-destructive-bg) 35%, transparent);
  border-top: 0;
  border-radius: 0 0 var(--aihio-radius-surface) var(--aihio-radius-surface);
  font-size: var(--aihio-font-size-sm);
  line-height: var(--aihio-line-height-relaxed);
}

.docs-mistake__lint-head {
  margin: 0;
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
}

.docs-mistake__lint ul {
  display: grid;
  gap: var(--aihio-spacing-2);
  margin: var(--aihio-spacing-2) 0 0;
  padding: 0;
  list-style: none;
}

.docs-mistake__lint li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--aihio-spacing-1) var(--aihio-spacing-2);
}

.docs-mistake__severity {
  font-size: var(--aihio-font-size-xs);
  font-weight: var(--aihio-font-weight-semibold);
}

.docs-mistake__severity--error {
  color: var(--aihio-color-destructive-text);
}

.docs-mistake__severity--warn {
  color: var(--aihio-color-warning-text);
}

.docs-mistake__message {
  flex-basis: 100%;
  color: var(--aihio-color-muted-fg);
}

.docs-mistake__suggestion {
  flex-basis: 100%;
  font-size: var(--aihio-font-size-xs);
}

/* What an example form or link would have done, printed by assets/docs.js in
   place of the navigation it would have made. */
.docs-result {
  display: grid;
  gap: var(--aihio-spacing-1);
  margin: 0 var(--aihio-spacing-4) var(--aihio-spacing-4);
  padding: var(--aihio-spacing-3) var(--aihio-spacing-4);
  border: 1px dashed color-mix(in oklch, var(--aihio-color-field-border) 60%, transparent);
  border-radius: var(--aihio-radius-interactive);
  font-size: var(--aihio-font-size-sm);
}

.docs-result__label {
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
  font-weight: var(--aihio-font-weight-control);
  letter-spacing: var(--aihio-letter-spacing-label);
  text-transform: uppercase;
}

.docs-content .docs-result code {
  padding: 0;
  background: none;
  font-family: var(--aihio-font-family-code);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Code blocks ------------------------------------------------------------- */

.docs-codeblock {
  position: relative;
}

.docs-code {
  margin: var(--aihio-spacing-3) 0 0;
  padding: var(--aihio-spacing-4);
  overflow-x: auto;
  border: 1px solid var(--docs-hairline);
  border-radius: var(--aihio-radius-surface);
  background: var(--aihio-color-muted-bg);
  color: var(--aihio-color-page-fg);
}

.docs-codeblock > .docs-code {
  margin-top: 0;
}

/* Long lines scroll rather than wrap: a wrapped line of markup breaks at the
   hyphen in a tag name (</aihio- / button>), which reads as two tags. */
.docs-code code {
  font-family: var(--aihio-font-family-code);
  font-size: 0.8125rem;
  line-height: 1.7;
  white-space: pre;
}

/* Monochrome highlighting: tags carry weight, attribute names step back, and
   values sit in between, so structure reads without a colour of its own. */
.docs-code .hl-tag {
  font-weight: var(--aihio-font-weight-semibold);
}

.docs-code .hl-attr,
.docs-code .hl-punct,
.docs-code .hl-comment {
  color: var(--aihio-color-muted-fg);
}

.docs-code .hl-comment {
  font-style: italic;
}

.docs-copy {
  position: absolute;
  top: var(--aihio-spacing-2);
  right: var(--aihio-spacing-2);
  z-index: 1;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--docs-hairline);
  border-radius: var(--aihio-radius-interactive-compact);
  background: var(--aihio-color-page-bg);
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
  font-weight: var(--aihio-font-weight-medium);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--aihio-duration-feedback) ease;
}

.docs-codeblock:hover .docs-copy,
.docs-copy:focus-visible,
.docs-copy[data-copied] {
  opacity: 1;
}

@media (hover: none) {
  .docs-copy {
    opacity: 1;
  }
}

.docs-copy--inline {
  position: static;
  opacity: 1;
}

.docs-copy:hover {
  color: var(--aihio-color-page-fg);
}

/* Inline code inside prose reads as a token, not as a block. */
.docs-content :not(pre) > code {
  padding: 0.1em 0.35em;
  border-radius: var(--aihio-radius-sm);
  background: var(--aihio-color-muted-bg);
  font-family: var(--aihio-font-family-code);
  font-size: 0.875em;
}

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

.docs-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aihio-spacing-1) var(--aihio-spacing-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-toc a {
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-sm);
  text-decoration: none;
}

.docs-toc a:hover {
  color: var(--aihio-color-page-fg);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.docs-content > section[id] {
  scroll-margin-top: calc(var(--docs-topbar-height) + 1.5rem);
}

/* ==========================================================================
   Tables and lists
   ========================================================================== */

/* Token swatches carry the value itself, so the reference shows the colour
   rather than describing it. The ring keeps a swatch that matches the page
   canvas — and the semi-transparent scrim — visible. */
.docs-swatch {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--aihio-radius-sm);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--aihio-color-page-fg) 16%, transparent);
}

.docs-table__swatch-cell {
  width: 1px;
  padding-right: 0;
}

/* A CSS variable name broken across two lines is unreadable and unsearchable,
   so the token tables keep their columns and let the wrapper scroll. */
.docs-table--tokens {
  min-width: 44rem;
}

.docs-table--tokens code {
  white-space: nowrap;
}

.docs-tablewrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.docs-table {
  width: 100%;
  min-width: 22rem;
  border-collapse: collapse;
  font-size: var(--aihio-font-size-sm);
}

.docs-table th,
.docs-table td {
  padding: var(--aihio-spacing-3);
  border-bottom: 1px solid var(--docs-hairline);
  text-align: left;
  vertical-align: top;
}

.docs-table tr:last-child td {
  border-bottom: 0;
}

.docs-table th {
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
  font-weight: var(--aihio-font-weight-control);
  letter-spacing: var(--aihio-letter-spacing-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.docs-table__detail {
  margin-top: 0.25rem;
  color: var(--aihio-color-muted-fg);
}

/* API reference ---------------------------------------------------------- */

/* One row per attribute, property, method, or event: the name in a column of
   its own, what it takes beside it, and what it does underneath. A list
   rather than a table, so nothing is cut off when the column narrows. */
.docs-api__heading {
  margin: var(--aihio-spacing-8) 0 var(--aihio-spacing-2);
  font-size: var(--aihio-font-size-base);
  font-weight: var(--aihio-font-weight-semibold);
  letter-spacing: var(--aihio-letter-spacing-heading);
}

.docs-api__heading:first-child,
.docs-section-heading + .docs-api__heading {
  margin-top: 0;
}

.docs-api__intro {
  max-width: var(--docs-measure);
  margin: 0 0 var(--aihio-spacing-3);
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-sm);
  line-height: var(--aihio-line-height-relaxed);
}

.docs-api {
  margin: 0;
  border-top: 1px solid var(--docs-hairline);
}

.docs-api__row {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  column-gap: var(--aihio-spacing-6);
  row-gap: var(--aihio-spacing-1);
  padding-block: var(--aihio-spacing-3);
  border-bottom: 1px solid var(--docs-hairline);
  font-size: var(--aihio-font-size-sm);
  line-height: var(--aihio-line-height-relaxed);
}

.docs-api__row > dt {
  grid-row: span 2;
  min-width: 0;
  overflow-wrap: anywhere;
}

.docs-api__row > dd {
  grid-column: 2;
  min-width: 0;
  margin: 0;
}

/* A signature is too long for the name column, so it takes the whole row. */
.docs-api__row--wide {
  grid-template-columns: minmax(0, 1fr);
}

.docs-api__row--wide > dt {
  grid-row: auto;
}

.docs-api__row--wide > dd {
  grid-column: 1;
}

.docs-api__type {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--aihio-spacing-1) var(--aihio-spacing-1-5);
}

.docs-api__kind,
.docs-api__default {
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
}

.docs-api__default {
  margin-left: auto;
}

.docs-api__description {
  color: var(--aihio-color-muted-fg);
  text-wrap: pretty;
}

.docs-code-link {
  text-decoration: none;
}

.docs-code-link code {
  text-decoration: underline;
  text-decoration-color: var(--docs-hairline);
  text-underline-offset: 0.25em;
}

.docs-code-link:hover code {
  text-decoration-color: currentColor;
}

.docs-subcomponent {
  padding-block: var(--aihio-spacing-6) var(--aihio-spacing-2);
  scroll-margin-top: calc(var(--docs-topbar-height) + 1rem);
}

.docs-subcomponent + .docs-subcomponent {
  border-top: 1px solid var(--docs-hairline);
}

.docs-subcomponent:first-of-type {
  padding-top: 0;
}

.docs-subcomponent :is(h3, h4) {
  margin: 0 0 var(--aihio-spacing-2);
  font-size: var(--aihio-font-size-lg);
}

.docs-subcomponent__description {
  max-width: var(--docs-measure);
  margin: 0 0 var(--aihio-spacing-4);
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-sm);
  line-height: var(--aihio-line-height-relaxed);
}

.docs-subcomponent:target :is(h3, h4) code {
  background: var(--aihio-color-control-highlight-bg);
}

.docs-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aihio-spacing-2) var(--aihio-spacing-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@container docs-main (max-width: 36rem) {
  .docs-api__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs-api__row > dt {
    grid-row: auto;
  }

  .docs-api__row > dd {
    grid-column: 1;
  }

  .docs-api__default {
    margin-left: 0;
  }
}

/* Accessibility ------------------------------------------------------------ */

.docs-obligations,
.docs-handled {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--docs-hairline);
}

.docs-obligations__item,
.docs-handled li {
  padding-block: var(--aihio-spacing-3);
  border-bottom: 1px solid var(--docs-hairline);
  font-size: var(--aihio-font-size-sm);
  line-height: var(--aihio-line-height-relaxed);
}

.docs-obligations__item p {
  max-width: 48rem;
  margin: 0;
}

.docs-obligations__when {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--aihio-spacing-2);
  font-weight: var(--aihio-font-weight-medium);
}

.docs-obligations__requirement {
  margin-top: var(--aihio-spacing-1) !important;
}

.docs-obligations__rule {
  margin-top: var(--aihio-spacing-1) !important;
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
}

.docs-handled li {
  color: var(--aihio-color-muted-fg);
}

/* A worked sample under a reference list. */
.docs-ai-sample {
  margin-top: var(--aihio-spacing-8);
}

/* Intents ---------------------------------------------------------------- */

/* A glossary, not a card wall: each intent, what it means, and what serves
   it, on one line where the column allows. */
.docs-intents {
  margin: 0;
  border-top: 1px solid var(--docs-hairline);
}

.docs-intents__row {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--aihio-spacing-4);
  padding-block: var(--aihio-spacing-3);
  border-bottom: 1px solid var(--docs-hairline);
  scroll-margin-top: calc(var(--docs-topbar-height) + 1rem);
}

.docs-intents__row:target {
  background: var(--aihio-color-control-highlight-bg);
}

.docs-intents dt,
.docs-intents dd {
  margin: 0;
  min-width: 0;
  font-size: var(--aihio-font-size-sm);
  line-height: var(--aihio-line-height-relaxed);
}

.docs-intents__meaning {
  color: var(--aihio-color-muted-fg);
}

.docs-intents__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aihio-spacing-1) var(--aihio-spacing-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-intents__links--patterns {
  margin-top: var(--aihio-spacing-1);
}

.docs-intents__links--patterns .docs-inline-link {
  color: var(--aihio-color-muted-fg);
  font-weight: var(--aihio-font-weight-normal);
}

@container docs-main (max-width: 40rem) {
  .docs-intents__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--aihio-spacing-1);
  }
}

/* ==========================================================================
   Foundations
   ========================================================================== */

/* Semantic colours: a light and a dark swatch, each drawn by the token inside
   a data-theme subtree, beside its name, source, and purpose. */
.docs-colors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
  gap: 0 var(--aihio-spacing-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-color {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--aihio-spacing-4);
  align-items: start;
  padding-block: var(--aihio-spacing-3);
  border-bottom: 1px solid var(--docs-hairline);
}

.docs-color__swatches {
  display: flex;
}

.docs-color__theme {
  display: block;
  padding: 0.375rem;
  background: var(--aihio-color-page-bg);
}

.docs-color__theme:first-child {
  border-radius: var(--aihio-radius-interactive) 0 0 var(--aihio-radius-interactive);
}

.docs-color__theme:last-child {
  border-radius: 0 var(--aihio-radius-interactive) var(--aihio-radius-interactive) 0;
}

.docs-color__theme--both {
  /* A translucent colour needs something behind it to show its alpha. */
  background: repeating-conic-gradient(var(--aihio-color-zinc-200) 0 25%, var(--aihio-color-zinc-0) 0 50%) 0 0 / 0.75rem 0.75rem;
}

.docs-color__swatch {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--aihio-radius-interactive-compact);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--aihio-color-page-fg) 14%, transparent);
}

.docs-color__text {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
  font-size: var(--aihio-font-size-sm);
  line-height: var(--aihio-line-height-relaxed);
}

.docs-color__text code {
  overflow-wrap: anywhere;
}

.docs-color__source {
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
}

.docs-color__text p {
  margin: 0;
  color: var(--aihio-color-muted-fg);
}

/* Contrast samples, drawn in their own theme. */
.docs-contrast {
  display: inline-flex;
  align-items: center;
  gap: var(--aihio-spacing-2);
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border-radius: var(--aihio-radius-interactive);
  background: var(--aihio-color-page-bg);
  color: var(--aihio-color-page-fg);
  box-shadow: inset 0 0 0 1px var(--aihio-color-border-subtle);
}

.docs-contrast__sample {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--aihio-radius-interactive-compact);
  font-weight: var(--aihio-font-weight-semibold);
}

.docs-contrast__sample--boundary {
  border: 2px solid;
}

.docs-contrast__ratio {
  font-size: var(--aihio-font-size-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.docs-table--contrast {
  min-width: 36rem;
}

.docs-table--contrast td {
  vertical-align: middle;
}

/* Primitive ramps. */
.docs-ramp {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
  gap: var(--aihio-spacing-1);
  margin: 0 0 var(--aihio-spacing-4);
  padding: 0;
  list-style: none;
}

.docs-ramp__step {
  display: grid;
  gap: var(--aihio-spacing-1);
}

.docs-ramp__swatch {
  display: block;
  height: 3rem;
  border-radius: var(--aihio-radius-interactive-compact);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--aihio-color-page-fg) 12%, transparent);
}

.docs-ramp__label {
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
  font-variant-numeric: tabular-nums;
}

/* Type specimens. */
.docs-specimens {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--docs-hairline);
}

.docs-specimen {
  padding-block: var(--aihio-spacing-4);
  border-bottom: 1px solid var(--docs-hairline);
}

.docs-specimens--compact {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--aihio-spacing-8);
  border-top: 0;
}

.docs-specimens--compact .docs-specimen {
  border-bottom: 0;
}

.docs-specimen__sample {
  margin: 0;
  overflow-wrap: anywhere;
}

.docs-specimen__sample--paragraph {
  max-width: var(--docs-measure);
  font-size: var(--aihio-font-size-sm);
}

.docs-specimen__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--aihio-spacing-1) var(--aihio-spacing-2);
  margin: var(--aihio-spacing-2) 0 0;
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
  line-height: var(--aihio-line-height-relaxed);
}

/* Spacing bars. */
.docs-measures {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--docs-hairline);
}

.docs-measure {
  display: grid;
  grid-template-columns: 6rem minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--aihio-spacing-4);
  align-items: center;
  padding-block: var(--aihio-spacing-2);
  border-bottom: 1px solid var(--docs-hairline);
  font-size: var(--aihio-font-size-sm);
}

.docs-measure__bar {
  display: block;
  min-width: 1px;
  height: 0.75rem;
  border-radius: 1px;
  background: var(--aihio-color-primary-action-bg);
}

.docs-measure__text code {
  overflow-wrap: anywhere;
}

.docs-measure__description {
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
}

/* Radius and shadow samples. */
.docs-shapes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--aihio-spacing-6) var(--aihio-spacing-4);
  margin: 0 0 var(--aihio-spacing-4);
  padding: 0;
  list-style: none;
}

.docs-shapes--compact {
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}

.docs-shape {
  display: grid;
  gap: var(--aihio-spacing-1);
  align-content: start;
  font-size: var(--aihio-font-size-xs);
}

.docs-shape__sample {
  display: block;
  height: 4.5rem;
  margin-bottom: var(--aihio-spacing-2);
  border: 1px solid var(--docs-hairline);
  background: var(--aihio-color-surface-bg);
}

.docs-shape__sample--raised {
  border-radius: var(--aihio-radius-surface);
  background: var(--aihio-color-overlay-bg);
}

.docs-shape__description {
  color: var(--aihio-color-muted-fg);
  line-height: var(--aihio-line-height-relaxed);
}

/* Durations: the dot crosses its track at the token's pace on hover. */
.docs-durations {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--docs-hairline);
}

.docs-duration {
  display: grid;
  grid-template-columns: 8rem minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--aihio-spacing-4);
  align-items: center;
  padding-block: var(--aihio-spacing-3);
  border-bottom: 1px solid var(--docs-hairline);
  font-size: var(--aihio-font-size-sm);
}

.docs-duration__track {
  position: relative;
  display: block;
  height: 0.75rem;
  border-radius: var(--aihio-radius-pill);
  background: var(--aihio-color-muted-bg);
}

.docs-duration__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--aihio-radius-pill);
  background: var(--aihio-color-primary-action-bg);
  transition-property: left;
  transition-timing-function: ease;
}

.docs-duration:hover .docs-duration__dot {
  left: calc(100% - 0.75rem);
}

.docs-duration__description {
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-xs);
}

@container docs-main (max-width: 40rem) {
  .docs-measure,
  .docs-duration {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--aihio-spacing-1);
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.docs-footer {
  display: flex;
  flex-direction: column;
  gap: var(--aihio-spacing-1);
  padding-block: var(--aihio-spacing-6) var(--aihio-spacing-10);
  border-top: 1px solid var(--docs-hairline);
  color: var(--aihio-color-muted-fg);
  font-size: var(--aihio-font-size-sm);
}

.docs-footer p {
  margin: 0;
}

.docs-footer strong {
  color: var(--aihio-color-page-fg);
}

.docs-footer__note {
  max-width: var(--docs-measure);
}

/* ==========================================================================
   Drawer (below the sidebar breakpoint)
   ========================================================================== */

@media (max-width: 63.999rem) {
  .docs-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs-navtoggle {
    display: grid;
  }

  .docs-sidebar {
    position: fixed;
    top: var(--docs-topbar-height);
    left: 0;
    bottom: 0;
    z-index: 45;
    width: min(19rem, 82vw);
    height: auto;
    padding-block: var(--aihio-spacing-5) var(--aihio-spacing-10);
    background: var(--aihio-color-page-bg);
    visibility: hidden;
    transform: translateX(-100%);
    transition:
      transform 0.32s var(--docs-ease),
      visibility 0.32s;
  }

  [data-nav-open] .docs-sidebar {
    visibility: visible;
    transform: none;
  }

  .docs-scrim {
    display: block;
    position: fixed;
    inset: var(--docs-topbar-height) 0 0;
    z-index: 40;
    /* Lighter than the modal scrim: 40% of its 0.8 alpha. */
    background: color-mix(in oklch, var(--aihio-color-overlay-scrim) 40%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .docs-scrim[hidden] {
    display: none;
  }

  /* The drawer owns the viewport while it is open. */
  [data-nav-open] {
    overflow: hidden;
  }
}

.docs-theme--drawer {
  display: none;
}

@media (max-width: 39.999rem) {
  .docs-topbar .docs-theme {
    display: none;
  }

  .docs-theme--drawer {
    display: flex;
    width: fit-content;
    margin: var(--aihio-spacing-8) var(--aihio-spacing-3) 0;
  }
}

@media (max-width: 30rem) {
  .docs-topbar__link,
  .docs-search-trigger__key {
    display: none;
  }

  .docs-search-trigger__label {
    margin-right: 0;
  }

  .docs-brand__version {
    display: none;
  }

  .docs-theme__option {
    padding-inline: 0.5rem;
  }

}

/* ==========================================================================
   Motion and forced colours
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .docs-sidebar,
  .docs-navtoggle__glyph,
  .docs-navtoggle__glyph::before,
  .docs-navtoggle__glyph::after {
    transition-duration: 1ms;
  }
}

@media (forced-colors: active) {
  .docs-topbar,
  .docs-sidebar,
  .docs-feature-card,
  .docs-component-card,
  .docs-code,
  .docs-theme,
  .docs-example__frame,
  .docs-variant {
    border-color: CanvasText;
  }

  .docs-sidenav__link[aria-current='page'],
  .docs-theme__option[aria-pressed='true'] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}