@layer components {
  .palette {
    width: 100%;
    max-width: none;
    max-height: 85dvh;
    margin: auto 0 0;
    padding: 0;
    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); }

    & [hidden] { display: none; }
    & .menu-row { min-height: var(--tap); border-top: 0; border-radius: var(--radius-control); }
    & .menu-row[data-selected] { background: var(--accent-soft); color: var(--accent); }
  }

  .palette__box { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: 85dvh; }
  .palette__input { width: auto; margin: var(--space-3); }
  .palette__list { overflow-y: auto; padding: 0 var(--space-2) max(var(--space-3), env(safe-area-inset-bottom)); }
  .palette__row { display: flex; align-items: center; }
  .palette__row > .menu-row { flex: 1; }

  @media (width >= 1024px) {
    .palette {
      width: 560px;
      max-height: 70dvh;
      margin: 12dvh auto auto;
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      box-shadow: 0 12px 40px rgb(0 0 0 / 0.2);
    }

    .palette__box { max-height: 70dvh; }
  }
}