@scope (htmlpress-header) {
  :scope {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    height: 4rem;
    padding: 0 0.25rem 0 1rem;
    border-bottom: 1px solid var(--htmlpress-border);
    background: var(--htmlpress-bg);
    view-transition-name: htmlpress-header;
  }
  :scope htmlpress-brand,
  :scope htmlpress-nav-toggle {
    display: none;
  }
  :root[data-scripted] :scope htmlpress-nav-toggle {
    display: block;
    margin-right: 1rem;
  }
  :root:not(:has(#htmlpress-sidebar)) :scope htmlpress-nav-toggle {
    display: none;
  }
  :scope htmlpress-links {
    flex: 1;
    align-self: stretch;
  }
  :scope htmlpress-search,
  :scope htmlpress-theme-toggle {
    margin-left: auto;
  }
  /* Search, when the layout has it, takes the push to the right edge */
  :scope htmlpress-search ~ htmlpress-theme-toggle {
    margin-left: 0.25rem;
  }
  :scope :is(htmlpress-search, htmlpress-theme-toggle) ~ htmlpress-language,
  :scope
    :is(htmlpress-search, htmlpress-theme-toggle, htmlpress-language)
    ~ htmlpress-shortcuts {
    margin-left: 0.25rem;
  }

  /* Once the aside shows, the search icon meets its left edge: the aside's 14rem, the
     page's 2.5rem padding and the search's own padding and border, less this padding
     and the 2.25rem each control after the search takes */
  @media (width > 80rem) {
    :scope {
      --header-language: 0rem;
      --header-shortcuts: 0rem;
    }
    :scope:has(> htmlpress-language) {
      --header-language: 2.25rem;
    }
    :scope:has(> htmlpress-shortcuts) {
      --header-shortcuts: 2.25rem;
    }
    :scope htmlpress-search {
      width: calc(
        16.875rem + 1px - 2.25rem - var(--header-language) - var(--header-shortcuts)
      );
    }
    :scope htmlpress-search > button {
      width: 100%;
    }
  }

  /* Livemark's phone header: the brand, then search, theme, language and the menu at
     the far end; the links move into the drawer's sections */
  @media (max-width: 56rem) {
    :scope {
      gap: 0.25rem;
      padding: 0 0.5rem 0 1rem;
    }
    :scope htmlpress-brand {
      display: block;
      flex: 0 1 auto;
      min-width: 0;
      margin-right: auto;
    }
    :scope htmlpress-links {
      display: none;
    }
    :root[data-scripted] :scope htmlpress-nav-toggle {
      order: 1;
      margin-right: 0;
    }
    :scope htmlpress-search ~ htmlpress-theme-toggle,
    :scope :is(htmlpress-search, htmlpress-theme-toggle) ~ htmlpress-language,
    :scope
      :is(htmlpress-search, htmlpress-theme-toggle, htmlpress-language)
      ~ htmlpress-shortcuts {
      margin-left: 0;
    }
  }
}