@layer components {
  /* Drawer -- off-canvas on mobile, persistent on desktop */
  .drawer {
    --drawer-bg: var(--color-canvas);

    background-color: var(--drawer-bg);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
  }

  /* Mobile: drawers are fixed overlays */
  @media (max-width: 799px) {
    .drawer {
      position: fixed;
      top: 0;
      bottom: 0;
      inline-size: min(80vw, 22rem);
      z-index: var(--z-drawer);
      box-shadow: var(--shadow-lg);
      transition: transform var(--transition-slow);
      padding-top: calc(var(--nav-height) + var(--safe-inset-top));
      padding-bottom: calc(var(--tab-bar-height) + var(--safe-inset-bottom));
    }

    .drawer--left {
      left: 0;
      transform: translateX(-100%);
      border-inline-end: var(--border);
    }

    .drawer--right {
      right: 0;
      transform: translateX(100%);
      border-inline-start: var(--border);
    }

    .drawer--left.drawer--open {
      transform: translateX(0);
    }

    .drawer--right.drawer--open {
      transform: translateX(0);
    }
  }

  /* Desktop: drawers are inline grid children */
  @media (min-width: 800px) {
    .drawer {
      border-inline-end: var(--border);
    }

    .drawer--right {
      border-inline-end: none;
      border-inline-start: var(--border);
    }

    /* Collapsed state on desktop */
    .drawer--collapsed {
      display: none;
    }
  }

  /* Drawer overlay (mobile backdrop) */
  .drawer-overlay {
    display: none;
  }

  @media (max-width: 799px) {
    .drawer-overlay {
      display: block;
      position: fixed;
      inset: 0;
      background: oklch(0% 0 0 / 0.4);
      z-index: var(--z-drawer-overlay);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--transition-slow);
    }

    .drawer-overlay--visible {
      opacity: 1;
      pointer-events: auto;
    }
  }

  /* Drawer header */
  .drawer__header {
    align-items: center;
    border-block-end: var(--border);
    display: flex;
    font-weight: 600;
    gap: var(--inline-space);
    justify-content: space-between;
    padding: var(--block-space) var(--inline-space);
    flex-shrink: 0;
  }

  .drawer__title {
    font-size: var(--text-normal);
    font-weight: 600;
  }

  /* Drawer content */
  .drawer__content {
    flex: 1;
    overflow-y: auto;
    padding: var(--block-space-half) var(--inline-space);
  }

  /* Drawer drag handle (mobile, visible touch target) */
  .drawer__handle {
    display: none;
  }

  @media (max-width: 799px) {
    .drawer__handle {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      inline-size: 1.5rem;
      block-size: 3rem;
      background: var(--color-surface);
      border-radius: var(--radius);
      z-index: 1;
    }

    .drawer--left .drawer__handle {
      right: -1.5rem;
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }

    .drawer--right .drawer__handle {
      left: -1.5rem;
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
  }
}