/* Settings (#/settings…), every signed-in account (design §20.11, §21.6–§21.8,
   docs/monarch-reference/settings.md). One section's card at a time in the content column (about
   760px), flush left. The owner's page adds Monarch's settings sub-nav at left (.st-layout), which
   moves above the card as a row of pills under 1024px. Each card has a title row, a short
   description, then the section's rows, setting, form or actions. Organic tokens only.
   The bank setup form inside Bank connections is bank-setup.js, styled in connect.css (.bs-*);
   the password fields and checklist reuse auth.css (.auth-field, .auth-pw, .auth-rules).
   Security's second card, Two-step login (settings-2fa.js, §24.8), uses .tf-*; its dialogs render in
   #overlay-root, outside .page-settings, so those rules are not scoped to the page. */

.page-settings .st-page,
.page-settings .st {
  --st-muted: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.page-settings .st {
  max-width: 760px;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding-bottom: var(--space-8);
}
.page-settings .st-card { padding: var(--space-6); gap: var(--space-4); border-radius: var(--radius-lg); }
.page-settings .st-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.page-settings .st-title { margin: 0; font-size: 24px; line-height: 1.2; }
.page-settings .st-title:focus { outline: none; }
.page-settings .st-title:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.page-settings .st-tag:empty { display: none; }
.page-settings .st-content { display: flex; flex-direction: column; gap: var(--space-4); }
.page-settings .st-lede { margin: 0; font-size: 15px; line-height: 1.5; color: var(--st-muted); max-width: 60ch; }
.page-settings .st-loading { margin: 0; font-size: 14px; color: var(--st-muted); }
.page-settings .st-once-slot:empty, .page-settings .st-error:empty, .page-settings .st-pw-notice:empty { display: none; }
.page-settings .st-foot { margin: 0; font-size: 13px; line-height: 1.5; color: var(--st-muted); max-width: 60ch; }

/* ── the owner's layout: the sub-nav beside one section's card ────────── */
.page-settings .st-layout {
  display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 760px);
  gap: var(--space-6); align-items: start;
}
.page-settings .st-subnav { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.page-settings .st-subnav-card { padding: var(--space-3); gap: var(--space-1); border-radius: var(--radius-lg); }
.page-settings .st-subnav-title {
  margin: 0; padding: var(--space-1) var(--space-3);
  font-size: 13px; font-weight: 600; color: var(--st-muted);
}
.page-settings .st-subnav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-1);
}
.page-settings .st-subnav-link {
  display: block; padding: var(--space-2) var(--space-3); border-radius: 999px;
  font-size: 14px; line-height: 1.3; color: inherit; text-decoration: none;
  transition: background 0.15s;
}
.page-settings .st-subnav-link:hover { background: var(--color-accent-100); }
.page-settings .st-subnav-link:active { background: var(--color-accent-200); }
.page-settings .st-subnav-link[aria-current="page"] { background: var(--color-accent-100); color: var(--color-accent-800); font-weight: 600; }
.page-settings .st-subnav-link[aria-current="page"]:active { background: var(--color-accent-200); }
.page-settings .st-subnav-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* notices (Organic tones through the auth notice styles) */
.page-settings .st-notice { align-items: flex-start; }
.page-settings .st-notice:focus { outline: none; }
.page-settings .st-notice:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.page-settings .st-notice-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.page-settings .st-notice-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* label / value rows: two columns, one under 480px */
.page-settings .st-rows {
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: var(--space-3) var(--space-6);
  margin: 0; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-neutral-100);
}
.page-settings .st-row { display: contents; }
.page-settings .st-row dt { font-size: 13px; font-weight: 600; color: var(--st-muted); padding-top: 0.1em; }
.page-settings .st-row dd {
  margin: 0; min-width: 0; font-size: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2);
}
.page-settings .st-row dd .progress { flex: 1 1 100%; max-width: 320px; }
.page-settings .st-slots { margin: 0; flex: 1 1 100%; }
.page-settings .st-left { color: var(--color-accent-700); font-weight: 600; }
.page-settings .st-muted { margin: 0; flex: 1 1 100%; font-size: 13px; color: var(--st-muted); max-width: 54ch; }
.page-settings .st-code {
  font-family: var(--font-body); font-weight: 600; font-size: 0.92em;
  padding: 0 var(--space-2); border-radius: 999px; overflow-wrap: anywhere;
  background: var(--color-neutral-200); color: var(--color-neutral-900);
}

/* ── a setting row (Members): the label and its description at left, the switch at right ── */
.page-settings .st-members-body { display: flex; flex-direction: column; gap: var(--space-4); }
.page-settings .st-setting {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-neutral-100);
}
.page-settings .st-setting-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.page-settings .st-setting-label { font-weight: 600; font-size: 15px; cursor: pointer; }
.page-settings .st-setting-desc { margin: 0; font-size: 14px; line-height: 1.45; color: var(--st-muted); max-width: 54ch; }
.page-settings .st-setting .switch { margin-top: var(--space-1); }
.page-settings .st-setting-status { margin: calc(var(--space-2) * -1) 0 0 var(--space-4); font-size: 13px; color: var(--st-muted); }
/* Saving: the switch keeps focus (aria-disabled, never disabled) and looks busy. app.css styles only
   .switch:disabled, so the hover and pressed fills and the pressed knob are held at rest here. */
.page-settings .st-setting .switch[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.page-settings .st-setting .switch[aria-disabled="true"]:hover,
.page-settings .st-setting .switch[aria-disabled="true"]:active { background: var(--color-neutral-300); }
.page-settings .st-setting .switch[aria-disabled="true"]:checked,
.page-settings .st-setting .switch[aria-disabled="true"]:checked:hover,
.page-settings .st-setting .switch[aria-disabled="true"]:checked:active { background: var(--color-accent); }
.page-settings .st-setting .switch[aria-disabled="true"]:active::before { width: 16px; }
.page-settings .st-setting .switch[aria-disabled="true"]:checked:active::before { transform: translateX(16px); }

/* ── the Password form (Security) ─────────────────────────────────────── */
.page-settings .st-pw-form {
  --auth-muted: var(--st-muted);   /* the checklist's muted rows, outside .auth */
  max-width: 420px; gap: var(--space-4);
}
.page-settings .st-pw-form .input { background: var(--color-bg); }
.page-settings .st-pw-form .auth-submit {
  align-self: flex-start; width: auto; min-height: 0; font-size: inherit; margin-top: var(--space-1);
}

/* ── the Two-step login card (Security, settings-2fa.js, design §24.8) ── */
.page-settings .tf-rows { display: flex; flex-direction: column; gap: var(--space-3); }
.page-settings .tf-row { align-items: center; }
.page-settings .tf-row-title { margin: 0; font-size: 17px; line-height: 1.25; }
.page-settings .tf-row .btn { flex: none; }

/* ── its dialogs (in #overlay-root, outside .page-settings) ───────────── */
.tf-dialog {
  --tf-muted: color-mix(in srgb, var(--color-text) 70%, transparent);
  --auth-muted: var(--tf-muted);
}
.tf-dialog .dialog-title:focus { outline: none; }
.tf-dialog .dialog-title:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.tf-panel { display: flex; flex-direction: column; gap: var(--space-4); }
.tf-panel p { margin: 0; }
.tf-notice:empty { display: none; }
.tf-notice .st-notice { align-items: flex-start; }
.tf-notice .st-notice:focus { outline: none; }
.tf-notice .st-notice:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tf-form { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.tf-dialog .input { background: var(--color-bg); }

/* the QR code beside the setup key; stacked under 480px. The QR code is ink on a light token
   ground in every theme, its quiet zone inside the SVG (qr.js), and never wider than 200px. It keeps
   those colours in forced-colors (high-contrast) mode too, or a scanner could get light-on-dark
   modules or none at all (§24.13 #9). */
.tf-scan {
  display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: var(--space-4) var(--space-6); align-items: center;
}
.tf-scan.tf-scan-key-only { grid-template-columns: minmax(0, 1fr); }
.tf-qr {
  width: 100%; max-width: 200px; overflow: hidden;
  color: var(--color-text); background: var(--color-surface); border-radius: var(--radius-md);
  forced-color-adjust: none;
}
.tf-qr svg { display: block; width: 100%; height: auto; }
.tf-key { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; font-size: 14px; }
.tf-key-box {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
  border-radius: var(--radius-lg); background: var(--color-bg);
}
/* The setup key and the codes: Figtree, semibold, even figures and a little air between letters. */
.tf-key-text, .tf-codes {
  font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.06em;
}
.tf-key-text { flex: 1; min-width: 0; padding: var(--space-2) 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.tf-copy {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.tf-copy:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-text); }
.tf-copy:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.tf-copy:disabled { opacity: 0.45; cursor: not-allowed; }

/* the recovery codes: two columns at every width */
.tf-codes {
  list-style: none; margin: 0; padding: var(--space-4);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg); background: var(--color-bg); font-size: 15px;
}
.tf-code { overflow-wrap: anywhere; }
.tf-code-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tf-saved { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; }
.tf-saved label { cursor: pointer; }
.tf-check {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; display: inline-grid; place-content: center;
  width: 20px; height: 20px; margin: 0; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--color-text) 35%, transparent); border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.tf-check:hover { border-color: var(--color-accent); }
