/* Docs-site styles. Same contract as the library: layered, semantic tokens only. */
@layer components {
  /* --- Header ------------------------------------------------------------------ */
  .docs-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-sm);
    padding: calc(var(--space-2xs) - var(--border-width)) var(--space-xs) var(--space-2xs);
    border-block-end: var(--border-width) solid var(--color-border-subtle);
    background-color: var(--color-surface);
  }

  /* On phones the header wraps to two rows; let it scroll away instead of
     covering a quarter of the screen and the top of every jumped-to section. */
  @media (width < 48rem) {
    .docs-header {
      position: static;
    }
  }

  .docs-header__brand {
    font-size: var(--step-1);
    line-height: var(--leading-1);
    font-weight: var(--weight-bold);
    color: var(--color-text-main);
    text-decoration: none;
  }

  .docs-header__brand small {
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
  }

  .docs-search {
    flex: 1 1 12rem;
    max-inline-size: 22rem;
  }

  .docs-header__links {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-inline-start: auto;
    font-size: var(--step--1);
    line-height: var(--leading--1);
  }

  /* --- Sidebar navigation ---------------------------------------------------------- */
  .docs-nav {
    padding: var(--space-xs) var(--space-2xs) var(--space-md) 0;
    border-inline-end: var(--border-width) solid var(--color-border-subtle);
    background-color: var(--color-surface);
  }

  .docs-nav > details > summary {
    padding: var(--space-2xs) var(--space-xs);
    font-weight: var(--weight-semibold);
    cursor: pointer;
  }

  @media (width >= 48rem) {
    .docs-nav > details > summary {
      display: none;
    }
  }

  .docs-nav .nav-list__link {
    min-block-size: var(--control-sm);
    font-size: var(--step--1);
    line-height: var(--leading--1);
  }

  .docs-nav__empty {
    padding: var(--space-2xs) var(--space-xs);
    font-size: var(--step--1);
    line-height: var(--leading--1);
    color: var(--color-text-muted);
  }

  /* --- Main column ------------------------------------------------------------------ */
  .docs-main {
    padding: var(--space-md) var(--space-xs) var(--space-xl);
  }

  @media (width >= 48rem) {
    .docs-main {
      padding-inline: var(--space-lg);
    }
  }

  .docs-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-inline-size: 60rem;
  }

  .docs-part {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    scroll-margin-block-start: calc(var(--shell-header, 3.5rem) + var(--space-xs));
  }

  .docs-part > header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .docs-part > header p {
    max-inline-size: var(--measure);
    color: var(--color-text-muted);
  }

  /* --- One entry ---------------------------------------------------------------------- */
  .doc {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-block-start: calc(var(--space-md) - var(--border-width));
    border-block-start: var(--border-width) solid var(--color-border-subtle);
    scroll-margin-block-start: calc(var(--shell-header, 3.5rem) + var(--space-xs));
  }

  /* Entries receive focus from search; the scroll position already shows
     where you are, so no ring around a whole section. */
  .doc:focus,
  .docs-part:focus {
    outline: none;
  }

  .doc > h3 {
    font-size: var(--step-2);
    line-height: var(--leading-2);
  }

  .doc__summary {
    max-inline-size: var(--measure);
    color: var(--color-text-muted);
  }

  .doc :is(p, li) {
    max-inline-size: var(--measure);
  }

  .doc h4 {
    font-size: var(--step-0);
    line-height: var(--leading-0);
  }

  /* Live example */
  .doc__demo {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-inline-size: 12rem;
    max-inline-size: 100%;
    padding: calc(var(--space-sm) - var(--border-width));
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
  }

  .doc__demo[data-resize] {
    resize: horizontal;
    overflow: hidden;
    border-style: dashed;
    border-color: var(--color-border);
  }

  .doc__demo[data-resize]::after {
    content: "↔ drag corner to resize";
    align-self: flex-end;
    font-size: var(--step--1);
    line-height: var(--leading--1);
    color: var(--color-text-muted);
  }

  /* Code block with copy button */
  .doc__code {
    position: relative;
  }

  .doc__code pre {
    margin: 0;
    padding: var(--space-xs);
    padding-inline-end: var(--space-xl);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-sunken);
    border: var(--border-width) solid var(--color-border-subtle);
    overflow-x: auto;
    font-size: var(--step--1);
    line-height: var(--leading--1);
    tab-size: 2;
  }

  .doc__code pre code {
    font-size: inherit;
    line-height: inherit;
  }

  .doc__copy {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-end: var(--space-2xs);
  }

  /* API tables */
  .doc .table-scroll {
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
  }

  .doc .table {
    font-size: var(--step--1);
    line-height: var(--leading--1);
  }

  .doc .table th[scope="col"] {
    background-color: var(--color-surface-sunken);
  }

  .doc .table td:first-child,
  .doc .table th[scope="row"] {
    white-space: nowrap;
  }

  /* Visible boxes for layout examples (stripped from the copied code). */
  .doc-block {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--space-lg);
    padding: calc(var(--space-2xs) - var(--border-width));
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--color-action-subtle);
    font-size: var(--step--1);
    line-height: var(--leading--1);
    font-weight: var(--weight-semibold);
    text-align: center;
  }

  .doc-block[data-tall] {
    min-block-size: var(--space-2xl);
  }

  /* Token swatch in tables */
  .doc-swatch {
    display: inline-block;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    vertical-align: top;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
  }

  .doc-bar {
    display: block;
    block-size: var(--space-2xs);
    border-radius: var(--radius-sm);
    background-color: var(--color-action);
  }

  @media (forced-colors: active) {
    .doc-bar {
      forced-color-adjust: none;
      background-color: CanvasText;
    }
  }

  /* Native color input, sized to the control scale (32px) to stay on the grid. */
  .doc input[type="color"] {
    flex: none;
    inline-size: var(--control-md);
    block-size: var(--control-sm);
    padding: 0;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
  }
}