/* ═════════════════════════════════════════════════════════════════════════
   SETTINGS & NOTIFICATIONS — the redesign (23.10.2026), from the Claude Design "Settings" file.
   A sticky head with a back arrow and the title, the four sections as chips on a phone and as a
   list at the side on a desktop; each section numbered; switches, a slider with a big number,
   two segmented choices, league tiles, the notifications banner (with the iPhone steps), the
   cache button that asks first, three links and the version. Square corners, ink as the one
   action colour. Phone, tablet and desktop follow the screen's own width.
   ═════════════════════════════════════════════════════════════════════════ */

#screen-settings { background: var(--ds-bg); height: 100%; overflow: hidden; }

/* The element that scrolls spans the whole screen (so the wheel works anywhere on it);
   .sx is the centred reading column inside it. */
#settings-screen {
  height: 100%; width: 100%; box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--ds-bg);
  padding-bottom: 96px;   /* the last section must be reachable, not cut at the screen edge (owner, 26.10) */
  color: var(--ds-ink); font-family: var(--ds-font);
}

.sx { container-type: inline-size; container-name: sx; position: relative; min-height: 100%; font-size: 15px; line-height: 1.5; }
.sx *, .sx *::before, .sx *::after { box-sizing: border-box; }
.sx :where(h1, h2, p, ol, ul) { margin: 0; padding: 0; }
.sx :where(ol, ul) { list-style: none; }
.sx button { font-family: inherit; }
.sx button:focus-visible, .sx a:focus-visible, .sx input:focus-visible + .sx-track, .sx input:focus-visible ~ .sx-box, .sx input[type=range]:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.sx .hidden { display: none !important; }
.sx [hidden] { display: none !important; }

/* ── Head ── */
.sx-head { position: sticky; top: 0; z-index: 5; background: var(--ds-bg); border-bottom: 1px solid var(--ds-line); padding: 12px 8px 0; }
.sx-head-row { display: flex; align-items: center; gap: 6px; }
.sx-back { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 0; background: none; color: var(--ds-ink); cursor: pointer; }
.sx-back:hover { background: var(--ds-soft); }
.sx-head h1 { font: 900 24px/1.15 var(--ds-font); letter-spacing: -.02em; }
.sx-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 12px; }
.sx-chips::-webkit-scrollbar { display: none; }
.sx-chips button {
  flex: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--ds-line); border-radius: 0;
  background: transparent; color: var(--ds-ink); font: 700 14px var(--ds-font); cursor: pointer; white-space: nowrap;
}
.sx-chips button span { font: 800 13px/1 var(--ds-font-num); color: var(--ds-ink2); }
.sx-chips button[aria-current="true"] { border-color: var(--ds-ink); background: var(--ds-ink); color: var(--ds-bg); }
.sx-chips button[aria-current="true"] span { color: inherit; }
.sx-nav { display: none; }

/* ── Layout ── */
.sx-grid { max-width: 720px; margin: 0 auto; padding: 14px 10px 96px; }
.sx-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.sx-sec { display: flex; flex-direction: column; gap: 12px; padding: 18px 14px; background: var(--ds-card); border: 1px solid var(--ds-line); scroll-margin-top: 130px; }
.sx-sec-h { display: flex; align-items: baseline; gap: 12px; padding-bottom: 14px; margin-bottom: 2px; border-bottom: 1px solid var(--ds-line); }
.sx-sec-n { font: 800 17px/1 var(--ds-font-num); letter-spacing: .08em; color: var(--ds-ink2); }
.sx-sec-h h2 { font: 900 20px/1.2 var(--ds-font); letter-spacing: -.01em; }
.sx-p { font-size: 14px; line-height: 1.6; color: var(--ds-ink2); text-wrap: pretty; }
.sx-p--confirm { color: var(--ds-live); font-weight: 700; }

/* ── Switch rows ── */
.sx-rowwrap { border-bottom: 1px solid var(--ds-line); }
.sx-rowwrap.last { border-bottom: 0; }
.sx-row { display: flex; align-items: center; gap: 4px; min-height: 58px; border-bottom: 1px solid var(--ds-line); }
.sx-rowwrap > .sx-row, .sx-row.last, #sync-enabled-toggle { border-bottom: 0; }
.sx-row.master { min-height: 66px; }
.sx-row.master .sx-label { font: 800 17px/1.35 var(--ds-font); }
.sx-label { flex: 1; min-width: 0; font: 600 15px/1.45 var(--ds-font); cursor: pointer; }
.sx-info { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 0; background: none; color: var(--ds-ink2); cursor: pointer; }
.sx-info[aria-expanded="true"] { color: var(--ds-ink); }
.sx-hint { margin: 0 0 14px; padding: 12px 14px; background: var(--ds-bg); font: 600 14px/1.6 var(--ds-font); color: var(--ds-ink); text-wrap: pretty; }

