/* ============================================================
   ZEUS - settings.css
   Page-specific styles for settings.html (the gear button's
   destination). Only new classes; relies on style.css for the
   nav pill, glass system, fonts, tokens, footer and buttons.

   The [data-theme] / [data-accent] / [data-reduce-motion]
   attribute selectors below only activate when the user picks
   a non-default option — the default look is untouched.
   ============================================================ */

/* ---------- Screen-reader-only helper ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Page scaffold ---------- */
.settings-page {
  padding-top: calc(var(--nav-height) + var(--banner-height) + 48px);
  padding-bottom: 90px;
  min-height: 100vh;
}

.settings-header {
  margin-bottom: 34px;
}

.settings-header h1 {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.settings-subtitle {
  margin-top: 8px;
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 62ch;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 22px;
  align-items: start;
}

/* ---------- Glass cards ---------- */
.settings-card {
  border-radius: 20px;
  padding: 22px 24px 18px;
}

.settings-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-card-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-card-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--accent-primary);
}

.settings-card-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.settings-card-sub {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* ---------- Rows ---------- */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
}

.settings-row + .settings-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-row--column {
  flex-direction: column;
  align-items: stretch;
}

.settings-row--last {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-row-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.settings-row-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-row-hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* ---------- Switch ---------- */
.zeus-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
}

.zeus-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.zeus-switch-track {
  width: 46px;
  height: 27px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  position: relative;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.zeus-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #c9c9ce;
  transition: transform 0.25s var(--ease-out), background 0.25s ease;
}

.zeus-switch input:checked + .zeus-switch-track {
  background: rgba(255, 215, 0, 0.28);
  border-color: rgba(255, 215, 0, 0.55);
}

.zeus-switch input:checked + .zeus-switch-track::after {
  transform: translateX(19px);
  background: var(--accent-primary);
}

.zeus-switch input:focus-visible + .zeus-switch-track {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 2px;
}

/* ---------- Segmented control ---------- */
.zeus-segment {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.zeus-segment label {
  display: inline-flex;
}

.zeus-segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.zeus-segment span {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.zeus-segment input:checked + span {
  background: #ffffff;
  color: #111111;
}

.zeus-segment input:focus-visible + span {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 2px;
}

/* ---------- Select ---------- */
.zeus-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 9px 38px 9px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2386868B'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px,
    rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  max-width: 190px;
}

.zeus-select:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 2px;
}

/* ---------- Range slider ---------- */
.zeus-range {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
  margin: 10px 0 4px;
}

.zeus-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-primary);
  border: 2px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
  cursor: pointer;
}

.zeus-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-primary);
  border: 2px solid rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.zeus-range:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 4px;
}

/* Subtitle size live preview */
.sub-preview {
  margin-top: 12px;
  border-radius: 10px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 22px 16px 16px;
  text-align: center;
}

