/* The site chrome is built with Vanilla Breeze itself — header.site, nav.horizontal.pills,
   layout-grid/layout-card, .button, .breadcrumb, .lead are all styled by vanilla-breeze.css.
   Only the api-table styling (a docs-site concern, not in the component bundle) lives here. */

.props-table { width: 100%; border-collapse: collapse; margin-block: var(--size-m, 1rem); font-size: var(--font-size-sm, 0.9rem); }
.props-table th, .props-table td { text-align: start; padding: var(--size-2xs, 0.4rem) var(--size-s, 0.6rem); border-block-end: 1px solid var(--color-border, currentColor); vertical-align: top; }
.props-table thead th { border-block-end-width: 2px; }

/* Footer chrome comes from vanilla-breeze's layered footer.minimal recipe
   (plus the @scope'd doc-page chrome in docs.css) — no unlayered footer
   rules here; they'd override VB's layered recipes. */

/* Mobile header: mobile-menu's JS hides sibling <nav>/<site-tools> below its
   breakpoint, but our primary nav is wrapped in <nav-bar>, which its selector
   misses — so the desktop nav stayed visible and wrapped on phones. Hide it on
   the same signal the JS uses (it sets [data-mobile] when below the breakpoint),
   so only the hamburger shows. (Root cause is in core mobile-menu; this is the
   self-contained fix for the vendored bundle — see bead vanilla-breeze-kcc5.) */
header.site:has(mobile-menu[data-mobile]) > nav-bar { display: none; }