/* Settings panel: popover on desktop, bottom sheet on mobile (07 §1.3, 08 §7.1). */
.settings {
  position: absolute; z-index: 20; top: calc(var(--space-5) + var(--tap-min)); right: var(--space-4);
  width: min(360px, calc(100% - 2 * var(--space-4)));
  padding: var(--space-5); display: grid; gap: var(--space-4);
  background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-2); text-align: left;
}
.settings__group { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.settings__group legend { font-size: var(--text-small); font-weight: 600; margin-bottom: var(--space-1); }
.settings__footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }

@media (max-width: 767.98px) {
  .settings {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 85vh; overflow-y: auto;
  }
}