/* system/apps/system-settings/styles.css
 *
 * This app's own CSS, and only this app's -- see start-here.md's
 * "Three CSS tiers" section. The toggle switch here is a plain,
 * self-contained checkbox + label treatment; no shared switch
 * component exists elsewhere in the shell yet (WordFlex's own toggle-
 * looking controls are that app's own themed buttons, not a real
 * <input type=checkbox> switch), so this isn't reusing anything --
 * if a second shell-level settings screen wants the same look later,
 * that's the point to promote this into shared-app-styles instead of
 * copy-pasting it again.
 */

.system-settings {
  width: 100%;
  text-align: left;
}

.system-settings-section + .system-settings-section {
  margin-top: 24px;
}

.system-settings-heading {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim, #6b7280);
  margin: 0 0 10px;
}

.system-settings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #e2e4ea;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.system-settings-row-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.system-settings-row-title {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 600;
}

.system-settings-row-desc {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-dim, #6b7280);
  line-height: 1.4;
}

/* Real checkbox, visually hidden but still the actual focusable/
 * toggleable control (keyboard + screen-reader accessible for free) --
 * the pill/knob to its right is pure decoration driven by :checked. */
.system-settings-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.system-settings-switch {
  flex: 0 0 auto;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: #d5d8e0;
  position: relative;
  transition: background 0.15s ease;
}

.system-settings-switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
}

.system-settings-switch-input:checked + .system-settings-switch {
  background: var(--brand, #3b6fd6);
}

.system-settings-switch-input:checked + .system-settings-switch::before {
  transform: translateX(18px);
}

.system-settings-switch-input:focus-visible + .system-settings-switch {
  outline: 2px solid var(--brand, #3b6fd6);
  outline-offset: 2px;
}