[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, 48px));
  max-width: var(--ui-doc-layout-max-width, 1360px);
  margin-inline: auto;
  padding: var(--ui-doc-layout-pad, var(--spacing-xl, 32px));
}
[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: 11px;
  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, 48px);
  padding-top: var(--spacing-xl, 32px);
  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: 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(--radius-md, 6px);
  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: 11px;
  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. A grid track resolves to
   its content's min-content and overflows; display:block lets each child take
   the container width and the content scroll internally. */
@media (max-width: 900px) {
  [data-fui-comp="ui-doc-layout"] {
    display: block;
    max-width: none;
    padding: var(--spacing-lg, 24px);
  }
  /* 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, 28px); }
  [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; }
}