[data-fui-comp="ui-doc-layout"] {
  display: grid;
  grid-template-columns: var(--ui-doc-layout-rail, 220px) minmax(0, 1fr) var(--ui-doc-layout-rail, 220px);
  gap: var(--ui-doc-layout-gap, var(--spacing-2xl, 32px));
  inline-size: 100%;
  min-inline-size: 0;
  max-width: var(--ui-doc-layout-max-width, 1360px);
  margin-inline: auto;
  padding: var(--ui-doc-layout-pad, var(--spacing-xl, 24px));
}
[data-fui-comp="ui-doc-layout"].ui-doc-layout--notoc {
  grid-template-columns: var(--ui-doc-layout-rail, 220px) minmax(0, 1fr);
}
[data-fui-comp="ui-doc-layout"].ui-doc-layout--narrow {
  grid-template-columns: minmax(0, 1fr);
}
[data-fui-comp="ui-doc-layout"] .ui-doc-layout__content {
  max-width: var(--ui-doc-layout-content-max, 720px);
  min-width: 0;
}
[data-fui-comp="ui-doc-layout"].ui-doc-layout--narrow .ui-doc-layout__content {
  margin-inline: auto;
}

/* The Nav slot brings its own styling (e.g. interactive.SectionMenu, which
   ships the sticky rail + mobile sheet). DocLayout only sizes its column. */

/* Breadcrumbs */
[data-fui-comp="ui-doc-layout"] .ui-doc-layout__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-subtle, #71717A);
  margin-bottom: var(--spacing-xl, 24px);
}
[data-fui-comp="ui-doc-layout"] .ui-doc-layout__crumbs a {
  color: var(--ui-doc-layout-crumb-link-color, inherit);
  text-decoration: none;
}
[data-fui-comp="ui-doc-layout"] .ui-doc-layout__crumb-sep { color: var(--ui-doc-layout-crumb-sep-color, inherit); }
[data-fui-comp="ui-doc-layout"] .ui-doc-layout__crumb-current { color: var(--color-text-muted, #52525B); }

/* Prev/next pager */
[data-fui-comp="ui-doc-layout"] .ui-doc-layout__foot {
  margin-top: var(--spacing-2xl, 32px);
  padding-top: var(--spacing-xl, 24px);
  border-top: 1px solid var(--color-border, rgba(0,0,0,0.1));
}
[data-fui-comp="ui-doc-layout"] .ui-doc-layout__foot-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg, 16px);
}
[data-fui-comp="ui-doc-layout"] .ui-doc-layout__prev,
[data-fui-comp="ui-doc-layout"] .ui-doc-layout__next {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 4px);
  padding: var(--spacing-lg, 16px);
  background: var(--color-surface, transparent);
  border: 1px solid var(--color-border, rgba(0,0,0,0.1));
  border-radius: var(--radii-md, 8px);
  text-decoration: none;
}
[data-fui-comp="ui-doc-layout"] .ui-doc-layout__next { text-align: right; }
[data-fui-comp="ui-doc-layout"] .ui-doc-layout__prev:hover,
[data-fui-comp="ui-doc-layout"] .ui-doc-layout__next:hover {
  border-color: var(--color-border-strong, var(--color-border, rgba(0,0,0,0.2)));
}
[data-fui-comp="ui-doc-layout"] .ui-doc-layout__pager-dir {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-subtle, #71717A);
}
[data-fui-comp="ui-doc-layout"] .ui-doc-layout__pager-ttl { color: var(--color-text, #18181B); font-weight: 500; }

/* Collapse to a single column on narrow viewports. The root's explicit
   min-inline-size above is required when DocLayout is itself a flex child;
   otherwise its automatic min-content width can exceed the viewport even
   after the internal grid becomes block layout. */
@media (max-width: 900px) {
  [data-fui-comp="ui-doc-layout"] {
    display: block;
    max-width: none;
    padding: var(--spacing-lg, 16px);
  }
  /* display:block drops the grid gap — restore separation between the
     stacked SectionMenu pill and the article below it. */
  [data-fui-comp="ui-doc-layout"] > * + * { margin-block-start: var(--spacing-xl, 24px); }
  [data-fui-comp="ui-doc-layout"] .ui-doc-layout__content {
    max-width: none;
    overflow-x: hidden;
  }
  [data-fui-comp="ui-doc-layout"] .ui-doc-layout__foot-nav { grid-template-columns: 1fr; }
}