@layer components {
  .sheet {
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: 80dvh;
    margin: 0;
    padding: var(--space-2) var(--space-3) max(var(--space-4), env(safe-area-inset-bottom));
    overflow-y: auto;
    border: 0;
    border-radius: 22px 22px 0 0;
    background: var(--surface);
    box-shadow: 0 -8px 40px rgb(0 0 0 / 0.18);
    color: var(--ink);

    &::backdrop { background: rgb(10 12 16 / 0.35); }

    &::before {
      content: "";
      display: block;
      width: 40px;
      height: 4px;
      margin: 0 auto var(--space-2);
      border-radius: 999px;
      background: var(--line);
    }

    & .menu-row { border-top: 0; border-radius: var(--radius-control); }
  }

  @media (width >= 1024px) {
    .sheet {
      inset: auto auto var(--space-4) var(--space-3);
      width: 300px;
      padding: var(--space-2);
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      box-shadow: 0 12px 40px rgb(0 0 0 / 0.2);

      &::backdrop { background: transparent; }
      &::before { display: none; }
    }
  }
}