/* app-content: layout glue for the directory, guides and blog pages (worker/marketing/content.ts). Tokens only; the look comes from
   the design system's breadcrumb, card, citation-sources, status-badge and banner-callout. */

.x-crumbs { padding-block-start: var(--ds-space-6); }
.x-page-head { padding-block-start: var(--ds-space-8); }
.x-cards { list-style: none; padding: 0; margin-block-start: var(--ds-space-4); }
.x-cards > li { display: flex; }
.x-card { flex: 1; text-decoration: none; }
.x-card h3 { color: var(--ds-ink); }
a.x-card:hover h3, a.x-card:focus-visible h3 { text-decoration: underline; text-underline-offset: 0.2em; }
.x-sec__intro { max-inline-size: 60ch; }
.x-sec > .ds-container > .ds-citation-sources { max-inline-size: var(--ds-container-prose); margin-inline: auto; }

/* page navigation: the design-system toc layout holds the breadcrumb, head and article. Below 1100 px the toc bar sits under the h1 at prose width;
   from 1100 px the rail is the right column and the prose containers inside align to the layout's left edge (the layout carries the page gutter). */
.x-toc-layout > .ds-toc { inline-size: min(100% - 2 * var(--ds-gutter-page), var(--ds-container-prose)); margin-inline: auto; }
@media (min-width: 1100px) {
  .x-toc-layout > .ds-toc { inline-size: auto; margin-inline: 0; }
  .x-toc-layout .ds-container { padding-inline: 0; margin-inline: 0; }
}