/* src/styles/settings.css: the Settings page (src/pages/Settings.js) and its
 * rows. Owned by the scaffold stage. Built only from tokens.css variables and
 * the existing .field-input / .btn-primary classes, so nothing here changes
 * another page. Layout is one column that holds at 390px wide. */

.settings-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 32px;
}

.set-panel {
  padding: 18px 20px;
}

.set-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
}

.set-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.set-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.set-status,
.set-help,
.set-msg {
  font-size: 12px;
  color: var(--text-dim);
}

.set-help {
  margin-top: 10px;
}

.set-row-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.set-row-body .field-input {
  flex: 1 1 240px;
  min-width: 0;
}

.set-row-body .btn-primary {
  flex: none;
}

.set-json {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}

.set-msg.saved {
  color: var(--pos);
}

.set-msg.error {
  color: var(--neg);
}

.set-month {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
}