@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-base);
    font-weight: var(--weight-bold);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--pounce-h);
    padding: 0 var(--space-4);
    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. */
  /* The lens is a qualifier on the view, not a peer of it, so it keeps the
     control height and the control's type while the Pounce button takes the
     larger pair. Two heights in one cluster is the hierarchy, not an
     oversight: both are centred on the same row. */
  .viewmenu__button--quiet {
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    height: var(--control-h);
    padding: 0 var(--space-3);
    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.375rem;
    height: 1.375rem;
    flex: none;
  }

  /* The lens has no glyph of its own, so its label carries the smaller size
     alone and the paw stays the Pounce button's. */
  .viewmenu__button--quiet .viewmenu__glyph { width: 1.125rem; height: 1.125rem; }

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