@layer blocks {
  /* Hang is a stack in the margin. Cluster is for the narrow sheet, where
     this is the original horizontal picker again. */
  .search > .margin-nav ul {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0;
  }

  @container (width < 52rem) {
    .search > .margin-nav {
      margin-block-end: var(--space-2xs);
    }

    .search > .margin-nav h4 {
      border: 0;
      clip: rect(0 0 0 0);
      height: 0;
      margin: 0;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
      white-space: nowrap;
    }

    .search > .margin-nav ul {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-2xs);
    }

    /* Same current mark as the hanging nav, sitting under the name. */
    .search > .margin-nav .nav-link[data-state="current"]::after,
    .search > .margin-nav .nav-link[aria-current]::after {
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: 50%;
      translate: -50% 0;
    }
  }
}