/* ── WP Experience Verifier — UI Styles ─────────────────────────────────────
   Design: professional HR-tool palette — steel navy primary, clear status
   colors. All status states are colorblind-accessible via icon + color.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --wev-navy:      #1a3a5c;
  --wev-blue:      #2563eb;
  --wev-blue-lt:   #eff6ff;
  --wev-green:     #059669;
  --wev-green-lt:  #ecfdf5;
  --wev-yellow:    #d97706;
  --wev-yellow-lt: #fffbeb;
  --wev-red:       #dc2626;
  --wev-red-lt:    #fef2f2;
  --wev-gray:      #64748b;
  --wev-gray-lt:   #f8fafc;
  --wev-border:    #e2e8f0;
  --wev-text:      #0f172a;
  --wev-radius:    8px;
  --wev-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.wev-root {
  font-family: var(--wev-font);
  font-size: 15px;
  color: var(--wev-text);
  max-width: 780px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* ── Step strip ─────────────────────────────────────────────────────────── */
.wev-steps-strip {
  display: flex;
  gap: 0;
  margin-bottom: 36px;
  border-bottom: 2px solid var(--wev-border);
  padding-bottom: 16px;
}

.wev-step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 8px 12px 8px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--wev-gray);
  cursor: default;
  transition: color .2s;
}

.wev-step-n {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--wev-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}

.wev-step-pill.active   { color: var(--wev-navy); }
.wev-step-pill.active .wev-step-n  { background: var(--wev-navy); color: #fff; }
.wev-step-pill.complete .wev-step-n { background: var(--wev-green); color: #fff; }

/* ── Panes ───────────────────────────────────────────────────────────────── */
.wev-pane          { display: none; }
.wev-pane-active   { display: block; }

.wev-pane-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--wev-navy);
  margin: 0 0 24px;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.wev-field {
  margin-bottom: 18px;
}

.wev-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--wev-navy);
}

.wev-field input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--wev-border);
  border-radius: var(--wev-radius);
  font-size: 15px;
  font-family: var(--wev-font);
  color: var(--wev-text);
  background: #fff;
  box-sizing: border-box;
  transition: border-color .15s;
}

.wev-field input:focus {
  outline: none;
  border-color: var(--wev-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.wev-field-row {
  display: flex;
  gap: 16px;
}
.wev-field-row .wev-field { flex: 1; }

.wev-radios {
  display: flex;
  gap: 24px;
}
.wev-radios label {
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.wev-req   { color: var(--wev-red); }
.wev-hint  { color: var(--wev-gray); font-size: 12px; font-weight: 400; }

/* ── Scenario bar ────────────────────────────────────────────────────────── */
.wev-scenario-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  background: var(--wev-gray-lt);
  border: 1px solid var(--wev-border);
  border-radius: var(--wev-radius);
  margin-bottom: 24px;
}

.wev-scenario-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--wev-gray);
  margin-right: 4px;
  white-space: nowrap;
}

.wev-scenario-btn {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border: 1.5px solid var(--wev-border);
  border-radius: 20px;
  background: #fff;
  color: var(--wev-gray);
  cursor: pointer;
  transition: all .15s;
}

.wev-scenario-btn:hover    { border-color: var(--wev-blue); color: var(--wev-blue); }
.wev-scenario-btn.active   { border-color: var(--wev-navy); background: var(--wev-navy); color: #fff; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.wev-btn-primary {
  padding: 11px 28px;
  background: var(--wev-navy);
  color: #fff;
  border: none;
  border-radius: var(--wev-radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.wev-btn-primary:hover    { background: #15304f; }
.wev-btn-primary:disabled { opacity: .55; cursor: default; }

.wev-btn-outline {
  padding: 10px 24px;
  background: #fff;
  color: var(--wev-navy);
  border: 1.5px solid var(--wev-navy);
  border-radius: var(--wev-radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.wev-btn-ghost {
  padding: 10px 20px;
  background: none;
  color: var(--wev-gray);
  border: 1.5px solid var(--wev-border);
  border-radius: var(--wev-radius);
  font-size: 14px;
  cursor: pointer;
}
.wev-btn-ghost:hover { border-color: var(--wev-gray); }

.wev-btn-danger-sm {
  padding: 4px 10px;
  background: var(--wev-red-lt);
  color: var(--wev-red);
  border: 1px solid #fca5a5;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.wev-step-nav { display: flex; gap: 12px; margin-top: 20px; }

/* ── Upload / dropzone ───────────────────────────────────────────────────── */
.wev-dropzone {
  border: 2px dashed var(--wev-border);
  border-radius: var(--wev-radius);
  padding: 40px 24px;
  text-align: center;
  background: var(--wev-gray-lt);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.wev-dropzone.drag-over {
  border-color: var(--wev-blue);
  background: var(--wev-blue-lt);
}
.wev-dropzone-icon { font-size: 40px; margin-bottom: 12px; }
.wev-dropzone-main { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.wev-dropzone-hint { font-size: 13px; color: var(--wev-gray); margin: 0 0 16px; }

.wev-file-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1.5px solid var(--wev-border);
  border-radius: var(--wev-radius);
  background: #fff;
}
.wev-file-icon { font-size: 24px; }
.wev-file-info { flex: 1; }
.wev-file-info > span:first-child { display: block; font-weight: 600; font-size: 14px; }

.wev-upload-note { margin-top: 10px; }

/* ── Progress list ───────────────────────────────────────────────────────── */
.wev-progress-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 12px;
  max-width: 460px;
}

.wev-prog-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-left: 3px solid var(--wev-border);
  margin-left: 14px;
  font-size: 14px;
  color: var(--wev-gray);
  transition: color .2s;
}

.wev-prog-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--wev-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all .2s;
}

.wev-prog-item.active { color: var(--wev-navy); border-left-color: var(--wev-blue); }
.wev-prog-item.active .wev-prog-icon { border-color: var(--wev-blue); color: var(--wev-blue); animation: wev-spin .8s linear infinite; }

.wev-prog-item.done { color: var(--wev-green); border-left-color: var(--wev-green); }
.wev-prog-item.done .wev-prog-icon { border-color: var(--wev-green); background: var(--wev-green); color: #fff; }

.wev-prog-item.error { color: var(--wev-red); border-left-color: var(--wev-red); }
.wev-prog-item.error .wev-prog-icon { border-color: var(--wev-red); background: var(--wev-red); color: #fff; }

@keyframes wev-spin { to { transform: rotate(360deg); } }

/* ── Result card ─────────────────────────────────────────────────────────── */
.wev-result-card {
  border-radius: var(--wev-radius);
  border: 1.5px solid var(--wev-border);
  overflow: hidden;
  margin-bottom: 20px;
}

.wev-result-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 24px;
}

.wev-result-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.wev-result-text { flex: 1; }
.wev-result-text h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.wev-result-text p  { margin: 0; font-size: 13px; color: var(--wev-gray); }

.wev-result-score {
  text-align: right;
  flex-shrink: 0;
}
.wev-result-score span  { display: block; font-size: 11px; color: var(--wev-gray); text-transform: uppercase; letter-spacing: .5px; }
.wev-result-score strong{ font-size: 28px; font-weight: 800; }

.wev-disclaimer {
  padding: 10px 24px 16px;
  font-size: 12px;
  color: var(--wev-gray);
  border-top: 1px solid var(--wev-border);
}

/* Status color bands */
.wev-result-verified       .wev-result-banner { background: var(--wev-green-lt); }
.wev-result-verified-minor .wev-result-banner { background: var(--wev-green-lt); }
.wev-result-manual         .wev-result-banner { background: var(--wev-yellow-lt); }
.wev-result-failed         .wev-result-banner { background: var(--wev-red-lt); }
.wev-result-verified       .wev-result-icon   { color: var(--wev-green); }
.wev-result-verified-minor .wev-result-icon   { color: var(--wev-green); }
.wev-result-verified       .wev-result-score strong { color: var(--wev-green); }
.wev-result-verified-minor .wev-result-score strong { color: var(--wev-green); }
.wev-result-manual         .wev-result-icon   { color: var(--wev-yellow); }
.wev-result-manual         .wev-result-score strong { color: var(--wev-yellow); }
.wev-result-failed         .wev-result-icon   { color: var(--wev-red); }
.wev-result-failed         .wev-result-score strong { color: var(--wev-red); }

/* ── Comparison grid ─────────────────────────────────────────────────────── */
.wev-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.wev-comp-section {
  background: #fff;
  border: 1.5px solid var(--wev-border);
  border-radius: var(--wev-radius);
  padding: 14px 16px;
}

.wev-comp-section h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--wev-navy);
  margin: 0 0 10px;
}

.wev-comp-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 4px;
}

.wev-comp-lbl {
  min-width: 72px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--wev-gray);
  flex-shrink: 0;
}

.wev-comp-match { margin-top: 8px; }

.wev-conf {
  margin-left: auto;
  font-size: 11px;
  color: var(--wev-gray);
  flex-shrink: 0;
}

.wev-diff-note {
  margin-left: auto;
  font-size: 11px;
  color: var(--wev-yellow);
  font-weight: 600;
  flex-shrink: 0;
}

/* Badges */
.wev-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.wev-b-green  { background: var(--wev-green-lt);  color: var(--wev-green); }
.wev-b-yellow { background: var(--wev-yellow-lt); color: var(--wev-yellow); }
.wev-b-red    { background: var(--wev-red-lt);    color: var(--wev-red); }
.wev-b-gray   { background: var(--wev-gray-lt);   color: var(--wev-gray); }

/* Tenure section — full width */
.wev-tenure-section, .wev-warnings-section {
  grid-column: 1 / -1;
}

.wev-det-label {
  font-size: 11px;
  font-weight: 400;
  color: var(--wev-gray);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 8px;
}

.wev-tenure-grid {
  display: flex;
  gap: 24px;
  margin: 10px 0;
}

.wev-tenure-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wev-tenure-item strong { font-size: 22px; font-weight: 800; color: var(--wev-navy); }
.wev-tenure-item span   { font-size: 11px; color: var(--wev-gray); }

.wev-warnings-section ul {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--wev-yellow);
}
.wev-warnings-section h4 { color: var(--wev-yellow); }

/* Error message */
.wev-error-msg {
  padding: 10px 14px;
  background: var(--wev-red-lt);
  border: 1px solid #fca5a5;
  border-radius: var(--wev-radius);
  color: var(--wev-red);
  font-size: 14px;
  margin-bottom: 14px;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .wev-field-row    { flex-direction: column; }
  .wev-comparison   { grid-template-columns: 1fr; }
  .wev-tenure-grid  { flex-direction: column; gap: 12px; }
  .wev-steps-strip  { gap: 4px; }
  .wev-step-pill    { font-size: 11px; padding: 6px 6px 6px 0; }
  .wev-scenario-bar { flex-direction: column; align-items: flex-start; }
  .wev-result-score { display: none; }
}