/* ——— Trays ———
   Fizzy's footer trays on the house popover (me/_tray): a text toggle in the
   bar, the popup floating above it with the page's own list inside. The
   toggle is deliberately not a .btn — the footer is a line of places, not a
   row of controls — and the open one wears the wash as its "you are here",
   BC's pill. */
@layer components {
  .tray__toggle {
    padding: 0.35em 0.9em;
    font-size: var(--text-small);
    color: var(--color-ink-subtle);
    background: none;
    border: none;
    border-radius: 100vmax;
    cursor: pointer;

    &:hover {
      color: var(--color-ink);
    }
  }

  .tray:has(:popover-open) .tray__toggle {
    color: var(--color-ink);
    background-color: var(--color-surface);
  }

  /* Anchored over its toggle — in viewport coordinates, like every popup on
     the fixed bar (popups.css, `#footer .popup`), so scrolling cannot pull
     it off its anchor. No try tactics: over the bar is the only place a tray
     goes. The doubled selector outranks .popup's no-anchor fallback whatever
     the file order.

     No inline padding: the frame below scrolls, and it carries the inline
     padding itself so its scrollbar rides the popup's edge. */
  .tray .tray__popup {
    --popup-area: block-start;
    position-try-fallbacks: none;
    inline-size: min(30rem, 92vw);
    margin-block-end: var(--block-space-half);
    padding-inline: 0;
  }

  /* Where anchors don't exist at all, the popup still knows where the bar
     is: pinned --footer-height up, centred between the same insets the
     footer answers to. */
  @supports not (anchor-name: --supported) {
    .tray .tray__popup {
      inset-block: auto var(--footer-height);
      inset-inline: 0;
      margin-block-start: 0;
      margin-inline: auto;

      /* The bar steps aside for the open panel (layout.css); the tray steps
         with it. */
      :has(#panel-toggle:checked) & {
        @media (width >= 35rem) {
          inset-inline-end: var(--panel-width);
        }
      }
    }
  }

  /* The page's list, scrolling inside the tray rather than growing it. */
  .tray__popup turbo-frame {
    display: block;
    max-block-size: 50dvh;
    overflow-y: auto;
    padding-inline: var(--inline-space-double);
  }

  .tray__foot {
    margin-block-start: var(--block-space-half);
    padding-block-start: var(--block-space-half);
    border-block-start: var(--border);
    text-align: center;
    font-size: var(--text-small);
  }
}