/* Phone Settings — grouped-list layout (one stylesheet owns this screen).
   Loaded last on host.html. Scope: the mobile shell's Settings page, the
   landscape quick-settings sheet, and the option picker sheet. Every size,
   color and radius comes from the --st-* tokens below; do not add literals. */
html.mobile-shell :is(#settings-overlay, .ms-quick-settings, .ms-picker) {
  --st-ink: #f4f1ea;
  --st-ink-muted: rgba(244, 241, 234, .62);
  --st-ink-faint: rgba(244, 241, 234, .38);
  --st-card: rgba(4, 27, 42, .66);
  --st-card-solid: #0b2c40;
  --st-sheet: #0d2d41;
  --st-line: rgba(255, 255, 255, .09);
  --st-press: rgba(255, 255, 255, .07);
  --st-control: rgba(255, 255, 255, .13);
  --st-accent: #f3a400;
  --st-accent-ink: #1a1405;
  --st-danger: #ff7b7b;
  --st-knob: #ffffff;
  --st-scrim: rgba(1, 12, 20, .58);
  --st-bar: rgba(3, 30, 46, .78);
  --st-r-card: 18px;
  --st-r-control: 12px;
  --st-r-sheet: 24px;
  --st-row: 52px;
  --st-pad: 16px;
  --st-gap: 24px;
  --st-fs-caption: 13px;
  --st-fs-value: 15px;
  --st-fs-row: 16px;
  --st-fs-title: 20px;
  --st-ease: cubic-bezier(.2, .9, .3, 1);
  --st-fast: 140ms;
  --st-base: 260ms;
  font-family: 'Cairo', sans-serif;
  color: var(--st-ink);
}

/* ── Page ───────────────────────────────────────────────────────────── */
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay {
  padding: 0 var(--st-pad) calc(var(--ms-bottom) + var(--st-gap));
  scroll-padding-top: calc(var(--ms-top) + 56px);
  background: transparent; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent;
}
html.mobile-shell #settings-overlay::-webkit-scrollbar { display: none; }
/* The artwork is a separate fixed layer behind the overlay, outside the
   scroller, so WebKit cannot drag it with the content (background-quality.css
   paints a fixed ::before inside the overlay, which is exactly what scrolled
   away on iPhone; it is disabled here for Settings only). */
html.mobile-shell #settings-overlay::before { display: none; }
html.mobile-shell .ms-settings-backdrop {
  position: fixed; inset: 0; z-index: 209; display: none; pointer-events: none;
  background-color: #032333;
  background-image: linear-gradient(rgba(2, 20, 32, .22), rgba(2, 20, 32, .22)), var(--mj-art-home);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
html.mobile-shell body.settings-overlay-open .ms-settings-backdrop { display: block; }
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay.open { animation: st-page-in var(--st-base) var(--st-ease) both; }
@keyframes st-page-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

/* ── Top bar: compact, sticky, frosted once the page scrolls ───────── */
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay .settings-topbar {
  top: 0; width: calc(100% + 2 * var(--st-pad)); margin: 0 calc(-1 * var(--st-pad)) var(--st-pad);
  padding: calc(var(--ms-top) + 4px) var(--st-pad) 8px; min-height: 0; box-sizing: border-box;
  grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 8px;
  background: transparent; box-shadow: none; border-bottom: 1px solid transparent;
  transition: background var(--st-fast) linear, border-color var(--st-fast) linear;
}
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay .settings-topbar.is-scrolled {
  background: var(--st-bar); border-bottom-color: var(--st-line);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
}
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay .settings-title {
  font-size: var(--st-fs-title) !important; line-height: 40px; font-weight: 700; color: var(--st-ink);
}
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay .settings-topbar .btn-back {
  grid-column: 1; width: 40px; min-width: 40px; height: 40px; min-height: 40px;
  padding: 0 !important; font-size: 0 !important; border: 0; border-radius: 50%; box-shadow: none;
  background: var(--st-control); color: var(--st-ink);
  transition: transform var(--st-fast) var(--st-ease), background var(--st-fast) linear;
}
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay .settings-topbar .btn-back::before {
  content: ''; display: block; width: 20px; height: 20px; margin: auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay .settings-topbar .btn-back:active { transform: scale(.92); background: var(--st-press); }

/* ── Groups and cards ───────────────────────────────────────────────── */
html.mobile-shell #settings-overlay .ms-group { margin: 0 0 var(--st-gap); }
html.mobile-shell #settings-overlay .ms-group-title,
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay .ms-sound > .settings-section-title {
  margin: 0 var(--st-pad) 8px; font-size: var(--st-fs-caption); font-weight: 700; color: var(--st-ink-muted); text-align: right;
}
html.mobile-shell #settings-overlay .ms-foot {
  margin: 8px var(--st-pad) 0; font-size: var(--st-fs-caption); line-height: 1.7; font-weight: 500; color: var(--st-ink-muted); text-align: right;
}
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .ms-card,
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay .ms-disclosure,
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay .ms-sound > .ms-card {
  margin: 0; padding: 0; border: 0; border-radius: var(--st-r-card); overflow: clip;
  background: var(--st-card); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px var(--st-line);
}

html.mobile-shell #settings-overlay .ms-card > .settings-section { width: 100%; max-width: none; margin: 0; padding: 0; }
html.mobile-shell #settings-overlay a.ms-row { text-decoration: none; }

/* Rows: label on the leading edge, control/value/chevron on the trailing edge. */
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) :is(.ms-row, .toggle-row, .vol-row),
html.mobile-shell.mobile-shell[data-shell-screen] :is(.ms-sound, .ms-quick-body) :is(.toggle-row, .vol-row),
html.mobile-shell.mobile-shell #settings-overlay .ms-sound :is(.toggle-row, .vol-row),
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay :is(.btn-fullscreen, .btn-mode-switch, .btn-account-history, .ms-signout),
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay summary {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: var(--st-row); margin: 0; padding: 0 var(--st-pad); box-sizing: border-box;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--st-ink); font: 600 var(--st-fs-row) / 1.4 'Cairo', sans-serif; text-align: right;
  transition: background var(--st-fast) linear;
}
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .vol-row,
html.mobile-shell.mobile-shell #settings-overlay .ms-sound .vol-row { display: block; padding-top: 12px; padding-bottom: 14px; border-top: 0; }
/* Hairline between rows, inset from the label edge. */
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .ms-card > :not(:first-child)::before,
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay .ms-disclosure > .settings-section > :not(:first-child)::before {
  content: ''; position: absolute; top: 0; inset-inline-start: var(--st-pad); inset-inline-end: 0; height: 1px; background: var(--st-line);
}
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) :is(.ms-row, .btn-fullscreen, .btn-mode-switch, .btn-account-history, .ms-signout, summary):active { background: var(--st-press); }
html.mobile-shell #settings-overlay .ms-row:disabled { opacity: .45; }
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .ms-row-label { flex: 1 1 auto; min-width: 0; }
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .ms-row-value { flex: 0 1 auto; font-size: var(--st-fs-value); font-weight: 600; color: var(--st-ink-muted); white-space: nowrap; }
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) :is(.toggle-label, .vol-label) { font-size: var(--st-fs-row); font-weight: 600; color: var(--st-ink); text-shadow: none; }
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .vol-pct { font-size: var(--st-fs-value); font-weight: 600; color: var(--st-ink-muted); font-variant-numeric: tabular-nums; }
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .vol-head { margin: 0 0 10px; }

/* Chevron on navigation rows; replaces the text arrows and ⇄ glyphs. */
html.mobile-shell #settings-overlay :is(.ms-row.is-nav, .btn-fullscreen, .btn-mode-switch, .btn-account-history, summary)::after {
  content: ''; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; background: var(--st-ink-faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--st-base) var(--st-ease);
}
html.mobile-shell #settings-overlay summary::after { transform: rotate(0deg); }
html.mobile-shell #settings-overlay details[open] > summary::after { transform: rotate(-90deg); }
html.mobile-shell #settings-overlay .btn-mode-switch > span[aria-hidden],
html.mobile-shell #settings-overlay .btn-account-history .bah-arrow { display: none; }
html.mobile-shell #settings-overlay .ms-disclosure > summary { font-weight: 600; }
html.mobile-shell #settings-overlay .ms-setting-value { display: none; }

/* Nested disclosures (how to play) and account details inside a card. */
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay .ms-disclosure > .settings-section { padding: 0; }
html.mobile-shell #settings-overlay .ms-help details { border-top: 1px solid var(--st-line); }
html.mobile-shell #settings-overlay .ms-help details > summary { padding-inline-start: calc(var(--st-pad) + 8px); }
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay .how-to-card { padding: 0 var(--st-pad) 14px; }
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay .how-to-card p { margin: 0; font-size: var(--st-fs-value); line-height: 1.9; font-weight: 500; color: var(--st-ink-muted); }
html.mobile-shell.mobile-shell #settings-overlay .ms-account .account-note {
  margin: 0; padding: 12px var(--st-pad); font-size: var(--st-fs-caption); line-height: 1.8; font-weight: 500; color: var(--st-ink-muted); text-align: right;
}
html.mobile-shell #settings-overlay .ms-account .account-note a { color: var(--st-ink); text-decoration: none; }
html.mobile-shell #settings-overlay .ms-account .account-note + .account-note::before,
html.mobile-shell #settings-overlay .ms-account > :not(:first-child)::before {
  content: ''; position: absolute; top: 0; inset-inline-start: var(--st-pad); inset-inline-end: 0; height: 1px; background: var(--st-line);
}
html.mobile-shell #settings-overlay .ms-account > * { position: relative; }
html.mobile-shell #settings-overlay .ms-delete summary { color: var(--st-danger); font-size: var(--st-fs-row); padding: 0 var(--st-pad); }
html.mobile-shell #settings-overlay .ms-delete summary::after { background: var(--st-danger); opacity: .6; }
html.mobile-shell #settings-overlay .ms-delete .account-note { padding-top: 0; }
html.mobile-shell #settings-overlay .btn-account-delete {
  display: block; width: calc(100% - 2 * var(--st-pad)); margin: 0 var(--st-pad) 14px; min-height: 46px;
  border: 0; border-radius: var(--st-r-control); background: rgba(255, 123, 123, .14); color: var(--st-danger);
  font: 700 var(--st-fs-row) 'Cairo', sans-serif; box-shadow: none;
}
html.mobile-shell #settings-overlay .btn-account-delete:active { background: rgba(255, 123, 123, .24); }

/* ── Switch ─────────────────────────────────────────────────────────── */
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .toggle-track,
html.mobile-shell.mobile-shell[data-shell-screen] .toggle-track {
  flex: 0 0 51px; width: 51px; min-width: 51px; height: 31px; min-height: 31px; padding: 0; margin: 0;
  border: 0; border-radius: 999px; background: var(--st-control); box-shadow: none; cursor: pointer;
  transition: background var(--st-base) var(--st-ease);
}
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .toggle-track.on,
html.mobile-shell #settings-overlay .toggle-track:not(.on) { background: var(--st-control); }
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .toggle-track.on { background: var(--st-accent); }
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .toggle-track::after,
html.mobile-shell.mobile-shell[data-shell-screen] .toggle-track::after {
  top: 2px; right: 2px; left: auto; width: 27px; height: 27px; background: var(--st-knob);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(0, 0, 0, .06);
  transition: right var(--st-base) var(--st-ease), left var(--st-base) var(--st-ease);
}
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .toggle-track.on::after { right: 22px; }

/* ── Slider: thin track, gold fill, large white thumb ───────────────── */
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .vol-slider,
html.mobile-shell.mobile-shell #settings-overlay .vol-slider {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; min-height: 28px; margin: 0; padding: 0;
  background: transparent; accent-color: var(--st-accent); direction: ltr;
  touch-action: pan-y; /* vertical swipes scroll the page; horizontal ones move the thumb */
}
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .vol-slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--st-accent) 0 var(--st-val, 100%), var(--st-control) var(--st-val, 100%) 100%);
}
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .vol-slider::-webkit-slider-thumb,
html.mobile-shell.mobile-shell #settings-overlay .vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -11px;
  border: 0; border-radius: 50%; background: var(--st-knob); box-shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(0, 0, 0, .08);
}
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .vol-slider::-moz-range-track { height: 4px; border-radius: 999px; background: var(--st-control); }
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .vol-slider::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--st-accent); }
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .vol-slider::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--st-knob); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
html.mobile-shell :is(#settings-overlay, .ms-quick-settings) .vol-row.muted { opacity: .45; }

/* ── Segmented control (appearance) ─────────────────────────────────── */
html.mobile-shell #settings-overlay .ms-row-segment { padding-top: 10px; padding-bottom: 10px; }
html.mobile-shell #settings-overlay .ms-appearance,
html.mobile-shell.mobile-shell #settings-overlay .ms-appearance {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; flex: 1 1 auto; width: 100%; padding: 3px; box-sizing: border-box;
  border-radius: var(--st-r-control); background: var(--st-control);
}
html.mobile-shell #settings-overlay .ms-appearance button,
html.mobile-shell.mobile-shell #settings-overlay .ms-appearance button {
  min-height: 34px; height: 34px; width: auto; min-width: 0; padding: 0 10px; gap: 8px;
  border: 0; border-radius: calc(var(--st-r-control) - 3px); box-shadow: none; background: transparent;
  color: var(--st-ink-muted); font: 600 var(--st-fs-value) 'Cairo', sans-serif;
  transition: background var(--st-fast) linear, color var(--st-fast) linear;
}
html.mobile-shell #settings-overlay .ms-appearance button[aria-pressed="true"],
html.mobile-shell.mobile-shell #settings-overlay .ms-appearance button[aria-pressed="true"] {
  background: var(--st-ink); color: var(--st-card-solid); box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
