/* Navigation.
   .css-top / .site-header / .header-inner / .brand – sticky header that compacts on scroll
   .desktop-nav, .mobile-nav – main menu (mobile: <details>, opens across the header)
   .nav-dropdown / .nav-dropdown-panel (+ -wide) – native expandable menus, including grouped links
   .catalog-nav – inline section links; .site-footer / .footer-links – footer; .demo-note */
@layer components {
  html:has([data-css-header]) { scroll-padding-block-start: 13rem; }
  .css-top { display: grid; grid-template-rows: auto 7.5rem; position: sticky; inset-block-start: 0; z-index: 20; pointer-events: none; }
  .css-top > .viewport-panel, .css-top .site-header, .css-top > .skip { pointer-events: auto; }
  .css-top > .viewport-panel { grid-row: 1; }
  .css-top .site-header { grid-row: 2; align-self: start; max-block-size: 65svh; overflow: auto; }
  @supports (animation-timeline: scroll()) and (animation-range: 0rem 8rem) {
    @media (prefers-reduced-motion: no-preference) {
      .css-top .header-inner { animation: css-header-padding linear both; }
      .css-top .brand svg { animation: css-header-logo linear both; }
      .css-top .header-inner > .brand { animation: css-header-brand linear both; }
      .css-top .desktop-nav a { animation: css-header-links linear both; }
      .css-top .mobile-nav > summary { animation: css-header-summary linear both; }
      .css-top :is(.header-inner, .brand svg, .header-inner > .brand, .desktop-nav a, .mobile-nav > summary) { animation-duration: auto; animation-timeline: scroll(root block); animation-range: 0rem 8rem; }
    }
  }
  @keyframes css-header-padding { to { padding-block: .15rem; } }
  @keyframes css-header-logo { to { inline-size: 3rem; block-size: 3rem; } }
  @keyframes css-header-brand { to { min-block-size: 3.8rem; } }
  @keyframes css-header-links { to { min-block-size: 3.6rem; padding-block: .4rem; } }
  @keyframes css-header-summary { to { min-block-size: 3.8rem; padding-block: .3rem; } }
  .site-header { border-block-end: .1rem solid var(--line); background: var(--paper); }
  .site-footer > p { text-wrap: pretty; }
  .header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.5rem var(--space-inline); }
  .brand { display: inline-flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 2rem; }
  .brand svg { inline-size: 4rem; block-size: 4rem; }
  .desktop-nav { display: flex; flex-wrap: wrap; gap: 1rem; }
  .nav-dropdown { position: relative; }
  .nav-dropdown > summary { display: flex; align-items: center; gap: 1rem; min-block-size: 4.4rem; padding: .8rem 1rem; list-style: none; }
  .nav-dropdown > summary::-webkit-details-marker { display: none; }
  .nav-dropdown > summary::marker { content: ''; }
  .nav-dropdown > summary::after { content: ''; inline-size: .7rem; block-size: .7rem; border-inline-end: .15rem solid currentColor; border-block-end: .15rem solid currentColor; transform: rotate(45deg); }
  .nav-dropdown[open] > summary::after { transform: rotate(225deg); }
  .nav-dropdown-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 2rem; border: .1rem solid var(--line); background: var(--paper); }
  .nav-dropdown-panel > div { display: grid; align-content: start; gap: .4rem; }
  .nav-dropdown-panel a { display: block; }
  .nav-dropdown-panel p { font-size: var(--small-size); color: var(--muted); padding: .8rem 1rem; }
  .desktop-nav a, .mobile-nav a { padding: .8rem 1rem; text-decoration: none; min-block-size: 4.4rem; display: inline-flex; align-items: center; }
  [aria-current=page], :is(.desktop-nav, .mobile-nav) [aria-current=true] { font-weight: 700; text-decoration: underline !important; }
  .demo-note { padding: 1rem var(--space-inline); font-size: var(--small-size); background: var(--surface); color: var(--muted); }
  .site-footer { border-block-start: .1rem solid var(--line); background: var(--surface); }
  .site-footer .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
  .footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
  .catalog-nav a { min-block-size: 4.4rem; display: inline-flex; align-items: center; }
  @media (width <= 50em) {
    .mobile-nav .nav-dropdown { flex: 1 0 100%; }
    .mobile-nav .nav-dropdown > summary { justify-content: flex-end; padding-inline: 0; }
    .mobile-nav .nav-dropdown-panel { gap: .5rem; padding: 1rem; }
    .css-top { grid-template-rows: auto calc(5.1rem + var(--text-size) * var(--line-height)); }
    .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
    .header-inner > .brand { min-block-size: calc(2rem + var(--text-size) * var(--line-height)); }
    .mobile-nav > summary { box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding-block: 1rem; padding-inline: 0; min-block-size: 4.4rem; list-style: none; }
    .mobile-nav > summary::-webkit-details-marker { display: none; }
    .mobile-nav > summary::marker { content: ''; }
    .mobile-nav > summary::before { content: ''; box-sizing: border-box; inline-size: 1rem; block-size: 1rem; flex: none; border-top: .18rem solid currentColor; border-right: .18rem solid currentColor; transform: rotate(45deg); }
    .mobile-nav:dir(rtl) > summary::before { transform: rotate(225deg); }
    .mobile-nav[open] > summary::before { transform: rotate(135deg); }
    .mobile-nav nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 2rem; margin-inline-start: calc(22rem - 100vw + 2 * var(--space-inline)); padding-block-end: .6rem; }
    .mobile-nav nav a { box-sizing: border-box; font-size: var(--small-size); line-height: 1.4; min-block-size: 3.8rem; padding-block: .6rem; padding-inline: 0; }
    .brand { font-size: 2.4rem; }
    .catalog-nav { gap: 1rem; }
  }
  @media (width > 50em) {
    .desktop-nav .nav-dropdown-panel { position: absolute; z-index: 1; inset-block-start: 100%; inset-inline-start: 0; inline-size: 30rem; max-block-size: 60svh; overflow: auto; }
    .desktop-nav .nav-dropdown-panel-wide { inline-size: 53rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .css-top .site-header:has(.desktop-nav .nav-dropdown[open]) { overflow: visible; }
  }
  @media (height <= 30em) {
    html:has([data-css-header]) { scroll-padding-block-start: 0; }
    .css-top { position: static; grid-template-rows: auto auto; }
    .css-top .site-header { max-block-size: none; }
    .css-top :is(.header-inner, .brand svg, .header-inner > .brand, .desktop-nav a, .mobile-nav > summary) { animation: none; }
    .css-top .header-inner { padding-block: .15rem; }
    .css-top .brand svg { inline-size: 3rem; block-size: 3rem; }
    .css-top .header-inner > .brand { min-block-size: 3.8rem; }
    .css-top .desktop-nav a { min-block-size: 3.6rem; padding-block: .4rem; }
    .css-top .mobile-nav > summary { min-block-size: 3.8rem; padding-block: .3rem; }
  }
  @media print {
    .site-header, .site-footer, .demo-note { display: none; }
    html:has([data-css-header]) { scroll-padding-block-start: 0; }
    .css-top { position: static; grid-template-rows: auto auto; }
    .css-top .site-header { position: static; max-block-size: none; }
    .css-top :is(.header-inner, .brand svg, .header-inner > .brand, .desktop-nav a, .mobile-nav > summary) { animation: none; }
    html { scroll-padding-block-start: 0; }
  }
}