/* ══════════════════════════════════════════════════════════════════════
   SETTINGS MODAL — FINAL design system (single source of truth · drop-in)
   Base look = flat cards; API tab = grouped sections with slim headers;
   spacing = one strict scale. Load this LAST (after mobile.css) or delete
   the scattered .settings-* / .sett-tab blocks in base.css (239-355),
   pro.css (331, 559-606), glass.css (461-472), mobile.css (1000-1004,
   2052-2130) and responsive.css (438-446).
   PALETTE (3 colors only): gold var(--accent) · green var(--green) ·
   red var(--red); everything else neutral. All tints use color-mix() so
   they track Dark/Black/Blue/Golden/Light themes instead of frozen rgba.
   Preserves every id/handler and JS hook class (.sett-tab, .settings-status
   /.ok/.warn/.partial, .settings-input, .settings-save-btn,
   .settings-connect-btn, .settings-reveal-btn, .settings-tutorial,
   .settings-note, .settings-fieldhint). New classes are additive.
   Scope: #settTabs owns the tab strip; #settingsBody owns the panes.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Local spacing scale + shared label-column token ─────────────────── */
#settingsBody, #settTabs {
  --s1: 4px; --s2: 6px; --s3: 8px; --s4: 12px; --s5: 16px; --s6: 20px;
  --set-labelw: 148px;
  --set-fs-title: 0.8125rem;   /* 13 : title */
  --set-fs-body:  0.75rem;     /* 12 : desc / label / note / tutorial */
  --set-fs-micro: 0.6875rem;   /* 11 : hint / substatus / pill / value */
  --set-fs-group: 0.625rem;    /* 10 : group header */
}

/* ── Tab bar ─────────────────────────────────────────────────────────── */
#settTabs.sett-tabs {
  display: flex; gap: 2px; padding: 0 var(--s5);
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; background: transparent;
}
#settTabs.sett-tabs::-webkit-scrollbar { display: none; }
#settTabs .sett-tab {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--sans); font-size: var(--set-fs-title); font-weight: 500;
  color: var(--text3); padding: 11px 14px; cursor: pointer;
  white-space: nowrap; border-bottom: 2px solid transparent;
  letter-spacing: 0; transition: color .16s, border-color .16s;
}
#settTabs .sett-tab .ico-slot { flex-shrink: 0; opacity: .85; }
#settTabs .sett-tab:hover { color: var(--text2); }
#settTabs .sett-tab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }

/* ── Pane = stack of groups/cards ────────────────────────────────────
   switchSettTab() clears the inline display:none on the active pane, so
   this flex applies only to the visible pane; inactive panes stay hidden. */
#settingsBody .sett-pane { display: flex; flex-direction: column; gap: var(--s5); }

/* ── Group (API tab IA): slim uppercase header + stacked cards ───────── */
#settingsBody .settings-group { display: flex; flex-direction: column; gap: var(--s4); }
#settingsBody .settings-group-header {
  font-family: var(--sans); font-size: var(--set-fs-group); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text3);
  padding: 0 0 var(--s2) 2px; margin: 0;
  border-bottom: 1px solid var(--line);
}

/* ── Section = flat card (dividers gone) ─────────────────────────────── */
#settingsBody .settings-section {
  margin: 0; padding: var(--s5);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-bottom-color: var(--line) !important;   /* beats glass override */
  border-radius: var(--radius-lg);
}
#settingsBody .settings-section:last-child { border: 1px solid var(--line); }

/* ── Title row: icon + title + status pill hard-right ────────────────── */
#settingsBody .settings-title {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--sans); font-size: var(--set-fs-title); font-weight: 600;
  color: var(--text); margin: 0 0 var(--s2); letter-spacing: -0.01em;
}
#settingsBody .settings-title .ico-slot { flex-shrink: 0; color: var(--text2); }
#settingsBody .settings-title .settings-status { margin-left: auto; }

/* ── Status pill (3-color, neutral base, theme-tracking tints) ───────── */
#settingsBody .settings-status {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: var(--set-fs-group); font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--bg3); color: var(--text3);
  border: 1px solid var(--line2); white-space: nowrap;
}
#settingsBody .settings-status:empty { display: none; }
#settingsBody .settings-status.ok {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border-color: color-mix(in srgb, var(--green) 32%, transparent);
}
#settingsBody .settings-status.warn {                 /* was hardcoded #fca5a5 */
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border-color: color-mix(in srgb, var(--red) 34%, transparent);
}
#settingsBody .settings-status.partial {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}

