@layer components {
  /* Expanding glass (+) floating action button.
     The glass surface lives on the container itself, so the button MORPHS:
     closed it is a circle showing just the "+"; open it grows up and to the
     left into one continuous rounded panel laid out as two columns — the item
     list on the left and the "+" in the bottom-right corner (level with the
     last item), where it stays pinned. Sibling of .glass-menu (the single,
     non-expanding FAB). */
  .glass-fab {
    align-items: flex-end;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: oklch(var(--lch-canvas) / 0.25);
    border: 1px solid oklch(var(--lch-canvas) / 0.5);
    /* The trigger is 3.5rem tall, so 1.75rem keeps a perfect circle when closed
       and a rounded box when open — corners never change, only the box resizes. */
    border-radius: 1.75rem;
    bottom: calc(var(--footer-height) + env(safe-area-inset-bottom) + 1rem);
    box-shadow: var(--shadow-lg);
    color: var(--color-ink);
    display: flex;
    flex-direction: row-reverse;
    overflow: hidden;
    position: fixed;
    right: 1rem;
    -webkit-tap-highlight-color: transparent; /* kill the iOS blue tap flash */
    z-index: var(--z-bar);

    @media (min-width: 640px) {
      bottom: 2rem;
      right: 2rem;
    }
  }

  .glass-fab__trigger {
    align-items: center;
    align-self: flex-end; /* keep the + at the right edge as the panel widens */
    background: none;
    block-size: 3.5rem;
    border: none;
    color: var(--color-ink);
    display: flex;
    inline-size: 3.5rem;
    justify-content: center;
    padding: 0;

    .icon {
      --icon-size: 1.5rem;

      transition: rotate 0.2s ease;
    }

    @media (any-hover: hover) {
      &:hover {
        background: oklch(var(--lch-ink-darkest) / 0.08);
      }
    }
  }

  /* + turns into × while the menu is open */
  .glass-fab:has(.glass-fab__menu[open]) .glass-fab__trigger .icon {
    rotate: 45deg;
  }

  .glass-fab__menu {
    /* The container carries the glass surface; the menu is just the item list
       (the left column, sitting to the left of the trigger). */
    background: none;
    border: none;
    color: inherit;
    inset: auto;
    margin: 0;
    min-inline-size: 12rem;
    padding: 0.25rem;
    position: static;
    transform-origin: bottom right;
    transition: opacity 0.15s ease, scale 0.15s ease;
  }

  /* Keep the browser's default `dialog:not([open]) { display: none }` for the
     closed state; only show (and animate in) when the dialog is open. */
  .glass-fab__menu[open] {
    display: block;
    opacity: 1;
    scale: 1;

    @starting-style {
      opacity: 0;
      scale: 0.8;
    }
  }

  /* Roomier tap targets; keep the default popup__item divider (like the burger menu).
     .btn defaults to an opaque --color-canvas fill — clear it so the glass shows through. */
  .glass-fab__menu .popup__btn {
    --btn-background: transparent;

    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
  }

  /* Drop the global blue focus ring everywhere. On hover/keyboard devices, show
     focus with a subtle background; on touch, no color change on tap at all. */
  .glass-fab :focus-visible {
    outline: none;
  }

  @media (any-hover: hover) {
    .glass-fab__trigger:focus-visible,
    .glass-fab__menu .popup__btn:focus-visible {
      background: oklch(var(--lch-ink-darkest) / 0.08);
    }
  }
}