/* 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). */

.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 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); }
}