/* ══════════════════════════════════
   SETTINGS SHEET — sections, rows, segmented controls, formula editor, exercise accordion
══════════════════════════════════ */

/* Sheets stay mounted so they can animate: the backdrop fades and the panel
   slides up, matching the comparison drawer's motion. `visibility` is delayed
   out so the exit animation can play before it leaves the a11y tree. */
.settings-sheet { position: absolute; inset: 0; z-index: 100;
  background: rgba(0,0,0,0); display: flex; align-items: flex-end;
  visibility: hidden; pointer-events: none;
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition: background var(--dur-slow) var(--ease),
              -webkit-backdrop-filter var(--dur-slow) var(--ease),
              backdrop-filter var(--dur-slow) var(--ease),
              visibility 0s linear var(--dur-slow); }
.settings-sheet.open { visibility: visible; pointer-events: auto;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition-delay: 0s; }
.settings-inner { width: 100%; background: var(--s1); border-radius: 16px 16px 0 0;
  border-top: 1px solid var(--b2); padding-bottom: env(safe-area-inset-bottom);
  max-height: 82vh; max-height: 82dvh; display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(100%); will-change: transform;
  transition: transform var(--dur-slow) var(--ease); }
.settings-sheet.open .settings-inner { transform: translateY(0); }
.settings-hdr { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--b); flex-shrink: 0; }
.settings-title { font-size: 15px; font-weight: 700; color: var(--text); }
.settings-close { width: 26px; height: 26px; border-radius: 50%; background: var(--s2);
  color: var(--dim); font-size: 14px; display: flex; align-items: center; justify-content: center; }
.settings-close:hover { background: var(--s3); }
.settings-body { padding: 0 16px 28px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain; }
.settings-body::-webkit-scrollbar { width: 3px; }
.settings-body::-webkit-scrollbar-thumb { background: var(--s3); border-radius: 2px; }
/* Sections */
.set-sec { margin-top: 18px; }
.set-sec-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); padding-bottom: 6px; }
/* Setting rows */
.setting-row { display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid var(--b); gap: 12px; }
.setting-row:last-child { border-bottom: none; }
.setting-label { font-size: 14px; color: var(--text); flex-shrink: 0; }
.setting-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.setting-ctrl { display: flex; align-items: center; gap: 10px; }
.set-step { width: 32px; height: 32px; border-radius: 9px; background: var(--s3);
  color: var(--text); font-size: 18px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--b2); flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease); }
.set-step:hover { background: var(--s4); }
.set-val { font-size: 15px; font-weight: 700; color: var(--acc);
  font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
/* Segmented control */
.seg-ctrl { display: flex; gap: 2px; background: var(--s2); border-radius: 9px; padding: 3px; }
.seg-btn { flex: 1; padding: 5px 0; border-radius: 7px; font-size: 11px; font-weight: 600;
  color: var(--dim); text-align: center; transition: all .12s; white-space: nowrap; }
.seg-btn.on { background: var(--acc); color: #fff; }
.seg-btn:hover:not(.on) { background: var(--s3); color: var(--text); }
/* Action button (e.g. "Check for updates") */
.set-action-btn { padding: 6px 12px; border-radius: 8px; font-size: 12px; color: var(--dim);
  border: 1px solid var(--b2); background: var(--s2); transition: all .12s;
  white-space: nowrap; flex-shrink: 0; }
.set-action-btn:hover { background: var(--s3); color: var(--text); }
.set-action-btn:active { opacity: .6; }
/* Theme swatches */
.theme-swatches { display: flex; gap: 8px; }
.theme-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--b2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all .12s; }
.theme-swatch .ts-dot { width: 12px; height: 12px; border-radius: 50%; }
.theme-swatch:hover { border-color: var(--dim); }
.theme-swatch.on { border-color: var(--acc);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 25%, transparent); }
/* Toggle switch */
.set-toggle { width: 44px; height: 24px; border-radius: 12px; background: var(--s3);
  border: 1px solid var(--b2); position: relative; cursor: pointer; transition: background .15s;
  flex-shrink: 0; }
