@layer components {
  /* The strip at the top of the sheet — Basecamp's page anatomy
     (docs/planning/basecamp-pm-study.md), on every page below a section
     (HANSHI, "One strip on every page"): where you stand at the start (the
     trail, or the project's own faces), the star and the ⋯ at the end, the
     title below on the page itself. The hairline is earned: it separates the
     sheet's chrome from the sheet's content. */
  .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inline-space);
    min-block-size: 2rem;
    padding-block-end: var(--block-space-half);
    border-block-end: var(--border);
    margin-block-end: var(--block-space);

    /* The place leads in full ink — the project, the directory, the list,
       the mailbox — with its section before it and the containers after it
       quiet. */
    .breadcrumbs__place {
      font-weight: 600;
      color: var(--color-ink);
    }
  }

  /* A finger's target: the trail's links stand as tall as a tab's. */
  @media (any-hover: none) {
    .toolbar .breadcrumbs a {
      line-height: 2.75rem;
    }
  }

  /* A phone-wide sheet: the strip gives back half its air — the title below
     moves up with it (user, 2026-08-24) — and its trail keeps one step up,
     the last link, led by the ‹ it is stepped with, as a way back reads
     (owner, 2026-10-21). Me's own page names itself there, a word and not a
     link, so it takes no ‹. */
  @container main (max-width: 70ch) {
    .toolbar {
      margin-block-end: var(--block-space-half);

      .breadcrumbs li:not(:last-child) {
        display: none;
      }

      .breadcrumbs li:last-child:has(a) {
        font-size: var(--text-normal);
        font-weight: 500;
        color: var(--color-ink);

        &::before {
          content: "‹";
          font-size: 1.4em;
          line-height: 1;
          color: var(--color-ink-subtle);
        }
      }
    }
  }
}