.sx-sw { flex: none; position: relative; width: 60px; height: 48px; display: grid; place-items: center; cursor: pointer; }
.sx-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.sx-track {
  position: relative; display: block; width: 48px; height: 28px; border-radius: 999px; border: 2px solid var(--ds-ink2); background: transparent;
  transition: background var(--ds-t-ctrl) ease, border-color var(--ds-t-ctrl) ease; pointer-events: none;
}
.sx-knob {
  position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ds-ink2);
  transition: inset-inline-start var(--ds-t-ctrl) ease, background var(--ds-t-ctrl) ease;
}
.sx-sw input:checked + .sx-track { border-color: var(--ds-ink); background: var(--ds-ink); }
.sx-sw input:checked + .sx-track .sx-knob { inset-inline-start: 22px; background: var(--ds-bg); }
.sx-sw input:disabled { cursor: not-allowed; }
.sx-sw input:disabled + .sx-track { opacity: .45; }

/* ── Slider ── */
.sx-slider { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--ds-bg); transition: opacity var(--ds-t-ctrl) ease; }
.sx-slider.off { opacity: .5; }
.sx-slider-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sx-slider-top label { font: 800 14px var(--ds-font); }
.sx-slider-top > span { display: flex; align-items: baseline; gap: 6px; }
.sx-slider-top b { font: 800 56px/.9 var(--ds-font-num); font-variant-numeric: tabular-nums; }
.sx-slider-top > span > span { font: 700 14px var(--ds-font); color: var(--ds-ink2); }
.sx-slider-ends { display: flex; justify-content: space-between; gap: 12px; font: 600 13px var(--ds-font); color: var(--ds-ink2); }
.sx .sync-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; --sx-pct: 0%; }
.sx .sync-slider:disabled { cursor: not-allowed; }
.sx .sync-slider::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(to right, var(--ds-ink) 0 var(--sx-pct), var(--ds-line) var(--sx-pct) 100%); }
.sx[dir="rtl"] .sync-slider::-webkit-slider-runnable-track { background: linear-gradient(to left, var(--ds-ink) 0 var(--sx-pct), var(--ds-line) var(--sx-pct) 100%); }
.sx .sync-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--ds-card); border: 3px solid var(--ds-ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.sx .sync-slider::-moz-range-track { height: 6px; background: var(--ds-line); }
.sx .sync-slider::-moz-range-progress { height: 6px; background: var(--ds-ink); }
.sx .sync-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--ds-card); border: 3px solid var(--ds-ink); }

/* ── Buttons ── */
.sx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ds-ink); border-radius: 0;
  background: transparent; color: var(--ds-ink); font: 800 14px var(--ds-font); cursor: pointer; transition: background var(--ds-t-ctrl) ease;
}
.sx-btn:hover:not(:disabled) { background: var(--ds-soft); }
.sx-btn:disabled { opacity: .45; cursor: not-allowed; }
.sx-btn--solid { border-color: transparent; background: var(--ds-ink); color: var(--ds-card); }
.sx-btn--solid:hover:not(:disabled) { background: var(--ds-ink); opacity: .9; }
.sx-btn--danger { min-height: 48px; border-color: var(--ds-live); color: var(--ds-live); }
.sx-cancel { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border: 1.5px solid var(--ds-line); border-radius: 0; background: transparent; color: var(--ds-ink); cursor: pointer; }
.sx-done { display: flex; align-items: center; gap: 8px; min-height: 48px; font: 800 15px var(--ds-font); color: var(--ds-ok); }

/* ── Segmented choices ── */
.sx-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.sx-seg .choice-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 0; border-radius: 0; background: transparent; color: var(--ds-ink);
  font: 800 15px var(--ds-font); cursor: pointer; transition: background var(--ds-t-ctrl) ease;
  border: 1.5px solid var(--ds-ink);
}
.sx-seg .choice-btn.active { background: var(--ds-ink); color: var(--ds-card); }

