/* Settings — same overlay pattern as the player, so it reads as a
   place you stepped into rather than a page you navigated to. */

#settings {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--field);
  overflow-y: auto;
}

.set-body { max-width: 640px; margin: 0 auto; padding: 22px 20px 72px; }

.set-static {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--dim);
}
.set-static span { font-family: var(--mono); color: var(--cream); }

/* Toggles get a generous hit area — a coach is doing this one-handed
   on a phone, not with a mouse. */
.set-toggle {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  font-size: 15px;
  color: var(--cream);
  cursor: pointer;
  border-bottom: 1px solid var(--row-line);
}
.set-toggle:last-of-type { border-bottom: 0; }
.set-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--gold);
  flex-shrink: 0;
}

.set-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.set-list { list-style: none; margin: 0; padding: 0; }

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--row-line);
  font-size: 15px;
  color: var(--cream);
}
.set-row:last-child { border-bottom: 0; }

#settings .field { margin-bottom: 16px; }
#settings .select { width: 100%; }

@media (max-width: 520px) {
  .set-body { padding: 16px 14px 56px; }
}

/* Delete account. Bordered in red rather than filled - it should read
   as consequential without shouting on a screen people open to change
   their reminder time. */
.panel--danger { border: 1px solid rgba(190, 70, 60, .55); }
.panel--danger .panel__head h2 { color: var(--warn); }

.btn--danger {
  background: #B4453B;
  color: var(--cream);
  border: 1px solid #B4453B;
}
.btn--danger:hover:not(:disabled) { background: #C45146; border-color: #C45146; }
.btn--danger:disabled { opacity: .4; cursor: not-allowed; }