/* ============================================================
   LifeFolder — Settings: Hub (2 Spalten) + Security & privacy
   ============================================================ */
.settings { max-width: 680px; display: flex; flex-direction: column; gap: 18px; }
.settings--hub { max-width: 880px; }

.settings-hub { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.settings-hub__col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Karten-Kopf mit Icon-Kachel (Handoff) */
.settings-head { display: flex; align-items: center; gap: 12px; }
.settings-head__title { font-size: 16px; font-weight: 700; }
.settings-head__sub { font-size: 12.5px; color: var(--color-muted-2); margin-top: 1px; }

.settings-tile {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  background: var(--color-status-bg); color: var(--color-status-fg);
  display: flex; align-items: center; justify-content: center;
}
.settings-tile--ai { background: var(--color-ai-tile); color: var(--color-ai); }
.settings-tile--danger { background: var(--status-urgent-bg); color: var(--status-urgent-fg); }

.settings-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.settings-card__hint { font-size: 12.5px; color: var(--color-muted-2); }

/* Abschnitts-Label (uppercase, Handoff) */
.settings-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-muted-2); margin: 22px 0 13px;
}

/* Theme-Swatches: ausgewählt = Ink-Ring (Green-Rule) */
.settings-swatches { display: flex; gap: 16px; flex-wrap: wrap; }
.settings-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: none; background: none; padding: 0; cursor: pointer; font-family: inherit;
}
.settings-swatch__dot {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ink) 12%, transparent) inset;
}
.settings-swatch__dot--light { background: var(--color-action); }
.settings-swatch__dot--dark { background: var(--brand-ink); }
.settings-swatch.is-active .settings-swatch__dot {
  border-color: var(--color-selected);
  box-shadow: 0 0 0 2px var(--color-surface) inset, var(--shadow-1);
}
.settings-swatch__name { font-size: 11.5px; font-weight: 500; color: var(--color-muted); }
.settings-swatch.is-active .settings-swatch__name { font-weight: 700; color: var(--color-selected); }

/* Textgröße S/M/L: ausgewählt = Ink-Fläche (Green-Rule) */
.settings-sizeseg { display: flex; gap: 6px; background: var(--color-line-soft); border-radius: 12px; padding: 5px; }
.settings-sizeseg__opt {
  flex: 1; height: 44px; border: none; border-radius: 9px; cursor: pointer;
  font-family: inherit; font-weight: 700; background: transparent; color: var(--color-muted);
}
.settings-sizeseg__opt:hover { background: var(--color-surface); }
.settings-sizeseg__opt.is-active { background: var(--color-selected); color: var(--color-bg); box-shadow: var(--shadow-1); }

/* Eingefasste Toggle-Zeile (Handoff-Panel) */
.settings-panelrow {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 18px; padding: 14px 15px;
  background: var(--color-bg); border: 1px solid var(--color-line-soft); border-radius: 12px;
}

/* Konto: Link-Zeilen mit Icon-Kachel + Chevron */
.settings-navrow {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 15px 2px; border-top: 1px solid var(--color-line-soft);
  text-decoration: none; color: inherit; background: none; border-left: none; border-right: none; border-bottom: none;
  font-family: inherit; text-align: left; cursor: pointer;
}
.settings-navrow:hover { opacity: .72; }
.settings-navrow__label { flex: 1; min-width: 0; }
.settings-navrow__chev { color: var(--color-muted-2); display: flex; }
.settings-navrow__form { width: 100%; }
.settings-navrow__inline { display: flex; align-items: center; gap: 14px; min-width: 0; }
.settings-card__head + .settings-navrow { border-top: none; padding-top: 0; }

.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--color-line-soft); }
.settings-card__head + .settings-row { border-top: none; padding-top: 0; }
.settings-row__label { min-width: 0; }
.settings-row__name { display: block; font-size: 14.5px; font-weight: 700; }
.settings-row__name--danger { color: var(--status-urgent-fg); }
.settings-row__sub { display: block; font-size: 12.5px; color: var(--color-muted); margin-top: 2px; }

.settings-note { margin: 13px 2px 0; font-size: 12.5px; line-height: 1.55; color: var(--color-muted-2); }

/* Sprache: ausgewählt = Ink-Fläche (Green-Rule) */
.settings-langgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.settings-lang {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 46px; padding: 0 14px; border: 1px solid var(--color-line); border-radius: 11px;
  background: var(--color-surface); text-decoration: none;
}
.settings-lang__name { font-size: 13.5px; font-weight: 500; color: var(--color-ink); }
.settings-lang__code { font-size: 10.5px; font-weight: 700; color: var(--color-muted-2); }
.settings-lang:hover { background: var(--color-line-soft); }
.settings-lang.is-active { background: var(--color-selected); border-color: var(--color-selected); }
.settings-lang.is-active .settings-lang__name { color: var(--color-bg); font-weight: 700; }
.settings-lang.is-active .settings-lang__code { color: var(--color-bg); opacity: .65; }

/* Security & privacy: Passwort-Formular aufklappbar */
.settings-disclosure__summary { list-style: none; }
.settings-disclosure__summary::-webkit-details-marker { display: none; }
.settings-disclosure__btn { flex: none; }
.settings-disclosure__body { padding: 4px 2px 15px; }
.settings-disclosure[open] .settings-disclosure__btn { background: var(--color-selected-soft); }

.settings-form { display: flex; flex-direction: column; gap: 14px; }
/* minmax(0,1fr): Spalten dürfen unter die intrinsische Input-Breite
   schrumpfen (Rails setzt size aus maxlength — siehe 05_auth .field__input). */
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.settings-form__actions { margin-top: 4px; }

.settings-revoke-all { width: 100%; justify-content: center; margin-top: 10px; }

@media (max-width: 900px) {
  .settings-hub { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-row { flex-direction: column; align-items: flex-start; }
}