/* ── Description + small footnote (replaces inline 0.625rem hacks) ───── */
#settingsBody .settings-desc {
  font-family: var(--sans); font-size: var(--set-fs-body); line-height: 1.55;
  color: var(--text3); margin: 0 0 var(--s4);
}
#settingsBody .settings-desc:last-child { margin-bottom: 0; }
#settingsBody .settings-desc b { color: var(--text2); font-weight: 600; }
#settingsBody .settings-desc.sm {
  font-size: var(--set-fs-micro); line-height: 1.45; margin: var(--s2) 0 0;
}

/* ── Field row: fixed label column + control + trailing button(s) ────── */
#settingsBody .settings-field {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0 0 var(--s2); padding: 0; border-bottom: none;
}
#settingsBody .settings-field:last-child { margin-bottom: 0; }
#settingsBody .settings-label {
  width: var(--set-labelw); min-width: var(--set-labelw); flex-shrink: 0;
  font-family: var(--sans); font-size: var(--set-fs-body); font-weight: 500;
  color: var(--text2); line-height: 1.3;
}
/* Optional wrapper: guarantees a flush right edge on button-less rows */
#settingsBody .settings-control {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--s2);
}
#settingsBody .settings-input {
  flex: 1 1 auto; min-width: 0; width: auto;
  background: var(--bg1) !important;            /* beats glass --glass-card */
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 7px 10px; color: var(--text);
  font-family: var(--mono); font-size: var(--set-fs-body);   /* mono = pasted value */
  outline: none; transition: border-color .16s;
}
#settingsBody .settings-input:focus { border-color: var(--accent) !important; }
#settingsBody .settings-input::placeholder { color: var(--text3); }
#settingsBody .settings-input[readonly] { color: var(--text3); background: var(--bg2) !important; cursor: default; }
/* Selects are reading controls: sans, shared max-width → aligned right edge */
#settingsBody select.settings-input {
  flex: 1 1 auto; max-width: 240px; cursor: pointer; font-family: var(--sans);
}
#settingsBody input[type="number"].settings-input { flex: 0 0 auto; width: 96px; }
/* Any toggle in a field row hugs the right column */
#settingsBody .settings-field .r-switch { margin-left: auto; }

/* ── Button role system (one shell, four roles) ──────────────────────
   green = save/add · gold = the ONE primary/connect per section ·
   neutral ghost = secondary (verify/refresh/sync/copy) · red = destructive */
#settingsBody .settings-save-btn,
#settingsBody .settings-connect-btn,
#settingsBody .settings-btn-ghost,
#settingsBody .settings-btn-danger,
#settingsBody .settings-reveal-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--sans); font-size: var(--set-fs-micro); font-weight: 600;
  padding: 6px 12px; border-radius: var(--radius); border: 1px solid transparent;
  margin: 0; line-height: 1.4; cursor: pointer; white-space: nowrap;
  transition: var(--transition);
}
#settingsBody .settings-save-btn {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 8%, transparent);
  border-color: color-mix(in srgb, var(--green) 28%, transparent);
}
#settingsBody .settings-save-btn:hover { background: color-mix(in srgb, var(--green) 16%, transparent); }
#settingsBody .settings-connect-btn {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
#settingsBody .settings-connect-btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
#settingsBody .settings-btn-ghost {
  color: var(--text2); background: var(--bg1); border-color: var(--line2); font-weight: 500;
}
#settingsBody .settings-btn-ghost:hover { color: var(--text); border-color: var(--text3); background: var(--bg3); }
#settingsBody .settings-btn-danger {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
}
#settingsBody .settings-btn-danger:hover { background: color-mix(in srgb, var(--red) 16%, transparent); }
/* Reveal (eye) — neutral, square footprint */
#settingsBody .settings-reveal-btn {
  flex-shrink: 0; color: var(--text2); background: var(--bg1);
  border-color: var(--line2); padding: 6px 9px;
}
#settingsBody .settings-reveal-btn:hover { color: var(--text); border-color: var(--text3); background: var(--bg3); }

/* Button cluster (one gap, single top margin — no doubled margin-top) */
#settingsBody .settings-btnrow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s3); margin-top: var(--s4);
}
#settingsBody .settings-btnrow > button { margin: 0; }