.set-toggle::after { content: ''; position: absolute; width: 18px; height: 18px;
  border-radius: 50%; background: var(--dim); top: 2px; left: 2px; transition: all .15s; }
.set-toggle.on { background: var(--acc); border-color: var(--acc); }
.set-toggle.on::after { left: 22px; background: #fff; }
/* Formula list */
.formula-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--b); }
.formula-name { flex: 1; font-size: 13px; color: var(--text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.formula-built-in { font-size: 10px; color: var(--muted); font-style: italic; }
.formula-badge { font-size: 10px; color: var(--muted); background: var(--s2);
  padding: 2px 7px; border-radius: 5px; white-space: nowrap; flex-shrink: 0; }
.formula-badge.err { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.formula-act { width: 24px; height: 24px; border-radius: 6px; font-size: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: var(--dim); transition: all .12s; }
.formula-act:hover { background: var(--s3); color: var(--text); }
.formula-del { color: var(--bad); }
.formula-del:hover { background: rgba(248,113,113,.1); color: var(--bad); }
.formula-add-btn { width: 100%; margin-top: 10px; padding: 8px; border-radius: 9px;
  font-size: 12px; color: var(--acc); border: 1px dashed color-mix(in srgb, var(--acc) 30%, transparent);
  text-align: center; transition: all .12s; }
.formula-add-btn:hover { background: color-mix(in srgb, var(--acc) 6%, transparent); }
/* Formula editor */
.formula-editor { background: var(--s2); border-radius: 10px; padding: 12px 12px 10px;
  margin-top: 10px; border: 1px solid var(--b2); }
.set-field { margin-bottom: 10px; }
.set-field-lbl { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.set-input { width: 100%; background: var(--s3); border: 1px solid var(--b2); border-radius: 8px;
  padding: 7px 10px; font-size: 13px; color: var(--text);
  font-family: 'SF Mono', 'Fira Code', monospace; transition: border-color .12s; }
.set-input.plain { font-family: inherit; }
.set-input:focus { border-color: color-mix(in srgb, var(--acc) 50%, transparent); }
.set-hint { font-size: 11px; color: var(--muted); line-height: 1.55; }
.set-preview { font-size: 12px; color: var(--acc); margin-top: 6px; }
.set-err { font-size: 12px; color: var(--bad); margin-top: 6px; }
.fed-row { display: flex; gap: 8px; margin-top: 10px; }
.fed-save { flex: 1; padding: 8px; border-radius: 8px; background: var(--acc);
  color: #fff; font-size: 13px; font-weight: 600; transition: opacity .12s; }
.fed-save:hover { opacity: .85; }
.fed-cancel { flex: 1; padding: 8px; border-radius: 8px; background: var(--s3);
  color: var(--dim); font-size: 13px; border: 1px solid var(--b2); transition: all .12s; }
.fed-cancel:hover { background: var(--s4); color: var(--text); }
/* Select element */
.set-select { width: 100%; background: var(--s3); border: 1px solid var(--b2); border-radius: 8px;
  padding: 7px 10px; font-size: 13px; color: var(--text); font-family: inherit; }
/* Exercise accordion */
.ex-setting-row { border-bottom: 1px solid var(--b); }
.ex-setting-row:last-child { border-bottom: none; }
.ex-setting-hdr { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; cursor: pointer; -webkit-user-select: none; user-select: none; }
.ex-setting-name { font-size: 13px; color: var(--text); min-width: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 8px; }
.ex-override-dot { color: var(--acc); font-size: 8px; vertical-align: super; }
.ex-setting-badge { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.ex-setting-body { padding-bottom: 10px; display: none; }
.ex-setting-body.open { display: block; }
.ex-set-sec { margin-bottom: 10px; }
.ex-set-lbl { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.ex-reset-btn { font-size: 11px; color: var(--bad); padding: 2px 0; margin-top: 2px; }
.ex-reset-btn:hover { opacity: .7; }