@layer navigation {
  /* ===================================================
     Floating Toggles – Theme & Utility Tray
     Version: 1.3 – Bottom-Left Placement
     =================================================== */

  .floating-toggles {
    position: fixed;
    bottom: var(--space-md);
    right:  var(--space-md);   /* moved from right to left */
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* mirror alignment for left edge */
    gap: var(--space-sm);
    z-index: var(--z-floating, 10050);
    pointer-events: none;
  }

  /* show immediately (JS adds .is-visible) */
  .floating-toggles.is-visible { pointer-events: auto; }

  /* mobile/tablet: keep bottom-left on all viewports */
  @media (max-width: 1024px) {
    .floating-toggles {
      bottom: var(--space-md);
      left: auto;
      right: var(--space-md);
      top: auto;
    }
  }

  /* button base */
  .theme-toggle-floating {
    font-family: var(--font-display);
    background-color: transparent;
    color: var(--text-accent);
    width: var(--toggle-size, 3rem);
    height: var(--toggle-size, 3rem);
    border-radius: 9999px;
    font-size: var(--font-size-toggle, 1.25rem);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 12px var(--shadow-glow);
    border: 0;
    outline: 0;
    backdrop-filter: blur(2px);
    pointer-events: auto;
    transform: translateZ(0);      /* ✅ prevents page repaint bugs in iOS */
    will-change: transform;        /* ✅ keeps it hardware accelerated */
  }

  .theme-toggle-floating:hover {
    background-color: var(--highlight);
    color: var(--bg-primary);
  }

  .theme-toggle-floating:focus-visible {
    outline: 2px solid var(--highlight);
    outline-offset: 2px;
  }

  .theme-toggle-floating[hidden] { display: none !important; }
}