@layer components {
  /* The strip at the top of the sheet — Basecamp's page anatomy
     (docs/planning/basecamp-pm-study.md): 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 sheet's trail is BC's: the project leads in full ink, containers
       follow, stepped with ‹ rather than the chrome's /. */
    .breadcrumbs {
      --crumb-separator: "‹";

      li:first-child {
        font-weight: 600;
        color: var(--color-ink);
      }
    }
  }

  /* A phone-wide sheet: the strip gives back half its air — the title below
     moves up with it (user, 2026-08-24). */
  @container main (max-width: 70ch) {
    .toolbar {
      margin-block-end: var(--block-space-half);
    }
  }
}