/* === Settings module ==================================================
 * Tabs strip, section grouping, toggle switches, segmented controls.
 * ===================================================================== */

.settings {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--s-8);
  align-items: start;
}

@media (max-width: 900px) {
  .settings {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
}

/* ─── Tabs (left rail on desktop, top scroll on mobile) ───────────── */

.settings__tabs {
  position: sticky;
  top: calc(var(--topbar-h) + var(--s-4));
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  padding: var(--s-2);
  box-shadow: var(--sh-1);
}

@media (max-width: 900px) {
  .settings__tabs {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--s-1);
    gap: var(--s-1);
  }
  .settings__tab {
    scroll-snap-align: start;
    flex: 0 0 auto;
  }
}

.settings__tab {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 12px;
  border-radius: var(--rs);
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--t2);
  transition: background var(--t-fast), color var(--t-fast);
  text-align: left;
  white-space: nowrap;
}

.settings__tab:hover {
  background: var(--surface-2);
  color: var(--tx);
}

.settings__tab.is-active {
  background: var(--primary-tint);
  color: var(--primary-deep);
  font-weight: var(--w-semibold);
}

.settings__tab-icon {
  font-size: 13px;
  color: var(--t3);
  width: 16px;
  text-align: center;
}
.settings__tab.is-active .settings__tab-icon { color: var(--primary-deep); }

/* ─── Panel (right side) ───────────────────────────────────────────── */

.settings__panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  min-width: 0;
}

.settings-section {
  background: var(--surface);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

.settings-section__head {
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--b0);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.settings-section__title {
  font-family: var(--fd);
  font-size: var(--text-lg);
  font-weight: var(--w-semibold);
  color: var(--tx);
  letter-spacing: -0.02em;
}

.settings-section__sub {
  font-size: var(--text-xs);
  color: var(--t3);
  margin-top: 4px;
}

.settings-section__body {
  padding: var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* Row layout — label left, control right, on wide screens */
.settings-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--b0);
}
.settings-row:last-child { border-bottom: none; }

.settings-row__label {
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--tx);
  padding-top: 8px;
}
.settings-row__hint {
  font-size: var(--text-xs);
  color: var(--t3);
  margin-top: 4px;
  line-height: 1.5;
}

.settings-row__control {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 700px) {
  .settings-row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .settings-row__label { padding-top: 0; }
}

/* Two-column control grid (for address etc.) */
.settings-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
@media (max-width: 500px) {
  .settings-grid-2 { grid-template-columns: 1fr; }
}

/* ─── Toggle switch ───────────────────────────────────────────────── */

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  user-select: none;
}

.toggle__switch {
  position: relative;
  width: 38px;
  height: 22px;
  background: var(--surface-3);
  border-radius: var(--r-full);
  transition: background var(--t-fast);
}

.toggle__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--sh-1);
  transition: transform var(--t-fast);
}

.toggle input { display: none; }

.toggle input:checked + .toggle__switch {
  background: var(--primary);
}
.toggle input:checked + .toggle__switch::after {
  transform: translateX(16px);
}

.toggle input:disabled + .toggle__switch {
  opacity: 0.5;
  cursor: not-allowed;
}

.toggle__label {
  font-size: var(--text-sm);
  color: var(--tx);
}

/* ─── Segmented control ──────────────────────────────────────────── */

.segmented {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--b1);
  border-radius: var(--rs);
  padding: 3px;
  gap: 2px;
}

.segmented__option {
  padding: 6px 12px;
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--t2);
  border-radius: 5px;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}

.segmented__option:hover {
  color: var(--tx);
}

.segmented__option.is-active {
  background: var(--surface);
  color: var(--tx);
  box-shadow: var(--sh-1);
}

/* ─── Select (styled native) ─────────────────────────────────────── */

.field__select {
  width: 100%;
  padding: 11px 36px 11px 14px;
  background: var(--surface);
  border: 1px solid var(--b1);
  border-radius: var(--rs);
  color: var(--tx);
  font-size: var(--text-md);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  cursor: pointer;
}

.field__select:hover { border-color: var(--b2); }
.field__select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}

/* ─── Color swatch input ─────────────────────────────────────────── */

.color-input {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--b1);
  border-radius: var(--rs);
  padding: 6px 10px;
  transition: border-color var(--t-fast);
}
.color-input:hover { border-color: var(--b2); }
.color-input:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}

.color-input__swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--b1);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.color-input__swatch input[type="color"] {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: none;
  background: none;
  cursor: pointer;
}

.color-input__hex {
  flex: 1;
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--tx);
  padding: 4px 0;
  text-transform: uppercase;
}

/* ─── Save indicator (auto-save status) ──────────────────────────── */

.save-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--t3);
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  transition: opacity var(--t-fast);
}

.save-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--t4);
}

.save-status.is-saving {
  color: var(--info);
}
.save-status.is-saving .save-status__dot {
  background: var(--info);
  animation: pulse 1.2s ease-in-out infinite;
}

.save-status.is-saved {
  color: var(--primary-deep);
  background: var(--primary-tint);
}
.save-status.is-saved .save-status__dot {
  background: var(--primary);
}

.save-status.is-error {
  color: var(--negative);
  background: var(--negative-tint);
}
.save-status.is-error .save-status__dot {
  background: var(--negative);
}

/* ─── Read-only / locked field display ──────────────────────────── */

.locked-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px dashed var(--b2);
  border-radius: var(--rs);
  font-size: var(--text-sm);
  color: var(--t2);
}

.locked-field__icon { color: var(--t3); font-size: 12px; }

/* ─── Number preview chip ───────────────────────────────────────── */

.preview-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--b1);
  border-radius: var(--rs);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--primary-deep);
  font-weight: var(--w-medium);
}

.preview-chip__label {
  font-family: var(--fb);
  font-size: var(--text-2xs);
  font-weight: var(--w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t3);
}

/* ─── Token reference ────────────────────────────────────────────── */

.tokens-help {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--text-xs);
}

.tokens-help__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--b1);
  border-radius: 4px;
  font-family: var(--font-mono);
  color: var(--t2);
}

.tokens-help__key {
  color: var(--primary-deep);
  font-weight: var(--w-medium);
}