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

  /* The way anywhere: a quiet pill naming the account it searches. Bounded,
     because the header centres it between two equal columns and a long account
     name would otherwise push them out of true. */
  .jump {
    max-inline-size: 30ch;

    kbd {
      font-size: var(--text-x-small);
      color: var(--color-ink-faint);
    }
  }

  /* 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;
    }

    /* A parameter, because the trail speaks in two places: "/" in the chrome,
       "‹" on the sheet's toolbar (toolbar.css retunes it). */
    li + li::before {
      content: var(--crumb-separator, "/");
      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);
      }
    }
  }
}