/* Component docs pages (/components/…), generated by landing/tools/components.mjs. Layout only, on top of landing.css. */
@layer page {
  .doc { padding-block: 1.75rem 5rem; }
  .doc-article, .doc-index-head { max-width: 52rem; }
  .doc a { color: var(--mv-accent-fg); }
  .doc p, .doc li { color: var(--mv-fg-muted); line-height: 1.7; }
  .doc strong { color: var(--mv-fg); font-weight: 600; }
  .doc code { padding: .1em .35em; border-radius: var(--mv-radius-xs); background: var(--mv-bg-muted); color: var(--mv-fg); font-size: .85em; overflow-wrap: anywhere; }

  .doc-crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: .8125rem; color: var(--mv-fg-subtle); }
  .doc-crumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .6; }
  .doc-crumbs a { color: var(--mv-fg-muted); text-decoration: none; }
  .doc-crumbs a:hover { color: var(--mv-fg); }

  .doc h1 { margin: 0 0 1rem; font: 800 clamp(2rem, 1.4rem + 2.4vw, 3rem)/1.1 var(--mv-font-display); letter-spacing: -.04em; overflow-wrap: anywhere; }
  .doc h1 code { font-size: .5em; letter-spacing: 0; vertical-align: .35em; color: var(--mv-accent-fg); }
  .doc h2 { margin: 2.75rem 0 .9rem; font-size: 1.4rem; letter-spacing: -.02em; scroll-margin-top: 5rem; }
  .doc h3 { margin: 1.75rem 0 .6rem; font-size: 1.05rem; scroll-margin-top: 5rem; }
  .doc ul { padding-left: 1.2rem; }
  .doc-lead { margin: 0 0 1.5rem; font-size: 1.05rem; color: var(--mv-fg) !important; }
  .doc-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }

  .doc-table { margin: 1rem 0; overflow-x: auto; border: 1px solid var(--mv-border); border-radius: var(--mv-radius-lg); }
  .doc table { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.55; }
  .doc th, .doc td { padding: .6rem .8rem; border-bottom: 1px solid var(--mv-border); text-align: left; vertical-align: top; color: var(--mv-fg-muted); }
  .doc tr:last-child > * { border-bottom: 0; }
  .doc thead th { background: var(--mv-bg-subtle); color: var(--mv-fg); font-weight: 600; white-space: nowrap; }
  .doc td:first-child code { white-space: nowrap; overflow-wrap: normal; }
  .doc-facts th { width: 8.5rem; color: var(--mv-fg-subtle); font-weight: 500; }
  .doc-facts td { overflow-wrap: anywhere; }
  @media (max-width: 560px) { .doc-facts th { width: 5.5rem; } .doc th, .doc td { padding: .55rem .65rem; } }

  .doc-code { position: relative; margin: 1rem 0; border: 1px solid var(--mv-border); border-radius: var(--mv-radius-lg); background: var(--mv-bg-subtle); }
  .doc-code pre { margin: 0; padding: 1rem 3.5rem 1rem 1rem; max-height: 32rem; overflow: auto; font: .8125rem/1.6 var(--mv-font-mono); tab-size: 2; }
  .doc-code pre code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; }
  .doc-code mv-copy-button { position: absolute; top: .4rem; right: .4rem; }

  .doc-get { margin: 2.25rem 0 0; padding: 1.1rem 1.25rem; border: 1px solid color-mix(in oklch, var(--mv-accent) 40%, var(--mv-border)); border-radius: var(--mv-radius-xl); background: color-mix(in oklch, var(--mv-accent) 7%, var(--mv-surface)); }
  .doc-get p { margin: 0; }
  .doc-get .doc-get-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
  .doc-get .mv-button { color: inherit; }
  .doc-get .mv-button:not([data-variant]) { color: var(--mv-fg-on-accent); }

  /* Index */
  .doc-index-head .doc-lead { margin-bottom: .5rem; }
  .doc-filter { display: block; max-width: 28rem; margin-top: 1.5rem; }
  .doc-filter input { width: 100%; }
  .doc-toc { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.25rem; }
  .doc-toc a { padding: .25rem .65rem; border: 1px solid var(--mv-border); border-radius: var(--mv-radius-full); color: var(--mv-fg-muted); font-size: .8125rem; text-decoration: none; }
  .doc-toc a:hover { color: var(--mv-fg); border-color: var(--mv-border-strong); }
  .doc-toc span { color: var(--mv-fg-subtle); }
  .doc-group { margin-top: 2.75rem; scroll-margin-top: 5rem; }
  .doc-group h2 { margin: 0 0 1rem; }
  .doc-group h2 .muted { font-weight: 400; }
  .doc .doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
  .doc-cards a { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; height: 100%; box-sizing: border-box; padding: 1rem; border: 1px solid var(--mv-border); border-radius: var(--mv-radius-lg); background: var(--mv-surface); color: inherit; text-decoration: none; transition: border-color .2s, background-color .2s; }
  .doc-cards a:hover { border-color: color-mix(in oklch, var(--mv-accent) 55%, var(--mv-border)); background: var(--mv-bg-subtle); }
  .doc-cards a:focus-visible { outline: 2px solid var(--mv-ring); outline-offset: 2px; }
  .doc-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
  .doc-card-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; color: var(--mv-fg-muted); font-size: .8125rem; line-height: 1.5; }
}