/**
 * css/settings.css
 * Steg 14, Del E (2026-08-05) — Inställningar (namn + notiser).
 * Egen fullskärms-yta, samma mönster som #group-settings-screen
 * (css/group-settings.css) — tillbaka-pil, inte X, eftersom detta är en
 * undersida, inte en dialogruta (samma resonemang som group-settings.css
 * redan dokumenterar). #gs-header/.gs-tabs-klasserna återanvänds INTE
 * här (den här skärmen har inga flikar) — bara samma rubrik-mönster
 * byggs om under egna klassnamn (.set-header, .set-body) så de två
 * skärmarnas CSS aldrig behöver hålla ihop av misstag.
 */

#settings-screen {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 4000;
  flex-direction: column;
}

.set-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
}
.set-back {
  background: none; border: none; cursor: pointer;
  color: var(--ink-soft); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
}
.set-title { font-size: 15px; font-weight: 700; color: var(--ink); }

.set-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 32px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.set-section { margin-bottom: 24px; }
.set-section-title {
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px;
}
.set-divider { border-top: 1px solid #E5E7EB; margin: 24px 0; }

/* ── Notisval — radioknappar i lista ──
   Samma radmönster som .gs-cat-row (padding 9px 4px, delare mellan
   raderna) för visuell konsekvens med Gruppinställningar, men med en
   riktig <input type="radio"> istället för klick-hela-raden-logik, så
   tangentbordsnavigering och skärmläsare får korrekt semantik utan
   extra JS. */
.set-radio-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid #F3F4F6;
  cursor: pointer;
}
.set-radio-row:last-child { border-bottom: none; }
.set-radio-row input[type="radio"] {
  margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.set-radio-text { flex: 1; min-width: 0; }
.set-radio-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.set-radio-desc { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }