/* settings.php — only what's unique to this page. Shared tokens, topbar,
   .hint, .btn, .badge base, .form-status all live in ../app.css now. */

.intro { max-width: 860px; margin: 16px 0 0; padding: 0 16px; line-height: 1.6; }

.settings-layout {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px 60px;
}

/* Real/confirmed vs. unverified vs. not-yet-used — a real distinction
   about the DATA, so it borrows the shared signal colours (Phase 6):
   confirmed = good, placeholder = watch (needs Rickard's real number
   before it can be trusted), reserved = neutral (not read anywhere yet). */
.badge-real { background: var(--good-bg); color: var(--good); }
.badge-placeholder { background: var(--watch-bg); color: var(--watch); }
.badge-reserved { background: var(--line-soft); color: var(--ink-3); }

.settings-section {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  margin: 16px 0;
  background: var(--surface);
}
.settings-section h2 {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  margin: 0 0 10px;
}

.param-row {
  display: grid;
  grid-template-columns: 1fr 140px auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.param-row:last-child { border-bottom: none; }
.param-label { font-size: 13px; font-weight: 500; }
.param-input { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.param-input input {
  width: 90px;
  font: inherit;
  font-family: PlexM, monospace;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: right;
}
.param-unit { font-size: 12px; color: var(--ink-3); }
.param-hint { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); margin: 0; }

.pair-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.pair-row:last-child { border-bottom: none; }
.pair-row input { width: 60px; font: inherit; font-family: PlexM, monospace; padding: 5px 6px; border: 1px solid var(--line); border-radius: var(--r); text-align: right; }

.score-total {
  font-family: PlexM, monospace;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: var(--r);
  background: var(--paper);
}
.score-total.ok { color: var(--good); background: var(--good-bg); }
.score-total.bad { color: var(--bad); background: var(--bad-bg); }

.submit-row { display: flex; align-items: center; gap: 12px; margin-top: 20px; }