@layer components {
  /* The view button

     The six views are the product's whole vocabulary, but they are a
     destination rather than a control: you pick one and then read for a while.
     A permanent column spends a fifth of the screen on a decision made every
     few minutes, so it lives behind a button instead — bottom left, out of the
     reading path, and within thumb reach on a phone.

     The button carries the current view and its count, because the one job the
     column did that a button must not lose is telling you where you are. */

  /* Two controls, one cluster: which list, and whose work in it. Both menus open
     from the same bottom-left anchor, which is why neither needs anchor
     positioning to find its button. */
  .viewmenu {
    position: fixed;
    bottom: calc(var(--space-3) + var(--safe-bottom));
    left: calc(var(--space-3) + var(--safe-left));
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space);
  }

  .viewmenu__button {
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-h);
    padding: 0 var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: border-color var(--transition), var(--responds);
  }

  /* The lens is a qualifier on the view, not a peer of it: same shape, less
     weight, and no glyph competing with the one next to it. */
  .viewmenu__button--quiet {
    font-weight: var(--weight-normal);
    color: var(--ink-muted);
  }

  .viewmenu__button--quiet:hover { color: var(--ink); }

  .viewmenu__button:hover { border-color: var(--line-strong); }
  /* The press is base.css's now. It used to drop a pixel here, which was the
     only :active state in the product and the reason the rest of it felt
     inert by comparison — one control answering and forty not. */

  /* The paw, inline in the partial rather than shipped as a file — one icon on
     one button on every page is not worth a request. Sized to the 18px the
     status marks are drawn at, so the two icon sizes in the product are one.
     flex: none because the button is a flex row and an SVG with no intrinsic
     width will otherwise let itself be squeezed by the label beside it. */
  .viewmenu__glyph {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
  }

  .viewmenu__current { letter-spacing: var(--tracking-tight); }
}