.sub-preview-text {
  display: inline-block;
  font-size: calc(16px * var(--zeus-sub-size, 1));
  font-weight: 700;
  color: var(--zeus-sub-color, #fff);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 2px 2px rgba(0, 0, 0, 0.8);
  line-height: 1.3;
}

/* ---------- Accent swatches ---------- */
.zeus-swatches {
  display: inline-flex;
  gap: 10px;
}

.zeus-swatch {
  position: relative;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.zeus-swatch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.zeus-swatch > span:first-of-type {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  transition: transform 0.2s var(--ease-out), border-color 0.2s ease, box-shadow 0.2s ease;
}

.zeus-swatch--gold > span:first-of-type { background: #FFD700; }
.zeus-swatch--crimson > span:first-of-type { background: #FF4B4B; }
.zeus-swatch--emerald > span:first-of-type { background: #34D399; }
.zeus-swatch--violet > span:first-of-type { background: #A78BFA; }

/* ---------- Subtitle colour swatches (zeus_sub_color) ---------- */
.zeus-swatch--sub-white > span:first-of-type { background: #ffffff; }
.zeus-swatch--sub-yellow > span:first-of-type { background: #ffd54a; }
.zeus-swatch--sub-sky > span:first-of-type { background: #76e4ff; }
.zeus-swatch--sub-green > span:first-of-type { background: #8aff7d; }
.zeus-swatch--sub-pink > span:first-of-type { background: #ff79c6; }

/* Custom subtitle colour — a round colour picker that reads as
   one more swatch (dashed ring = "any colour you like") */
.zeus-subcolor-custom {
  position: relative;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.zeus-subcolor-custom input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 2px dashed rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.zeus-subcolor-custom input[type="color"]:hover {
  border-color: rgba(255, 255, 255, 0.7);
}

.zeus-subcolor-custom input[type="color"]:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 3px;
}

.zeus-subcolor-custom input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.zeus-subcolor-custom input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

.zeus-subcolor-custom input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

/* ---------- Subtitle timing offset (zeus_sub_offset_ms) ---------- */
.sub-offset-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sub-offset-controls .zeus-range {
  flex: 1;
}

.sub-offset-controls .settings-danger-btn {
  flex-shrink: 0;
}

.zeus-swatch input:checked + span:first-of-type {
  border-color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
}

.zeus-swatch input:focus-visible + span:first-of-type {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 3px;
}

/* ---------- Account row ---------- */
.settings-account-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.settings-account-email {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.settings-account-note {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ---------- Devices ---------- */
.device-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.device-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.device-item svg {
  width: 18px;
  height: 18px;
  fill: var(--text-secondary);
  flex-shrink: 0;
}

.device-item-meta {
  min-width: 0;
  flex: 1;
}

.device-item-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.device-item-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.device-item-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #34D399;
  flex-shrink: 0;
}

/* ---------- Danger buttons ---------- */
.settings-danger-btn {
  flex-shrink: 0;
  font-size: 13px;
  white-space: nowrap;
}

.settings-danger-btn:hover {
  border-color: rgba(255, 107, 107, 0.6);
  color: #FF9A94;
}

/* ============================================================
   LIVE THEME / MOTION OVERRIDES (settings page applied)
   ------------------------------------------------------------
   Activated only via the data-attributes settings.js sets on
   <html> when the user picks a non-default option.
   ============================================================ */

/* Dim theme: same gradient, dialed down */
html[data-theme="dim"] .zeus-bg-blur {
  filter: blur(32px) saturate(1.15) contrast(1.05) brightness(0.7);
}

/* AMOLED: near-pure black with a faint hint of the gradient */
html[data-theme="amoled"] {
  --glass-bg: rgba(8, 8, 10, 0.78);
  --glass-bg-strong: rgba(8, 8, 10, 0.92);
}

html[data-theme="amoled"] body {
  background: #000;
}

html[data-theme="amoled"] .zeus-bg-blur {
  opacity: 0.18;
}

/* Accent colours (gold = site default, no attribute needed) */
html[data-accent="crimson"] {
  --accent-primary: #FF4B4B;
  --accent-core: #FF6B6B;
  --accent-glow: rgba(255, 75, 75, 0.6);
}

html[data-accent="emerald"] {
  --accent-primary: #34D399;
  --accent-core: #6EE7B7;
  --accent-glow: rgba(52, 211, 153, 0.6);
}

html[data-accent="violet"] {
  --accent-primary: #A78BFA;
  --accent-core: #C4B5FD;
  --accent-glow: rgba(167, 139, 250, 0.6);
}

/* Manual reduce-motion switch (in addition to the OS-level
   prefers-reduced-motion rule in style.css) */
html[data-reduce-motion="1"] .zeus-bg-blur {
  animation: none;
}

html[data-reduce-motion="1"] *,
html[data-reduce-motion="1"] *::before,
html[data-reduce-motion="1"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

html[data-reduce-motion="1"] {
  scroll-behavior: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .settings-page {
    padding-top: calc(var(--nav-height) + var(--banner-height) + 96px);
    padding-bottom: 64px;
  }

  .settings-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .settings-card {
    padding: 18px 18px 14px;
  }

  .settings-row {
    flex-wrap: wrap;
  }

  .zeus-select {
    max-width: 100%;
  }
}