.pa__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pa__flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Center the button when inside the setup wizard card. */
.setup__card .pa__flow {
  align-items: center;
}

.setup__card .pa__done {
  text-align: center;
  padding: 8px 0;
}

.pa__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.pa__input {
  background: var(--bg, #0c0f14);
  border: 1px solid var(--border, #252b36);
  border-radius: 6px;
  color: var(--text, #d4d4d8);
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}

.pa__input:focus {
  border-color: var(--accent, #8b6cf7);
}

.pa__btn {
  align-self: inherit;
  background: var(--accent, #8b6cf7);
  color: #fff;
  border: none;
  /* Unified primary-CTA radius with .settings__btn (10px). Compact
     action chips like .provider-row__action stay pill-shaped
     (999px); .pa__btn is a form CTA, not a chip, so it joins the
     primary family. */
  /* Match .settings__btn exactly (10px radius / 10px 18px / weight 500)
     so the provider CTA and the settings Save button read as one button
     family — they previously drifted to 20px padding + weight 600. */
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.pa__btn:hover:not(:disabled) {
  background: var(--accent-hover, #c4b5fd);
}

.pa__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.pa__btn--sm {
  padding: 5px 12px;
  font-size: 13px;
  background: transparent;
  color: var(--text, #d4d4d8);
  border: 1px solid var(--border, #252b36);
}

.pa__btn--sm:hover:not(:disabled) {
  background: var(--surface2, #1a1f28);
}

.pa__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #d4d4d8);
}

.pa__muted {
  font-size: 13px;
  color: var(--muted, #52525b);
}

.pa__muted a {
  color: var(--accent, #8b6cf7);
  text-decoration: underline;
}

.pa__success {
  color: var(--green, #6ee7b7);
}

.pa__error {
  font-size: 13px;
  color: var(--danger, #ef4444);
  margin-top: 4px;
}

/* Codex device-auth */
.codex-auth {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.codex-auth__hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.codex-auth__device {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}

.codex-auth__step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.codex-auth__step a {
  color: var(--accent);
  word-break: break-all;
}

.codex-auth__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.codex-auth__code {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--accent);
}

.codex-auth__pending-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.codex-auth__waiting {
  margin: 0;
}

/* ── Unified provider rows (shared by Settings + Setup) ──── */

.settings__providers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.provider-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  /* Only animate the border — the background swap on default-change
     was the source of the flicker users noticed when re-selecting. */
  transition: border-color 0.15s;
}

/* Light mode: subtle elevation so the row reads as a distinct
   card surface against the light page bg. Mirrors the
   .settings__section shadow contract — dark mode stays flat. */
[data-theme="light"] .provider-row {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 1px 2px rgba(0, 0, 0, 0.03);
}

.provider-row--default {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.provider-row__main {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.provider-row__main:disabled {
  cursor: default;
}

/* Settings page renders the row info as a static div, not a button —
   tapping the row should do nothing; only Connect opens auth. Strip
   the pointer cursor so the row reads as non-interactive. */
.provider-row__main--static {
  cursor: default;
}

.provider-row__radio {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}

.provider-row__radio--on {
  border-color: var(--accent);
}

.provider-row__radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* Stack name above status badge so long names ("OpenAI Codex",
   "Claude Code") never collide with the action button at mobile
   width. align-items: flex-start so the badge tucks left under
   the name rather than centering against the radio. */
.provider-row__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.provider-row__name {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  word-break: break-word;
}

.provider-row__badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  padding: 2px 8px;
  border-radius: 6px;
}

/* Provider connected / disconnected indicator now renders via
   the shared <StatusDot> component
   (frontend/src/components/ui/StatusDot.jsx) — the bespoke
   .provider-row__status* rules used to live here. Single source
   of truth for the dot-plus-label pattern. */

/* Action button — solid surface fill so it reads as a tappable
   pill against the surface-colored provider row. Earlier outline
   + transparent background was too faint to scan. */
.provider-row__action {
  background: var(--surface2);
  border: 1px solid var(--border-light);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  grid-column: 2;
  grid-row: 1;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .provider-row__action:hover {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface2));
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border-light));
    color: var(--text);
  }
}

.provider-row__action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.provider-row__auth {
  grid-column: 1 / -1;
  grid-row: 2;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
  margin-top: 4px;
}
