/* ============================================================================
   Profile Builder — cv- migration (namespace cvp-)
   ----------------------------------------------------------------------------
   A 4-step wizard (Import → Map → Settings → Generate). This file adds only the
   page-level layout: the centered card, the header step-rail, the 2-col grid,
   the CSV dropzone, and the TEST-profile check card. Controls, tables, buttons,
   and badges reuse the shared cv- primitives (clearview-refresh.css). Behaviour
   is unchanged — this is markup/class only. `pb-` was taken by the Reflex Page
   Builder, hence `cvp-`.
   ============================================================================ */

.cvp-page { width: 100%; }
.cvp-card {
  background: var(--cv-bg-surface); border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius-lg); padding: var(--cv-space-5);
}
/* Full-width page: the grids, preview table and dropzone span edge-to-edge.
   Single lone controls keep a readable width so a dropdown isn't a mile wide. */
.cvp-card > .cv-field { max-width: 720px; }

/* header step rail (rendered into .page-header-right) */
.cvp-steps { display: inline-flex; align-items: center; gap: 4px; }
.cvp-step {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px;
  border-radius: var(--cv-radius); color: var(--cv-text-muted); font-size: var(--cv-text-xs); white-space: nowrap;
}
.cvp-step-n {
  display: grid; place-items: center; width: 18px; height: 18px; flex: none;
  border-radius: var(--cv-radius-full); background: var(--cv-bg-inset);
  border: 1px solid var(--cv-border); font-size: 10px; font-weight: var(--cv-weight-semibold);
}
.cvp-step-n .cv-i { width: 12px; height: 12px; }
.cvp-step-active { color: var(--cv-text); }
.cvp-step-active .cvp-step-n { background: var(--cv-accent); border-color: var(--cv-accent); color: #fff; }
.cvp-step-done { color: var(--cv-text-secondary); }
.cvp-step-done .cvp-step-n { background: var(--cv-success-wash); border-color: var(--cv-success); color: var(--cv-success); }
.cvp-step-sep { width: 12px; height: 1px; background: var(--cv-border); flex: none; }
@media (max-width: 760px) { .cvp-step-l { display: none; } }

/* section head / titles */
.cvp-head { margin-bottom: var(--cv-space-4); }
.cvp-title {
  display: flex; align-items: center; gap: var(--cv-space-2);
  font-size: var(--cv-text-lg); font-weight: var(--cv-weight-semibold); color: var(--cv-text);
}
.cvp-title .cv-i { color: var(--cv-accent); width: 18px; height: 18px; }
.cvp-subtitle { font-size: var(--cv-text-sm); font-weight: var(--cv-weight-semibold); color: var(--cv-text); margin-bottom: var(--cv-space-2); }
.cvp-intro { font-size: var(--cv-text-sm); color: var(--cv-text-secondary); margin: var(--cv-space-1) 0 0; line-height: 1.55; }

/* two-column control grid */
/* Auto-fit: fills the full width with as many readable columns as fit (2 on a
   laptop, 3-5 on a wide monitor), collapsing to 1 on narrow screens. */
.cvp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--cv-space-3); }

/* CSV dropzone (own classes — the shared .file-upload-zone is left untouched) */
.cvp-drop {
  border: 1.5px dashed var(--cv-border-strong); border-radius: var(--cv-radius-lg);
  background: var(--cv-bg-inset); padding: 52px var(--cv-space-4); text-align: center;
  transition: border-color var(--cv-dur-fast) var(--cv-ease), background var(--cv-dur-fast) var(--cv-ease);
}
.cvp-drop.drag-over { border-color: var(--cv-accent); background: var(--cv-accent-wash); }
.cvp-drop-inner { display: flex; flex-direction: column; align-items: center; gap: var(--cv-space-2); }
.cvp-drop-icon { width: 42px; height: 42px; color: var(--cv-text-muted); }
.cvp-drop-title { font-size: var(--cv-text-md); color: var(--cv-text); margin: 0; }

/* action button row */
.cvp-actions { display: flex; gap: var(--cv-space-2); flex-wrap: wrap; margin-top: var(--cv-space-4); }

/* TEST-profile opt-in card (replaces the legacy inline-styled box) */
.cvp-check-card {
  margin-top: var(--cv-space-4); padding: var(--cv-space-3);
  border: 1px solid var(--cv-border); border-radius: var(--cv-radius); background: var(--cv-bg-inset);
}
.cvp-check-card label { display: flex; align-items: flex-start; gap: var(--cv-space-2); cursor: pointer; margin: 0; }
.cvp-check-card input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--cv-accent); flex: none; }
.cvp-check-card strong { font-size: var(--cv-text-sm); color: var(--cv-text); }
.cvp-check-card small { display: block; margin-top: 2px; }

/* google-sheet name confirmation line */
.cvp-sheet-name { display: flex; align-items: center; gap: 6px; margin-top: var(--cv-space-1); font-size: var(--cv-text-sm); color: var(--cv-text-secondary); }
.cvp-sheet-name .cv-i { color: var(--cv-success); }
.cvp-sheet-name.hidden { display: none; }