/* Preference rows, switches, sliders and reset row, shared by Profile and Settings. */
.profile-prefs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
  .profile-prefs-grid { gap: 1rem; margin-bottom: 1rem; }
}
.profile-prefs-card { padding: 8px 28px 20px; }
.profile-pref-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--divider);
}
.profile-pref-row:first-child { border-top: 0; }
.profile-pref-text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.profile-pref-title { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.profile-pref-control { flex: 0 0 auto; display: flex; align-items: center; }
/* Extra `.profile-prefs-card` raises specificity over the Account tab's `.profile-acct-card .profile-input` width:100% rule. */
.profile-prefs-card .profile-pref-control .profile-input {
  width: var(--pref-ctl-w, 190px);
  max-width: none;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  color: var(--ink);
  font-size: 0.92rem;
  padding: 9px 12px;
}
.profile-pref-control .profile-input:focus { outline: none; border-color: var(--bronze); }
.profile-prefs-card .profile-pref-control .btn { width: var(--pref-ctl-w, 190px); justify-content: center; }

.pref-switch { display: inline-flex; align-items: center; }
.pref-switch input[type="checkbox"],
.pref-toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 34px; height: 18px; margin: 0; padding: 0; border: none;
  border-radius: 999px;
  /* Off = visible mid-grey track (not near-black --bg-input) so the off state reads. */
  background: color-mix(in srgb, var(--ink) 34%, transparent);
  position: relative; cursor: pointer; flex: 0 0 auto;
  transition: background 0.18s ease;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.pref-switch input[type="checkbox"]::before,
.pref-toggle input[type="checkbox"]::before {
  content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: #f0e9d8; top: 1px; left: 2px;
  transition: transform 0.18s ease, background 0.18s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.pref-switch input[type="checkbox"]:checked,
.pref-toggle input[type="checkbox"]:checked { background: var(--accent-gold); }
.pref-switch input[type="checkbox"]:checked::before,
.pref-toggle input[type="checkbox"]:checked::before { transform: translateX(16px); background: #1a1a1a; }
.pref-switch input[type="checkbox"]:focus-visible,
.pref-toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--bronze-2); outline-offset: 2px; }
.pref-switch:hover input[type="checkbox"]:not(:checked),
.pref-toggle:hover input[type="checkbox"]:not(:checked) { background: color-mix(in srgb, var(--ink) 46%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .pref-switch input[type="checkbox"], .pref-switch input[type="checkbox"]::before,
  .pref-toggle input[type="checkbox"], .pref-toggle input[type="checkbox"]::before { transition: none; }
}

.profile-prefs-card > .profile-save-status { padding: 0 0 8px; margin-top: -8px; }

/* An informational aside, not body copy: the rule down its edge is what marks it as a note, and
   it owns its own type so no utility class has to ride along in the markup. */
.profile-qm-note {
  margin: 0 0 8px;
  padding: 10px 14px;
  border-left: 3px solid var(--bronze-2);
  background: color-mix(in srgb, var(--bronze-2) 8%, transparent);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  /* --ink, not a literal white: the light theme re-pins it and a hardcoded #fff would go
     invisible on cream. */
  font-size: 0.84rem; line-height: 1.5; color: var(--ink);
}

.profile-prefs-card-groups { padding: 20px 24px; }
/* No box of its own — the card already draws one, and two nested frames read as a box inside a
   box. The groups are told apart by the RULE between them, so the padding drops its horizontal
   inset and the rows line up with the card's own edge. */
.profile-pref-group {
  padding: 6px 0 18px;
  background: transparent;
}
/* A SECTION break, not a row rule: the space either side is what separates the two groups, and
   the full-strength line tells it apart from the dashed rules between toggles inside one. */
.profile-pref-group + .profile-pref-group {
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--border);
}
.profile-pref-group-head { padding: 14px 0 4px; }
.profile-pref-group-head strong { font-size: 1rem; color: var(--ink); }
.profile-pref-group-head p { margin: 4px 0 0; font-size: 0.84rem; color: var(--ink-3); line-height: 1.5; }
.profile-pref-group .profile-pref-row:first-child { border-top: 1px solid var(--divider); }
/* A group with no heading — the section rule above it is the separator, and a light divider
   immediately under it reads as a double line. Must follow the rule it undoes. */
.profile-pref-group-plain > .profile-pref-row:first-child { border-top: 0; }
.profile-pref-group-plain:first-child { padding-top: 0; }
.profile-pref-group .pref-toggles-grid {
  border-top: 1px solid var(--divider);
  padding-top: 12px; margin-top: 12px;
}

.profile-slider-wrap { display: flex; align-items: center; gap: 12px; width: var(--pref-ctl-w, 190px); }
.profile-slider {
  appearance: none; -webkit-appearance: none;
  flex: 1 1 auto; height: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 26%, transparent);
  cursor: pointer;
}
.profile-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--bronze-2); border: 1px solid var(--bronze-deep);
  cursor: pointer;
}
.profile-slider::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--bronze-2); border: 1px solid var(--bronze-deep);
  cursor: pointer;
}
.profile-slider-val { flex: 0 0 auto; min-width: 2ch; text-align: right; color: var(--ink-2); font-size: 0.88rem; }

.profile-prefs-reset {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid var(--divider);
}
.profile-prefs-reset .profile-prefs-reset-main .btn { width: var(--pref-ctl-w, 190px); justify-content: center; }
.profile-prefs-reset.has-left { justify-content: space-between; }
.profile-prefs-reset-main { display: flex; align-items: center; gap: 12px; }
.profile-prefs-reset.has-left > .btn { flex: 0 0 auto; width: var(--pref-ctl-w, 190px); justify-content: center; }

@media (max-width: 640px) {
  .profile-prefs-card { padding: 4px 16px 16px; }
  .profile-pref-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .profile-pref-control { align-self: stretch; }
  .profile-prefs-card .profile-pref-control .profile-input,
  .profile-prefs-card .profile-pref-control .btn { width: 100%; }
  .profile-slider-wrap { width: 100%; }
  .profile-prefs-card-groups { padding: 12px 14px; }
  .profile-pref-group { padding: 4px 0 14px; }
  .profile-prefs-reset { flex-direction: column; align-items: stretch; }
  .profile-prefs-reset-main { flex-direction: column; align-items: stretch; }
  /* .has-left > .btn ("Open Armory") is (0,3,0) — this must match it or that one button stays 190px. */
  .profile-prefs-reset .btn,
  .profile-prefs-reset.has-left > .btn,
  .profile-prefs-reset .profile-prefs-reset-main .btn { width: 100%; }
}
.pref-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  cursor: pointer;
  user-select: none;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.pref-toggle-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* One toggle per row at every width: paired columns made the dashed rule read as a 2x2 table,
   and each toggle is an independent switch rather than half of a pair. */
.pref-toggles-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 4px;
}
.pref-toggles-grid > .pref-toggle {
  border-bottom: 1px dashed color-mix(in srgb, var(--border-color) 60%, transparent);
}
.pref-toggles-grid > .pref-toggle:last-child { border-bottom: 0; }