/* styles/settings.css - settings page layout (under .ui .settings). */
.ui .settings { max-width: 680px; }
/* Keep the prefs column narrow even when the section-outline rail reserves its gutter
   (article-ui.css widens .has-section-outline .container to 950px for article pages). */
.ui.has-section-outline .container.settings { max-width: 680px; }
/* Inter-section spacing comes from the article-body hairline separators, not per-setting margins. */
.ui .settings .setting { margin-bottom: 0; }
.ui .settings .setting-label { font: 600 13px/1.3 var(--font-sans); color: #ededf0; margin: 0 0 4px; }
.ui .settings .setting-help { font: 400 13px/1.5 var(--font-sans); color: var(--text-muted); margin: 0 0 16px; max-width: 56ch; }

.ui .settings .accent-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ui .settings .swatch { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--c); }
.ui .settings .swatch.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c); }
.ui .settings .custom-accent { display: inline-flex; align-items: center; gap: 10px; margin-left: 8px; padding-left: 18px; border-left: 1px solid var(--hairline); }
.ui .settings .custom-label { font: 600 9.5px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.ui .settings .hex-field { display: inline-flex; align-items: center; gap: 8px; }
.ui .settings .hex-well { width: 22px; height: 22px; border-radius: var(--radius-sm); background: var(--accent); border: 1px solid rgba(255,255,255,0.16); }
.ui .settings .hex-field input { width: 84px; font: 500 13px/1 var(--font-mono); color: var(--text-2); background: transparent; border: 0; border-bottom: 1px solid var(--hairline-strong); padding: 6px 2px; }

/* Brightness slider. The input is a tall, transparent box so the whole height is a touch
   target (iOS only registers drags inside the input's box); the visible thin track is drawn
   on the track pseudo-element, and the thumb is centered onto it with a negative margin. */
.ui .settings .brightness-row { display: flex; align-items: center; gap: 14px; max-width: 360px; }
.ui .settings .brightness-slider {
  flex: 1; appearance: none; -webkit-appearance: none;
  height: 36px; margin: 0; padding: 0; background: transparent; outline: none; cursor: pointer;
  touch-action: pan-y;
}
/* WebKit/Blink (incl. iOS Safari): track + thumb */
.ui .settings .brightness-slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--radius-pill); background: var(--hairline-strong);
}
.ui .settings .brightness-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; margin-top: -9px; /* center 22px thumb on 4px track */
  border-radius: 50%; background: var(--accent); border: 0; cursor: pointer;
}
/* Firefox: track + thumb */
.ui .settings .brightness-slider::-moz-range-track {
  height: 4px; border-radius: var(--radius-pill); background: var(--hairline-strong);
}
.ui .settings .brightness-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 0; cursor: pointer;
}
.ui .settings .brightness-row output { font: 500 13px/1 var(--font-mono); color: var(--text-body); min-width: 2.5ch; text-align: right; font-variant-numeric: tabular-nums; }

.ui .settings .setting-preview { margin-top: 14px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 20px 22px; background: #0a0a0b; }
.ui .settings .setting-preview h2 { margin-top: 6px; }
.ui .settings .settings-foot { display: flex; justify-content: space-between; align-items: center; }
.ui .settings .settings-note { font: 400 12px/1.5 var(--font-sans); color: var(--text-muted); }