/* ── Secondary status line (one class for the 4 hand-styled divs) ────── */
#settingsBody .settings-substatus {
  font-family: var(--mono); font-size: var(--set-fs-micro); line-height: 1.45;
  color: var(--text3); margin: var(--s3) 0 0;
}
#settingsBody .settings-substatus:empty { margin: 0; }
#settingsBody .settings-substatus.ok  { color: var(--green); }
#settingsBody .settings-substatus.err { color: var(--red); }

/* ── Inline field hint (indent tracks the label token, no magic 96px) ── */
#settingsBody .settings-fieldhint {
  display: none; font-family: var(--mono); font-size: var(--set-fs-micro); line-height: 1.45;
  margin: var(--s1) 0 var(--s2) calc(var(--set-labelw) + var(--s2));
}
#settingsBody .settings-fieldhint.err { display: block; color: var(--red); }
#settingsBody .settings-fieldhint.ok  { display: block; color: var(--green); }

/* ── Tutorials = quiet neutral collapsibles with numbered steps ──────── */
#settingsBody .settings-tutorial {
  margin-top: var(--s3); background: var(--bg1);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
#settingsBody .settings-tutorial > summary {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--sans); font-size: var(--set-fs-body); font-weight: 500;
  color: var(--text2); padding: 8px 12px; cursor: pointer;
  user-select: none; list-style: none;
}
#settingsBody .settings-tutorial > summary::-webkit-details-marker { display: none; }
#settingsBody .settings-tutorial > summary .ico-slot { flex-shrink: 0; color: var(--text3); }
#settingsBody .settings-tutorial > summary::after {
  content: ""; margin-left: auto; width: 6px; height: 6px;
  border-right: 1.5px solid var(--text3); border-bottom: 1.5px solid var(--text3);
  transform: rotate(-45deg); transition: transform .16s;
}
#settingsBody .settings-tutorial[open] > summary { color: var(--text); border-bottom: 1px solid var(--line); }
#settingsBody .settings-tutorial[open] > summary::after { transform: rotate(45deg); }
#settingsBody .settings-tutorial > summary:hover { color: var(--text); }
/* body handles both raw <ol> and <div>-wrapped tutorials */
#settingsBody .settings-tutorial > ol  { margin: 0; padding: 12px 14px; }
#settingsBody .settings-tutorial > div { padding: 10px 14px 12px; }
#settingsBody .settings-tutorial ol {
  list-style: none; counter-reset: step; padding-left: 0; margin: var(--s2) 0;
}
#settingsBody .settings-tutorial ol > li {
  counter-increment: step; position: relative; padding-left: 30px;
  margin-bottom: var(--s3);
  font-family: var(--sans); font-size: var(--set-fs-body); color: var(--text2); line-height: 1.6;
}
#settingsBody .settings-tutorial ol > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; border-radius: var(--radius-pill);
  background: var(--bg3); border: 1px solid var(--line2); color: var(--text2);
  font-family: var(--mono); font-size: var(--set-fs-group); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
#settingsBody .settings-tutorial ul {
  list-style: disc; margin: var(--s1) 0; padding-left: 18px;
  font-family: var(--sans); font-size: var(--set-fs-body); color: var(--text2); line-height: 1.6;
}
#settingsBody .settings-tutorial ul > li { margin-bottom: var(--s1); }
#settingsBody .settings-tutorial p { font-family: var(--sans); font-size: var(--set-fs-body); color: var(--text2); line-height: 1.6; }
#settingsBody .settings-tutorial b { color: var(--text); font-weight: 600; }
#settingsBody .settings-tutorial a {
  color: var(--text2); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: var(--line2);
}
#settingsBody .settings-tutorial a:hover { color: var(--text); text-decoration-color: var(--text3); }
#settingsBody .settings-tutorial code {
  font-family: var(--mono); font-size: var(--set-fs-micro);
  background: var(--bg3); color: var(--text);
  padding: 1px 5px; border-radius: 4px; word-break: break-all;
}

/* ── Callout note (calm gold; accent lives on the icon only) ─────────── */
#settingsBody .settings-note {
  display: flex; align-items: flex-start; gap: var(--s2);
  margin-top: var(--s3); padding: 8px 10px; border-radius: var(--radius);
  font-family: var(--sans); font-size: var(--set-fs-micro); line-height: 1.5; color: var(--text2);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
#settingsBody .settings-note .ico-slot { flex-shrink: 0; color: var(--accent); margin-top: 1px; }
#settingsBody .settings-note b { color: var(--text); }