.tf-check:active { background: var(--color-accent-100); }
.tf-check:checked { background: var(--color-accent); border-color: var(--color-accent); }
.tf-check:checked:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.tf-check:checked:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.tf-check::after { content: ''; display: none; }
.tf-check:checked::after {
  display: block; width: 5px; height: 10px; margin-top: -2px;
  border: solid var(--color-bg); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tf-check:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* "Two-step login is on.": the sage toast (ui.js toast(), with this class added) */
.toast.toast-sage { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }

/* the form inside the Bank connections card (bank-setup.js) and the action row */
.page-settings .st-form:empty { display: none; }
.page-settings .st-form .bs-step { background: var(--color-bg); }
.page-settings .st-form .bs-panel {
  padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-bg);
}
.page-settings .st-form .auth-submit { min-height: 0; font-size: inherit; }
.page-settings .st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.page-settings .st .btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-3); }

/* ── under 1024px: the sub-nav above the card, one wrapping row of pills ── */
@media (max-width: 1024px) {
  .page-settings .st-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .page-settings .st-subnav { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
  .page-settings .st-subnav-card {
    flex-direction: row; flex-wrap: wrap; gap: var(--space-2);
    padding: 0; background: none; box-shadow: none;
  }
  /* hidden visually, still naming its list */
  .page-settings .st-subnav-title {
    position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .page-settings .st-subnav-list { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
  .page-settings .st-subnav-link { background: var(--color-surface); white-space: nowrap; }
}

@media (max-width: 480px) {
  .page-settings .st-card { padding: var(--space-4); }
  .page-settings .st-rows { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding: var(--space-3); }
  .page-settings .st-row dt { font-size: 12px; font-weight: 400; padding-top: var(--space-2); }
  .page-settings .st-row:first-child dt { padding-top: 0; }
  .page-settings .st-actions .btn { flex: 1 1 100%; }
  .page-settings .st-form .bs-panel { padding: var(--space-3); }
  .page-settings .st-pw-form .auth-submit { align-self: stretch; width: 100%; }
  /* the text and the switch stay on one row, the switch at top right */
  .page-settings .st-setting { padding: var(--space-3); gap: var(--space-3); }
  .page-settings .st-setting-status { margin-left: var(--space-3); }
  /* Two-step login: each row's button goes under its text, full width; the QR code above the key */
  .page-settings .tf-row { flex-direction: column; align-items: stretch; }
  .page-settings .tf-row .btn { width: 100%; }
  .tf-scan { grid-template-columns: minmax(0, 1fr); }
  .tf-code-actions .btn { flex: 1 1 0; }
}