html.mobile-shell #settings-overlay .ms-color-swatch { width: 14px; height: 14px; border: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }

/* ── Option picker sheet ────────────────────────────────────────────── */
html.mobile-shell .ms-picker {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--st-ink); overflow: visible;
}
html.mobile-shell .ms-picker[open] { display: flex; align-items: flex-end; justify-content: center; }
html.mobile-shell .ms-picker::backdrop { background: var(--st-scrim); animation: st-fade-in var(--st-base) linear both; }
html.mobile-shell .ms-picker.is-closing::backdrop { animation: st-fade-out 200ms linear both; }
html.mobile-shell .ms-picker-sheet {
  width: 100%; max-width: 560px; box-sizing: border-box;
  padding: 8px var(--st-pad) calc(var(--ms-bottom) + 8px);
  border-radius: var(--st-r-sheet) var(--st-r-sheet) 0 0; background: var(--st-sheet);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .4);
  animation: st-sheet-up 320ms var(--st-ease) both;
}
html.mobile-shell .ms-picker.is-closing .ms-picker-sheet { animation: st-sheet-down 200ms ease-in both; }
html.mobile-shell .ms-picker-handle { width: 36px; height: 5px; margin: 0 auto 14px; border-radius: 999px; background: var(--st-ink-faint); }
html.mobile-shell .ms-picker-title { margin: 0 0 10px; font: 700 var(--st-fs-title) / 1.4 'IBM Plex Sans Arabic', 'Cairo', sans-serif; text-align: center; color: var(--st-ink); }
html.mobile-shell .ms-picker-options { border-radius: var(--st-r-card); background: var(--st-card-solid); box-shadow: inset 0 0 0 1px var(--st-line); overflow: clip; }
html.mobile-shell .ms-picker-option {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 54px; padding: 8px var(--st-pad); box-sizing: border-box; border: 0; background: transparent;
  color: var(--st-ink); font: 600 var(--st-fs-row) / 1.4 'Cairo', sans-serif; text-align: right;
  transition: background var(--st-fast) linear;
}
html.mobile-shell .ms-picker-option:not(:first-child)::before { content: ''; position: absolute; top: 0; inset-inline-start: var(--st-pad); inset-inline-end: 0; height: 1px; background: var(--st-line); }
html.mobile-shell .ms-picker-option:active { background: var(--st-press); }
html.mobile-shell .ms-picker-option-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
html.mobile-shell .ms-picker-option-sub { font-size: var(--st-fs-caption); font-weight: 500; color: var(--st-ink-muted); }
html.mobile-shell .ms-picker-option::after {
  content: ''; flex: 0 0 auto; width: 22px; height: 22px; background: var(--st-accent); opacity: 0; transform: scale(.6);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity var(--st-fast) linear, transform var(--st-base) var(--st-ease);
}
html.mobile-shell .ms-picker-option[aria-selected="true"]::after { opacity: 1; transform: none; }
html.mobile-shell .ms-picker-cancel {
  display: block; width: 100%; min-height: 50px; margin: 10px 0 0; border: 0; border-radius: var(--st-r-card);
  background: var(--st-control); color: var(--st-ink); font: 700 var(--st-fs-row) 'Cairo', sans-serif;
}
html.mobile-shell .ms-picker-cancel:active { background: var(--st-press); }
@keyframes st-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes st-sheet-down { from { transform: none; } to { transform: translateY(100%); } }
@keyframes st-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* ── Quick settings sheet (landscape play) shares the sheet look ────── */
html.mobile-shell .ms-quick-settings { border-radius: var(--st-r-sheet); background: var(--st-sheet); color: var(--st-ink); }
html.mobile-shell .ms-quick-body .ms-card { margin-bottom: 12px; }

@media (prefers-reduced-motion: reduce) {
  html.mobile-shell #settings-overlay.open, html.mobile-shell .ms-picker-sheet, html.mobile-shell .ms-picker::backdrop { animation: none !important; }
  html.mobile-shell #settings-overlay *, html.mobile-shell .ms-picker * { transition: none !important; }
}