/* ── Copyable Redirect/Callback URI (one treatment for every OAuth) ──── */
#settingsBody .tut-copy {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin: var(--s2) 0; padding: 6px 8px;
  background: var(--bg3); border: 1px solid var(--line); border-radius: var(--radius);
}
#settingsBody .tut-copy code {
  flex: 1 1 auto; min-width: 0; background: none; padding: 0;
  font-family: var(--mono); font-size: var(--set-fs-micro); color: var(--text); word-break: break-all;
}
#settingsBody .tut-copy-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--sans); font-size: var(--set-fs-micro); font-weight: 600;
  padding: 5px 10px; border-radius: var(--radius);
  color: var(--text2); background: var(--bg1); border: 1px solid var(--line2);
  cursor: pointer; white-space: nowrap; transition: var(--transition);
}
#settingsBody .tut-copy-btn:hover { color: var(--text); border-color: var(--text3); }
#settingsBody .tut-link {
  display: inline-flex; align-items: center; gap: var(--s1);
  color: var(--text2); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: var(--line2);
}
#settingsBody .tut-link:hover { color: var(--text); text-decoration-color: var(--text3); }

/* ── Framed result panels (Activity boxes, backups list, PIN block) ──── */
#settingsBody .settings-subpanel {
  margin-top: var(--s3); padding: var(--s4);
  background: var(--bg1); border: 1px solid var(--line); border-radius: var(--radius);
}
#settingsBody .settings-logbox {
  margin-top: var(--s3); padding: var(--s3);
  max-height: 240px; min-height: 64px; overflow-y: auto;
  background: var(--bg1); border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--mono); font-size: var(--set-fs-micro); color: var(--text2); line-height: 1.6;
}
/* Errors log turns red only when JS marks it populated */
#settingsBody .settings-logbox.has-errors {
  background: color-mix(in srgb, var(--red) 6%, transparent);
  border-color: color-mix(in srgb, var(--red) 28%, transparent);
}

/* ── X two-step PIN: rebuilt on the system, no hardcoded colors ──────── */
#settingsBody .settings-input--pin {
  flex: 0 0 auto; width: 160px; text-align: center;
  font-size: 1.25rem; letter-spacing: 3px;
}

/* ── Account key/value rows (Cuenta) share the field rhythm ──────────── */
#settingsBody #settAccountInfo { display: flex; flex-direction: column; gap: 0; margin-top: var(--s2); }
#settingsBody .settings-kv {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 8px 0; border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: var(--set-fs-body);
}
#settingsBody .settings-kv:first-child { border-top: none; }
#settingsBody .settings-kv .k { color: var(--text3); }
#settingsBody .settings-kv .v { color: var(--text); font-family: var(--mono); word-break: break-all; }

/* ── Mobile: one breakpoint, stacked label-over-control ──────────────── */
@media (max-width: 768px) {
  #settTabs.sett-tabs { padding: 0 12px; }
  #settTabs .sett-tab { padding: 10px 12px; }
  #settingsBody .settings-section { padding: var(--s4) !important; }
  #settingsBody .settings-field {
    flex-wrap: wrap; gap: var(--s1) var(--s2) !important;
    padding: 0 !important; margin-bottom: var(--s3) !important; border-bottom: none !important;
  }
  #settingsBody .settings-label { width: 100% !important; min-width: 0 !important; margin-bottom: var(--s1); }
  #settingsBody .settings-control { flex: 1 1 100%; }
  #settingsBody .settings-input,
  #settingsBody select.settings-input {
    flex: 1 1 100% !important; width: 100% !important; max-width: none !important;
    height: 40px; padding: 0 12px !important;
  }
  #settingsBody input[type="text"].settings-input,
  #settingsBody input[type="email"].settings-input,
  #settingsBody input[type="password"].settings-input,
  #settingsBody input[type="number"].settings-input,
  #settingsBody input[type="tel"].settings-input,
  #settingsBody input[type="url"].settings-input { font-size: 16px !important; } /* iOS no-zoom */
  #settingsBody input[type="number"].settings-input { width: 100% !important; }
  #settingsBody .settings-field .r-switch { margin-left: auto; }
  #settingsBody .settings-fieldhint { margin-left: 0 !important; }
  #settingsBody .settings-title .settings-status { margin-left: auto; }
  #settingsBody .settings-save-btn,
  #settingsBody .settings-connect-btn,
  #settingsBody .settings-btn-ghost,
  #settingsBody .settings-btn-danger,
  #settingsBody .settings-reveal-btn { height: 40px; }
}