@layer components {
  .brand-mark {
    display: block;
    flex: none;
    object-fit: contain;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    color: inherit;
    text-decoration: none;
    min-inline-size: 0;
    padding: 0;
    border: thin solid transparent;
    border-radius: var(--radius-s);
    background: none;
    font: inherit;
    text-align: start;
    cursor: pointer;
    touch-action: manipulation;

    .brand-mark {
      inline-size: 2.4em;
      block-size: 2.4em;
    }

    strong {
      display: block;
      font-family: var(--font-display);
      font-size: var(--step-1);
      letter-spacing: -0.02em;
    }

    small {
      display: block;
      color: var(--muted);
      font-size: var(--step-00);
    }

    &:focus-visible {
      outline: var(--stroke) solid var(--paprika);
      outline-offset: 0.15em;
    }
  }

  .site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-s);
    min-inline-size: 0;

    a,
    .account-toggle {
      display: inline-flex;
      align-items: center;
      flex: none;
      min-block-size: var(--touch);
      border: 0;
      border-block-end: var(--stroke) solid transparent;
      background: none;
      color: inherit;
      text-decoration: none;
      font-weight: 600;
      white-space: nowrap;
    }

    > a[aria-current="page"],
    .account-toggle[aria-current="page"] {
      border-block-end-color: currentColor;
    }
  }

  /* The hamburger follows the main links and owns the secondary navigation. */
  .account {
    display: contents;
  }

  .account-toggle {
    justify-content: center;
    gap: var(--space-xs);
    min-inline-size: var(--touch);
    padding-inline: var(--space-2xs);
    cursor: pointer;
    touch-action: manipulation;

    .glyph {
      inline-size: 1.2em;
      block-size: 1.2em;
    }
  }

  /* Phone: brand first; primary links and the hamburger follow below. */
  .site-header > .site-nav {
    flex: 1 1 100%;
  }

  .account-menu.meter-sheet {
    .account-links {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }

    .account-links a,
    .account-links .out {
      display: flex;
      align-items: center;
      min-block-size: var(--touch);
      padding-inline: var(--space-s);
      border-radius: var(--radius-s);
      color: var(--ink);
      font-weight: 600;
      text-decoration: none;
      text-underline-offset: 0.15em;
    }

    .account-links a[aria-current="page"] {
      background: color-mix(in oklch, var(--ink) 8%, transparent);
    }

    .account-links .out {
      margin: 0;
      margin-block-start: var(--space-xs);
      border: thin solid var(--mist);
      background: none;
      font: inherit;
      color: var(--muted);
      cursor: pointer;
      touch-action: manipulation;
    }

    form.button_to { margin: 0; }
  }

  @media (min-width: 48rem) {
    /* Equal side tracks keep the navigation in the middle. */
    .site-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: var(--space-m);
    }

    .brand {
      grid-column: 1;
      grid-row: 1;
      justify-self: start;
    }

    .site-nav {
      grid-column: 2;
      grid-row: 1;
      justify-content: center;
    }

    .site-header > .site-nav {
      flex: none;
    }

    /* Dropdown under the hamburger — not a centred modal like meter tips. */
    .account-menu.meter-sheet[popover] {
      --sheet-size: min(16rem, calc(100vw - 2 * var(--gutter)));
      inset: auto;
      inset-block-start: anchor(bottom);
      inset-inline-start: auto;
      inset-inline-end: max(var(--gutter), anchor(end));
      margin-block-start: var(--space-2xs);
      translate: 0;
      inline-size: var(--sheet-size);
      max-inline-size: var(--sheet-size);
      padding: var(--space-s) var(--space-m) var(--space-m);
      border: thin solid color-mix(in oklch, var(--ink) 16%, var(--mist));
      border-radius: var(--radius);
      box-shadow: 0 0.4rem 1.2rem color-mix(in oklch, var(--ink) 18%, transparent);

      &:popover-open { translate: 0; }

      &::backdrop {
        background: color-mix(in oklch, var(--ink) 20%, transparent);
        pointer-events: auto;
      }

      .sheet-grab { display: none; }

      .sheet-close { display: none; }
    }

    @starting-style {
      .account-menu.meter-sheet[popover]:popover-open { translate: 0; }
    }
  }
}