/* ============================================================
   VisionCore · Components v2
   Chips, status pills, fields, cards — the surface elements
   used across the app.
   ============================================================ */

/* ---------- CHIP ---------- */
.vc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--vc-r-pill);
  background: rgba(255,255,255,.04);
  color: var(--vc-ink-2);
  border: 1px solid var(--vc-line);
  font-size: var(--vc-text-xs);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  font-family: var(--vc-font-sans);
}
.vc-chip[data-tone="brand"]   { background: var(--vc-brand-bg);   color: var(--vc-brand-soft);   border-color: var(--vc-brand-line); }
.vc-chip[data-tone="info"]    { background: var(--vc-info-bg);    color: var(--vc-info-soft);    border-color: rgba(0,198,255,.32); }
.vc-chip[data-tone="success"] { background: var(--vc-success-bg); color: var(--vc-success-soft); border-color: rgba(0,230,118,.32); }
.vc-chip[data-tone="warn"]    { background: var(--vc-warn-bg);    color: var(--vc-warn-soft);    border-color: rgba(240,152,25,.32); }
.vc-chip[data-tone="danger"]  { background: var(--vc-danger-bg);  color: var(--vc-danger-soft);  border-color: rgba(255,68,68,.32); }

/* clickable chip */
button.vc-chip { cursor: pointer; }
button.vc-chip:hover { background: rgba(255,255,255,.07); }
button.vc-chip[data-active="true"] {
  background: var(--vc-brand-bg);
  color: var(--vc-brand-soft);
  border-color: var(--vc-brand-line);
}

/* ---------- STATUS PILL (engine, sync, etc.) ---------- */
.vc-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  background: var(--vc-raise);
  border: 1px solid var(--vc-line);
  border-radius: var(--vc-r-pill);
  font-size: var(--vc-text-sm);
  font-weight: 600;
}
.vc-status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--vc-ink-5);
  flex-shrink: 0;
}
.vc-status[data-tone="success"]::before { background: var(--vc-success); box-shadow: 0 0 8px var(--vc-success); }
.vc-status[data-tone="warn"]::before    { background: var(--vc-warn);    box-shadow: 0 0 8px var(--vc-warn); }
.vc-status[data-tone="danger"]::before  { background: var(--vc-danger);  box-shadow: 0 0 8px var(--vc-danger); }

/* ---------- FIELD ---------- */
.vc-field {
  display: block;
  margin-bottom: var(--vc-s-3);
}
.vc-field-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--vc-text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vc-ink-4);
}
.vc-field-hint {
  margin-top: 5px;
  font-size: var(--vc-text-xs);
  color: var(--vc-ink-4);
}

.vc-input,
.vc-textarea,
.vc-select {
  width: 100%;
  padding: 10px 12px;
  background: #0e0e0e;
  border: 1px solid var(--vc-line);
  border-radius: var(--vc-r-md);
  color: var(--vc-ink);
  font-family: var(--vc-font-sans);
  font-size: var(--vc-text-base);
  outline: 0;
  transition: var(--vc-fast);
}
.vc-input:focus,
.vc-textarea:focus,
.vc-select:focus {
  border-color: var(--vc-brand-line);
  background: #0a0a0a;
}
.vc-textarea { resize: vertical; min-height: 80px; font-family: inherit; line-height: 1.55; }
.vc-input[data-mono="true"],
.vc-textarea[data-mono="true"] { font-family: var(--vc-font-mono); }

/* ---------- CARD ---------- */
.vc-card {
  background: var(--vc-raise);
  border: 1px solid var(--vc-line-soft);
  border-radius: var(--vc-r-lg);
  padding: var(--vc-s-5);
}
.vc-card[data-tone="elevated"] { background: var(--vc-card); border-color: var(--vc-line); }
.vc-card[data-tone="soft"]     { background: #0f0f0f; }

/* ---------- KICKER / EYEBROW ---------- */
.vc-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vc-ink-4);
}
.vc-kicker[data-tone="brand"] { color: var(--vc-brand-soft); }

/* ---------- KBD ---------- */
.vc-kbd {
  display: inline-block;
  padding: 1px 6px;
  background: var(--vc-card);
  border: 1px solid var(--vc-line);
  border-radius: 4px;
  font-family: var(--vc-font-mono);
  font-size: 10.5px;
  color: var(--vc-ink-3);
}

/* ---------- MODE SWITCHER (segmented) ---------- */
.vc-segmented {
  display: inline-flex;
  padding: 3px;
  background: #0e0e0e;
  border: 1px solid var(--vc-line);
  border-radius: 9px;
}
.vc-segmented > button {
  padding: 6px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--vc-ink-3);
  font-family: inherit;
  font-size: var(--vc-text-sm);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vc-segmented > button[data-active="true"] {
  background: var(--vc-card);
  color: var(--vc-ink);
  box-shadow: inset 0 0 0 1px var(--vc-line);
}

/* ---------- BRAND MARK ---------- */
.vc-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.vc-brand-mark-square {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--vc-grad-brand);
  position: relative;
  box-shadow: 0 4px 14px rgba(255,42,95,.35);
}
.vc-brand-mark-square::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px solid var(--vc-bg);
  border-radius: 4px;
}
.vc-brand-mark-name {
  font-family: var(--vc-font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--vc-ink);
}

/* ---------- BACK-COMPAT (legacy class mapping) ----------
   These let the existing index.html markup keep working.
*/

/* legacy .status-pill */
.status-pill { background: var(--vc-raise); border-color: var(--vc-line); padding: 5px 11px; }

/* legacy .dot */
.dot.on { background: var(--vc-success); box-shadow: 0 0 8px var(--vc-success); }
.dot.off { background: var(--vc-ink-5); }

/* legacy mode-switcher */
.mode-switcher {
  background: #0e0e0e;
  border-color: var(--vc-line);
  border-radius: 9px;
  padding: 3px;
}
.mode-switcher-btn {
  background: transparent;
  color: var(--vc-ink-3);
  border-radius: 7px;
  min-height: 30px;
}
.mode-switcher-btn.active {
  background: var(--vc-card);
  color: var(--vc-ink);
  box-shadow: inset 0 0 0 1px var(--vc-line);
}

/* legacy .review-chip */
.review-chip {
  background: rgba(255,255,255,.04);
  color: var(--vc-ink-2);
  border: 1px solid var(--vc-line);
  border-radius: var(--vc-r-pill);
  padding: 5px 11px;
  font-size: var(--vc-text-xs);
  font-weight: 600;
}