@layer components {
  /* Menus

     One popup language for the whole product, and there are eight of them now:
     status, the two people, project, role, the workspace, you, the views and
     the lens. All popovers, so light dismiss, Escape and the top layer are the
     browser's job rather than eight more bits of JavaScript — and all wired to
     the menu controller, which is where the rest of what a menu does lives:
     opening onto the item you are already on, the arrow keys, and giving the
     focus back to whatever opened it. */

  .menu[popover] {
    position: fixed;
    margin: 0;
    min-width: 15rem;
    padding: var(--space);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    overflow: visible;
  }

  /* Opening, and — this is the new half — closing.

     All eight of these used to arrive politely on a keyframe and then blink out
     of existence, because a keyframe only runs one way and there was nothing on
     the other side of it. A popover can be transitioned in both directions now:
     `display` and `overlay` with allow-discrete hold the element and its place
     in the top layer for the length of the transition rather than dropping both
     on the first frame, and @starting-style gives the entry the from-state the
     keyframe used to carry.

     So the keyframe is gone and one pair of rules does both ways. Leaving is on
     the exit clock, which is shorter and steeper — nobody needs to watch a menu
     they have finished with. Under reduced motion --transition is 0s and the
     menu simply is open, which is the same answer the rest of the product
     gives; no branch needed here. */
  .menu[popover] {
    opacity: 0;
    translate: 0 var(--space);
    transition: opacity var(--transition-exit),
                translate var(--transition-exit),
                overlay var(--transition-exit) allow-discrete,
                display var(--transition-exit) allow-discrete;
  }

  .menu[popover]:popover-open {
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 1;
    translate: none;
    transition: opacity var(--transition),
                translate var(--transition),
                overlay var(--transition) allow-discrete,
                display var(--transition) allow-discrete;

    @starting-style {
      opacity: 0;
      translate: 0 var(--space);
    }
  }

  .menu::backdrop { background: light-dark(rgb(25 26 29 / 8%), rgb(0 0 0 / 40%)); }

  .menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-h-sm);
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    color: var(--ink-muted);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), var(--responds);
  }

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

  /* Where you already are: the view you are reading, or the status this task
     is already on. Both are the same fact and read the same way. */
  .menu__item[aria-current] {
    background: var(--accent-sunk);
    color: var(--accent);
    font-weight: var(--weight-bold);
  }

  .menu__item--quiet { font-size: var(--text-sm); color: var(--ink-faint); }

  /* A form wrapper around a menu item must not break the column. */
  .menu > form { display: contents; }
  .menu > form > .menu__item { width: 100%; }

  .menu__title { margin-right: auto; }

  .menu__count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
  }

  .menu__item[aria-current] .menu__count { color: inherit; }

  /* No keyboard, no keyboard hint — the row still works, it just stops
     advertising a shortcut the device cannot press. */
  @media (hover: none) {
    .menu__count--key { display: none; }
  }

  /* Set as a label in base.css; only the room it takes in the menu is here. */
  .menu__label { padding: var(--space) var(--space-2) calc(var(--space) / 2); }

  .menu__rule {
    height: 1px;
    background: var(--line);
    margin: var(--space) calc(var(--space) * -1);
  }

  /* Anchored to the bottom-left button. */
  .menu--above {
    inset: auto auto
           calc(var(--control-h) + var(--space-4) + var(--safe-bottom))
           calc(var(--space-3) + var(--safe-left));
  }

  /* Anchored under the masthead, at the same edge as its content. A popover is
     in the top layer and can be positioned against the viewport and nothing
     else, so both offsets are arithmetic off --masthead-h and --gutter rather
     than a guess — no anchor positioning needed, which keeps this working
     outside Chromium.

     It was a guess: 5rem and --space-4, both hard-coded. On a phone the bar
     wraps to two rows and grows to 8rem, and the menu opened 48px up inside it,
     covering the capture field it is supposed to sit under. Both numbers now
     come from the same tokens the masthead itself is built from, so the two
     cannot drift apart again. */
  .menu--under-masthead {
    inset: calc(var(--masthead-h) + var(--safe-top) + var(--space)) auto auto var(--menu-edge);
  }

  .menu--under-masthead-right {
    inset: calc(var(--masthead-h) + var(--safe-top) + var(--space)) var(--menu-edge) auto auto;
  }

  /* The masthead's content edge: the gutter, or wherever the centred column
     puts it once the window is wider than the column. */
  .menu {
    --menu-edge: max(var(--gutter), calc((100vw - var(--column)) / 2 + var(--gutter)));
  }
}