@layer components {
  .masthead {
    position: sticky;
    top: 0;
    z-index: 10;
    /* The tint runs up under the status bar; the content does not. */
    padding-top: var(--safe-top);
    background: light-dark(rgb(252 251 248 / 88%), rgb(19 20 23 / 88%));
    backdrop-filter: saturate(1.6) blur(12px);
    border-bottom: 1px solid var(--line);
  }

  /* The ambient layer, and the only thing in the product that is in it.

     The rule under the bar was drawn at all times, including at the very top
     of the page where there is nothing above the content for it to separate
     the content from. So it now arrives over the first 60 pixels of scroll:
     the page gains a top edge that reads as continuous paper, and the bar
     starts saying something true — that there is work above the fold.

     animation-timeline does it with no scroll listener at all, which matters
     on a sticky element already compositing a backdrop-filter; a listener here
     would run on every frame of every scroll to change one colour. Behind
     @supports, so where it is missing the border stays exactly as it was — a
     degradation nobody can see, which is the only kind worth writing.

     Subtraction rather than addition, and that is the whole of it. Nothing
     moves, nothing fades in, nothing follows the pointer. The bar is simply
     wrong at the top of the page and right everywhere else, and this makes it
     right in both places. */
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .masthead {
        border-bottom-color: transparent;
        animation: masthead-settle linear both;
        animation-timeline: scroll();
        animation-range: 0 calc(var(--space-8) - var(--space-2));
      }

      @keyframes masthead-settle {
        to { border-bottom-color: var(--line); }
      }
    }
  }

  /* Two things only: which workspace you are in, and the field you capture into.
     Everything else that was competing for this bar — members, switching, who
     you are, signing out — is behind the workspace name, because none of it is
     something you do while working. */
  .masthead__inner {
    max-width: var(--column);
    margin-inline: auto;
    padding: var(--space-2) var(--gutter);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--masthead-h);
  }

  .masthead__workspace {
    font: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-heavy);
    letter-spacing: var(--tracking-tight);
    display: inline-flex;
    align-items: center;
    gap: var(--space);
    height: var(--control-h);
    padding: 0 var(--space-2);
    margin-left: calc(var(--space-2) * -1);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), var(--responds);
  }

  .masthead__workspace:hover { background: var(--surface-hover); }
  .masthead__workspace--plain { cursor: default; }
  .masthead__workspace--plain:hover { background: none; }

  /* A chevron, drawn — and turned, because the button it sits in already
     reports aria-expanded and menu_controller already keeps that true. An open
     menu over a chevron still pointing down is a small lie the eye catches
     without being able to name it. The rule is in picker.css as well, where the
     same square of two borders does the same job. */
  .masthead__chevron {
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--ink-faint);
    border-bottom: 2px solid var(--ink-faint);
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--transition-enter);
  }

  [aria-expanded="true"] .masthead__chevron { transform: translateY(1px) rotate(225deg); }

  /* The way back. Sized like everything else that is pressed, and drawn
     rather than shipped as an icon: it is the same square of two borders the
     workspace menu's chevron is, turned to point the other way. */
  .masthead__back {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    margin-left: calc(var(--space) * -1);
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    transition: background var(--transition), color var(--transition), var(--responds);
  }

  .masthead__back:hover { background: var(--surface-hover); color: var(--ink); }

  .masthead__chevron--back {
    border-right: 0;
    border-bottom: 0;
    border-left: 2px solid currentcolor;
    border-top: 2px solid currentcolor;
    transform: translateX(1px) rotate(-45deg);
    width: 0.55rem;
    height: 0.55rem;
  }

  .masthead__who { font-size: var(--text-sm); color: var(--ink-muted); white-space: nowrap; }

  .masthead__you {
    display: grid;
    place-items: center;
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    cursor: pointer;
    transition: background var(--transition), var(--responds);
  }

  .masthead__you:hover { background: var(--surface-hover); }

  /* On a phone the three things in the bar do not fit on one line, and the one
     that loses is capture — which is the first step of the entire demo. So it
     takes a line of its own underneath, full width, and the workspace name gets
     an ellipsis rather than a share of the room it was squeezing. */
  @media (max-width: 48rem) {
    .masthead__inner {
      flex-wrap: wrap;
      padding: var(--space) var(--gutter);
      gap: var(--space);
    }

    .masthead__workspace {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
    }

    /* Last in the source, first in the reading order that matters. Selected
       through .masthead because the plain `.capture { flex: 1 }` is declared
       further down the file, and at equal specificity the last one wins whether
       or not it is the one inside a media query. */
    .masthead .capture { order: 3; flex: 1 0 100%; }

    /* The signed-out bar's own overflow: a name and a Sign out button beside a
       workspace name is three things again. */
    .masthead__who { display: none; }
  }

  /* No keyboard, no keyboard hint. */
  @media (hover: none) {
    .capture__key { display: none; }
    .capture__input { padding-right: var(--space-2); }
  }
}