/* -- Docs Content (website · Docs & Help) ---------------------------------
   Presents one documentation topic with explanations and examples - the trail, title, lead, prose with code, callouts and tables, and the next page. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-docs-content, .mk-docs-content *, .mk-docs-content ::before, .mk-docs-content ::after) { box-sizing: border-box; }

  .mk-docs-content { display: grid; gap: 1rem; width: 100%; max-width: 44rem; }
  .mk-docs-content-title { margin: 0; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
  .mk-docs-content-lead { margin: 0; color: var(--muted-foreground); font-size: 1.125rem; line-height: 1.6; text-wrap: pretty; }
  .mk-docs-content-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: var(--muted-foreground); font-size: 0.8125rem;
    & a { display: inline-flex; align-items: center; gap: 0.25rem; color: inherit; }
    & svg { width: 0.875rem; height: 0.875rem; }
  }
  .mk-docs-content-prose {
    line-height: 1.75;

    & > * + * { margin-block-start: 1rem; }
    & h2 { margin-block-start: 2.25rem; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; }
    & h3 { margin-block-start: 1.75rem; font-size: 1.125rem; font-weight: 600; }
    & p, & ul, & ol { margin-block-end: 0; color: color-mix(in oklch, var(--foreground) 85%, var(--muted-foreground)); }
    & li + li { margin-block-start: 0.375rem; }
    & a { color: var(--primary); text-underline-offset: 3px; }
    & :not(pre) > code { padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); background: var(--muted); font-family: var(--font-mono); font-size: 0.875em; }
    & pre { padding: 1rem 1.125rem; overflow-x: auto; border: 0; border-radius: var(--radius-lg); background: oklch(0.18 0.01 260); color: oklch(0.93 0 0); font-size: 0.8125rem; line-height: 1.65; }
    & pre code { padding: 0; border: 0; background: none; color: inherit; font-family: var(--font-mono); }
    & table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
    & th, & td { padding: 0.5rem 0.75rem; border-block-end: 1px solid var(--border); text-align: start; }
    & th { color: var(--muted-foreground); font-weight: 600; }
  }
  .mk-docs-content-callout {
    --_c: oklch(0.6 0.15 250);

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    border-inline-start: 3px solid var(--_c);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: color-mix(in oklab, var(--_c) 8%, var(--background));
    font-size: 0.9375rem;

    & > svg { width: 1.125rem; height: 1.125rem; margin-block-start: 0.2rem; color: var(--_c); }
    & p { margin: 0; }
    & strong { color: var(--_c); }
    &[data-tone="warning"] { --_c: oklch(0.65 0.15 70); }
    &[data-tone="tip"] { --_c: oklch(0.6 0.15 150); }
  }
  .mk-docs-content-pager { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.75rem; margin-block-start: 2rem;
    & a { display: grid; gap: 0.125rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); color: inherit; text-decoration: none; }
    & a:hover { border-color: color-mix(in oklch, var(--foreground) 30%, var(--border)); }
    & a[rel="next"] { text-align: end; }
    & small { color: var(--muted-foreground); font-size: 0.8125rem; }
    & strong { color: var(--primary); }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-docs-content-callout { border-inline-start-color: CanvasText; }
  }
}