/* ── Notifications: banner, leagues, tiles ── */
.sx-banner { --sx-tone: var(--ds-ink2); display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 2px 0 4px; background: var(--ds-bg); border: 1px solid var(--ds-line); }
.sx-banner-ic { flex: none; width: 24px; height: 24px; display: grid; place-items: center; margin-top: 1px; color: var(--sx-tone); }
.sx-banner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sx-banner-body p { font: 700 14px/1.6 var(--ds-font); color: var(--ds-ink); text-wrap: pretty; }
.sx-steps { display: flex; flex-direction: column; gap: 6px; }
.sx-steps:empty { display: none; }
.sx-steps li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 12px; background: var(--ds-card); border: 1px solid var(--ds-line); }
.sx-steps b { flex: none; min-width: 18px; font: 800 24px/1 var(--ds-font-num); color: var(--ds-ink2); }
.sx-steps svg { flex: none; }
.sx-steps span { font: 700 14px/1.4 var(--ds-font); }
.sx-subhead { display: flex; flex-direction: column; gap: 2px; padding: 12px 0 2px; }
.sx-subhead span { font: 800 14px var(--ds-font); }
.sx-subhead small { font: 600 13px var(--ds-font); color: var(--ds-ink2); }
.sx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 0 18px; border-bottom: 1px solid var(--ds-line); }
.sx-tile {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--ds-line); background: transparent;
  color: var(--ds-ink); font: 700 14px/1.3 var(--ds-font); cursor: pointer; min-width: 0;
}
.sx-tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.sx-box { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid var(--ds-ink2); color: var(--ds-bg); }
.sx-box svg { opacity: 0; }
.sx-tile:has(input:checked) { border-color: var(--ds-ink); }
.sx-tile input:checked ~ .sx-box { border-color: var(--ds-ink); background: var(--ds-ink); }
.sx-tile input:checked ~ .sx-box svg { opacity: 1; }
.sx-tile:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.settings-notif-sub { transition: opacity var(--ds-t-ctrl) ease; }

/* ── Links, version, toast ── */
.sx-links { display: flex; flex-direction: column; padding: 2px 14px 4px; border: 1.5px dashed var(--ds-line); margin-top: 4px; }
.sx-links a { display: flex; align-items: center; gap: 12px; min-height: 52px; color: var(--ds-ink); text-decoration: none; font: 700 15px/1.35 var(--ds-font); border-bottom: 1px solid var(--ds-line); }
.sx-links a:last-child { border-bottom: 0; }
.sx-links a:hover { background: var(--ds-soft); }
.sx-links a span { flex: 1; min-width: 0; }
.sx-foot { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--ds-line); font: 600 13px/1.55 var(--ds-font); color: var(--ds-ink2); }
.sx-foot b { font-weight: 800; color: var(--ds-ink); }
.sx-toast {
  position: fixed; inset-inline: 16px; bottom: 84px; margin: 0 auto; z-index: 60; width: max-content; max-width: calc(100% - 32px); padding: 12px 16px;
  background: var(--ds-ink); color: var(--ds-bg); font: 700 14px/1.4 var(--ds-font); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); animation: sxIn var(--ds-t-layer) ease-out;
}
@keyframes sxIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .sx-track, .sx-knob, .sx-toast { transition: none; animation: none; } }

/* ── Wider: tablet and desktop, by the screen's own width ── */
@container sx (min-width: 600px) {
  .sx-head { padding: 20px 18px 0; }
  .sx-head h1 { font-size: 30px; }
  .sx-grid { padding: 24px 22px 48px; }
  .sx-col { gap: 16px; }
  .sx-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sx-sec { padding: 24px 28px; }
}
@container sx (min-width: 1000px) {
  .sx-head { padding: 16px 24px; }
  .sx-head h1 { font-size: 34px; }
  .sx-chips { display: none; }
  .sx-grid { display: grid; grid-template-columns: 200px minmax(0, 720px); justify-content: center; align-items: start; gap: 40px; max-width: none; padding: 32px 28px 56px; }
  .sx-nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; }
  .sx-nav button {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-inline-start: 3px solid transparent; border-radius: 0;
    background: none; color: var(--ds-ink2); font: 700 15px var(--ds-font); cursor: pointer; text-align: start;
  }
  .sx-nav button span { font: 800 14px/1 var(--ds-font-num); letter-spacing: .06em; color: var(--ds-ink2); }
  .sx-nav button[aria-current="true"] { color: var(--ds-ink); border-inline-start-color: var(--ds-ink); background: var(--ds-soft); }
}

/* The delay slider takes the page's ink, never a browser blue */
.sx .sync-slider { accent-color: var(--ds-ink); }