@layer components {
  /* ====================================================================
     Nav chrome, list rows and data tables
     ==================================================================== */
  .brand {
    font-size: var(--text-normal);
    font-weight: 600;
    color: var(--color-ink);
  }

  /* The way anywhere: the logo, with no box until the pointer finds it — the
     quiet button's wash is the whole hover. The chevron turns over while the
     palette hangs open, asked of the palette itself rather than told by a
     controller. */
  .jump {
    --btn-border-color: transparent;

    .icon--logo {
      --icon-size: 1.5rem;
    }

    &:has(+ :popover-open) .icon--chevron-down {
      scale: 1 -1;
    }
  }

  /* chrome, not prose: the trail stays ink-subtle and undecorated so it never
     competes with the page title, and the ‹ is fainter than the names. */
  .breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    list-style: none;
    padding: 0;
    min-inline-size: 0;
    font-size: var(--text-small);
    color: var(--color-ink-subtle);

    li {
      display: flex;
      align-items: center;
      gap: var(--inline-space-half);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* One trail, stepped with ‹ wherever it stands (HANSHI, "One strip on
       every page"). */
    li + li::before {
      content: "‹";
      color: var(--color-ink-faint);
    }

    /* The ellipsis has to sit on the LINK. `text-overflow` is a block-container
       property and the <li> above is a flex container, so there it clipped the
       name mid-letter instead — invisible until the sheet's trail had to share
       its strip with an Edit (2026-08-29). */
    a {
      min-inline-size: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      color: inherit;
      text-decoration: none;

      &:hover {
        color: var(--color-ink);
      }
    }
  }
}