/* Deploy screen. */

.deploy-wrap { padding: 20px 24px; max-width: 720px; overflow-y: auto; }

.provider-cards { display: flex; gap: 12px; margin-top: 16px; }
.provider-card {
  flex: 1 1 0; text-align: left;
  padding: 12px 14px; border-radius: 4px;
  border: 1px solid var(--c-border); background: var(--c-surface);
  display: flex; flex-direction: column; gap: 4px;
}
.provider-card.active { background: var(--tint); border-color: var(--brand); }
.provider-card.unavailable { opacity: .55; }
.provider-card-name { font: 600 12px/16px var(--font-sans); color: var(--fg1); }
.provider-card-sub { font-size: 10px; color: var(--fg3); }

.profile-card { margin-top: 16px; padding: 16px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 4px; }
.profile-pill-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.profile-pill {
  height: 24px; padding: 0 10px; border-radius: 44px;
  border: 1px solid var(--c-border-strong); background: var(--c-surface); font-size: 11px; color: var(--fg2);
}
.profile-pill.active { border-color: var(--brand); background: var(--tint); color: var(--brand); }
.btn.dashed { border-style: dashed; }
.profile-name { font: 600 12px/16px var(--font-sans); color: var(--fg1); margin-top: 12px; }
.profile-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.profile-field label { display: block; font-size: 11px; color: var(--fg3); margin-bottom: 4px; }
.profile-field input {
  width: 100%; height: 32px; border-radius: 8px;
  border: 1px solid var(--c-border-strong); background: var(--c-surface);
  padding: 0 10px; font-size: 12px; color: var(--fg1);
}
.profile-field .segmented { display: flex; width: 100%; height: 32px; }
.profile-field .segment { flex: 1 1 0; height: 100%; font-size: 12px; }

.profile-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }