@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 rule under the bar used to arrive over the first 60 pixels of scroll,
     driven by animation-timeline: scroll(). It was the only scroll-linked
     thing in the product and it is gone with the rest of the choreography —
     an effect that exists in one browser engine, that nobody can name when
     they see it, and that has to be maintained forever. The border is simply
     drawn. */

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

  /* The name, and it is what gives when the bar runs out of room — see the
     phone rules at the foot of this file. flex: none on the chevron beside it,
     or the arrow is what gets squeezed. */
  .masthead__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .masthead__chevron { flex: none; }

  .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, and where it goes. Drawn rather than shipped as an icon: the
     chevron is the same square of two borders the workspace menu's is, turned
     to point the other way.

     It was a 44px square holding a chevron and nothing else, and naming the
     name of the destination beside it. So it is a row rather than a grid now,
     and it keeps the 44px as a floor rather than a size — the height is still
     the target height, the width is whatever the word needs. `flex: 0 1 auto`,
     not `none`: the bar is a flex row and the workspace name beside this is
     the thing that should keep its width, so past a certain narrowness this is
     what gives.

     padding-inline is asymmetric on purpose. The chevron is drawn inside a
     box wider than its own strokes, so equal padding puts the arrow visibly
     further from the left edge than the word is from the right. */
  .masthead__back {
    display: flex;
    align-items: center;
    gap: var(--space);
    flex: 0 1 auto;
    min-width: 0;
    min-height: var(--control-h-sm);
    padding-inline: var(--space) var(--space-2);
    margin-left: calc(var(--space-2) * -1);
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    text-decoration: none;
    transition: background var(--transition), color var(--transition), var(--responds);
  }

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

  /* The name of the page the arrow leads to.

     --text-sm and the muted ink, both deliberately under the workspace name
     beside it: this is a label on a control, not a second title, and the two
     at the same weight would read as a breadcrumb the product does not have.

     It truncates rather than widening the bar. A project can be called
     anything and a task's reference is short, but the first of those is enough
     to push the capture field off a laptop screen — so the word gives before
     the layout does, and the whole sentence is on the control's own title and
     aria-label either way. */
  .masthead__back-to {
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
  }

  .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);
    }

    /* `flex: 1 1 0` and not `1 1 auto`, and the zero is the whole of it.

       A wrapping flex line breaks *before* it shrinks: items are collected
       while their natural widths fit, and the first one that does not starts a
       new line. With a natural basis, the workspace name is 206px on a 375px
       bar whether or not there is room for it — so adding the arrow's label
       Naming the arrow did not squeeze this, it pushed the avatar onto a row of its own
       and the capture field onto a third. A basis of zero takes this item out
       of that arithmetic: it never forces a break, and it grows into whatever
       the other two leave.

       Which makes the workspace name the thing that gives on a narrow screen,
       and that is the right one of the three. It is the only one whose answer
       you already have — the arrow's label tells you where you have not been
       yet, the avatar is a target rather than a word, and the workspace is the
       one you have been working in all morning. Its full name is a press away
       in the menu it opens. */
    .masthead__workspace {
      flex: 1 1 0;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
    }

    /* And the label is capped rather than elastic, so what it gives back is
       bounded: it is the thing on this row worth reading, and a label that
       shrank with the window would end up as an ellipsis on the narrowest
       phones — which is where this bar is the only back button there is. 5rem
       holds "Inbox", "Today", "Anytime" and a task's reference whole, which is
       what the arrow says nearly every time it says anything. */
    .masthead__back-to { max-width: 5rem; }

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