/* ── Settings Screen ──────────────────────────────────────────────────── */

#screen-settings {
  background: var(--color-bg, #0a0f1e);
  height: 100%;
  overflow: hidden;
}

#settings-screen {
  height: 100%;
  background: var(--color-bg, #0a0f1e);
  /* .stub-screen (the fixed, full-width parent every screen using this
     pattern shares) centers its child with align-items:flex-start, not
     stretch — a child with no width of its own just shrinks to content size.
     Confirmed live (reported by the owner, desktop, wide viewport): that
     shrunk child was the only element with overflow-y:auto, so the mouse
     wheel only scrolled while the cursor sat directly over that narrow
     strip — everywhere else looked like part of the screen but wasn't
     actually on anything scrollable.
     First fix capped THIS element at --app-max-width, matching the pattern
     injuries.css already used — real improvement (534px → 900px on a 1280px
     screen) but still left a dead margin on wide monitors, because the
     scrollable element and the readable-width element were the same node.
     They don't need to be: this element now spans the FULL stub-screen
     width and owns the scroll, while .settings-scroll (below) is the
     centered reading column inside it. Wheel/touch now works anywhere
     across the screen; only the text stays a comfortable width. */
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.settings-scroll {
  max-width: var(--app-max-width);
  margin: 0 auto;
  /* No overflow/scroll of its own — #settings-screen owns that now. If this
     element also clipped and scrolled internally, its content would never
     overflow the OUTER container, and the outer container (the one that
     actually spans the full width, including the margins beside this
     column) would have nothing to scroll — silently recreating the exact
     bug this was meant to fix, just one element further out. */
  padding: 16px 16px 80px;
}

.settings-header {
  padding: 12px 0 20px;
}

.settings-title {
  /* Same as .section-head h2: Anton carries no Hebrew, so this fell to a
     per-device system face. Heebo is already loaded. */
  font-family: 'Anton', 'Heebo', sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: .5px;
  color: var(--color-text, #f0f4ff);
  text-transform: uppercase;
  margin: 0;
}

/* ── Section ─────────────────────────────────────────────── */
.settings-section {
  background: var(--color-surface, #111827);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}

.settings-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-muted, #6b7fa8);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.settings-hint {
  font-size: 12px;
  color: var(--color-muted, #6b7fa8);
  margin: 0 0 14px;
  line-height: 1.5;
}

/* ── Row ─────────────────────────────────────────────────── */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.settings-row:last-child { border-bottom: none; }

.settings-row-label {
  font-size: 14px;
  font-family: 'Barlow', sans-serif;
  color: var(--color-text, #f0f4ff);
}

/* Tap-to-show hint next to a toggle whose name alone isn't self-explanatory
   (e.g. "Hot Arena warning") — reported live, 2026-09-18. */
.settings-hint-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-inline-start: 6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: none;
  color: var(--color-muted, #9aa4c0);
  font-size: 10.5px;
  font-style: italic;
  font-family: Georgia, serif;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.settings-hint-text {
  margin: 4px 0 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: var(--color-muted, #9aa4c0);
  font-size: 12px;
  line-height: 1.5;
}
.settings-hint-text.hidden { display: none; }

/* ── Notification permission banner ─────────────────────────
   Shown when the master toggle says "on" but the browser hasn't actually
   granted permission — the toggle defaults to checked, so without this a
   user could sit with it lit and never receive a single notification with
   no visible reason why. */
.settings-notif-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin: 4px 0 10px;
  border-radius: 10px;
  background: rgba(var(--accent1-rgb, 111,19,48), 0.08);
  border: 1px solid rgba(var(--accent1-rgb, 111,19,48), 0.25);
}

.settings-notif-banner span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text, #f0f4ff);
  flex: 1;
  min-width: 180px;
}

/* Granted state — informational (the Android app-permission tip), not a
   warning, so it reads calmer than the "not active yet" / "blocked" states. */
.settings-notif-banner--ok {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.25);
}

.settings-notif-enable-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: var(--accent1, #6f1330);
  color: #fff;
  font-size: 13px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.settings-notif-enable-btn:hover { opacity: 0.85; }

/* ── Toggle switch ───────────────────────────────────────── */
.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input { display: none; }

.toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.12);
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-track {
  background: var(--color-nba-blue, #1d428a);
}

.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(20px);
}

/* ── Sync section ────────────────────────────────────────── */
.sync-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sync-toggle-label {
  font-size: 14px;
  color: var(--color-text, #f0f4ff);
}

.sync-slider-wrap {
  transition: opacity 0.2s;
}

.sync-offset-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.sync-offset-label {
  font-size: 12px;
  color: var(--color-muted, #6b7fa8);
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sync-offset-value {
  font-family: 'Anton', sans-serif;
  font-size: 32px;
  color: var(--color-text, #f0f4ff);
  letter-spacing: 1px;
}

.sync-slider {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.sync-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-nba-blue, #1d428a);
  border: 2px solid #fff;
  cursor: pointer;
}

.sync-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-nba-blue, #1d428a);
  border: 2px solid #fff;
  cursor: pointer;
}

.sync-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-muted, #6b7fa8);
  margin-top: 6px;
}

.sync-resync-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--color-muted, #6b7fa8);
  font-size: 12px;
  font-family: 'Barlow Condensed', sans-serif;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sync-resync-btn:hover { background: rgba(255,255,255,0.1); color: #f0f4ff; }

/* ── Language choice ─────────────────────────────────────── */
.settings-choice-group {
  display: flex;
  gap: 6px;
}

.choice-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--color-muted, #6b7fa8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.choice-btn.active {
  background: var(--color-nba-blue, #1d428a);
  border-color: var(--color-nba-blue, #1d428a);
  color: #fff;
}

/* ── Notification sub-section ────────────────────────────── */
.settings-notif-sub {
  transition: opacity 0.2s;
}

.settings-sub-heading {
  font-size: 11px;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-muted, #6b7fa8);
  margin: 14px 0 4px;
}

/* ── Danger button ────────────────────────────────────────── */
.settings-danger-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  color: #ef4444;
  font-size: 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.settings-danger-btn:hover { background: rgba(239,68,68,0.2); }

/* ── Version ─────────────────────────────────────────────── */
.settings-version {
  text-align: center;
  font-size: 11px;
  color: rgba(107,127,168,0.5);
  margin-top: 20px;
  font-family: 'Barlow Condensed', sans-serif;
}

/* ── Sync drift buttons (on bubbles) ─────────────────────── */
.sync-drift-btns {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-end;
}

.sync-drift-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 11px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--color-muted, #6b7fa8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sync-drift-btn:hover { background: rgba(255,255,255,0.12); color: #f0f4ff; }

.sync-drift-feedback {
  font-size: 11px;
  color: #22c55e;
  text-align: start;
  margin-top: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  opacity: 0;
  transition: opacity 0.3s;
}

.sync-drift-feedback.visible { opacity: 1; }

/* ════════════════════════════════════════════════════════════════════════
   LIGHT THEME (additive). Settings uses its own --color-* vars (undefined →
   dark fallbacks); map them to the themed palette and flip the white-alpha
   surfaces to dark-alpha so controls stay visible on white.
   ════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] #screen-settings,
html[data-theme="light"] #settings-screen {
  --color-bg:       var(--bg);
  --color-surface:  var(--bg-card);
  --color-text:     var(--text);
  --color-muted:    var(--muted);
  --color-nba-blue: var(--accent1);
}
html[data-theme="light"] .settings-section {
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(20,30,60,0.05);
}
html[data-theme="light"] .settings-row     { border-bottom-color: var(--border); }
html[data-theme="light"] .toggle-track      { background: rgba(20,26,40,0.16); }
html[data-theme="light"] .toggle-track::after { box-shadow: 0 1px 3px rgba(0,0,0,0.28); }
html[data-theme="light"] .sync-slider       { background: rgba(20,26,40,0.13); }
html[data-theme="light"] .choice-btn:not(.active),
html[data-theme="light"] .sync-resync-btn,
html[data-theme="light"] .sync-drift-btn {
  background: rgba(20,26,40,0.04);
  border-color: var(--border);
}
html[data-theme="light"] .choice-btn:not(.active):hover,
html[data-theme="light"] .sync-resync-btn:hover,
html[data-theme="light"] .sync-drift-btn:hover {
  background: rgba(20,26,40,0.08);
  color: var(--text);
}
html[data-theme="light"] .settings-version { color: var(--muted); opacity: 0.7; }

/* The destructive action has to be legible before it is scary: #ef4444
   measured 3.3:1 on the light panel. */
html[data-theme="light"] .settings-danger-btn { color: #b91c1c; }

/* ══ Dark theme ═════════════════════════════════════════════════
   The version line was a 50%-transparent muted tone — 2.06:1, the dimmest
   thing on this screen. The rest were hovering just under the line. */
html[data-theme="dark"] .settings-version      { color: #7b8496; }
html[data-theme="dark"] .settings-hint,
html[data-theme="dark"] .sync-offset-label,
html[data-theme="dark"] .sync-slider-labels span,
html[data-theme="dark"] .settings-sub-heading  { color: #7789af; }
html[data-theme="dark"] .settings-danger-btn   { color: #f15e5e; }