/* Settings (settings.html, drawn by src/settings.js): each section is its name on the left and a card of rows
   on the right. A row is what it is, its current value, and one thing you can do. */
.st-set { max-width: 1040px; gap: 0; }
.st-set .st-dash-head { margin-bottom: 36px; }
.st-set-sec { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; padding: 32px 0; border-top: 1px solid var(--rule); }
.st-set-sec[hidden] { display: none; }
.st-set-side { padding: 18px 4px 0; }
.st-set-side h2 { margin: 0; font: 500 20px/1.2 var(--sans); letter-spacing: -.01em; }
.st-set-side p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.st-set-card { padding: 0 26px; }

.st-set-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding: 22px 0; }
.st-set-row + .st-set-row { border-top: 1px solid var(--rule); }
.st-set-k { flex: 1 1 260px; min-width: 0; }
.st-set-k b { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 500; }
.st-set-k label { cursor: pointer; }
.st-set-k span { display: block; margin-top: 4px; max-width: 54ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.st-set-v { display: flex; align-items: center; gap: 10px; flex: none; }
.st-set-val { font-size: 15px; overflow-wrap: anywhere; }
.st-set-name { flex: 1 1 320px; }
.st-set-name .st-input { flex: 1; min-width: 0; }
.st-set-name .acct-av { width: 40px; height: 40px; }
.st-set-name .acct-av-letter { background: var(--dark); color: var(--on-dark); }
.st-set-row > p { flex-basis: 100%; margin: 0; font-size: 13.5px; }
.st-set-err { color: var(--red); }
.st-set-ok { color: var(--green); }
.st-set-row.is-asking { margin: 0 -26px; padding: 22px 26px; background: var(--red-bg); }
.st-set-card > .st-set-row.is-asking:last-child { border-radius: 0 0 var(--r-card) var(--r-card); }
[data-page="settings"] .st-top .st-signin, [data-page="settings"] .st-top .st-getpro { display: none; }

.st-set .st-pills { background: var(--card-2); }
.st-set .st-pills button[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: var(--lift-1); }
.st-btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.st-btn.danger:hover { background: var(--red); opacity: .9; }
.st-btn.danger-text { color: var(--red); }

@media (max-width: 760px) {
  .st-set .st-dash-head { margin-bottom: 20px; }
  .st-set-sec { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
  .st-set-side { padding: 0 4px; }
  .st-set-card { padding: 0 18px; }
  .st-set-row.is-asking { margin: 0 -18px; padding: 20px 18px; }
  .st-set-v { flex: 1 1 100%; }
  .st-set-v .st-btn { flex: 1; }
  .st-set-name .st-btn { flex: none; }
}