/* =============================================================================
   ve-components.css: shared VE components, built only on ve-tokens.css.
   Canonical copy here; scripts/sync-ve-design.py copies it into the tenant
   console (VE-COMPONENTS markers) and apps/vibemapping/static/css/. Every class
   is ve- prefixed so it coexists with each app's legacy CSS during migration.
   ============================================================================= */
/* ---- button ---- */
.ve-btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--ve-s-2);
  min-height:36px; padding:0 var(--ve-s-4); border-radius:var(--ve-r); border:1px solid transparent;
  font:500 14px/1 var(--ve-sans); cursor:pointer; text-decoration:none; white-space:nowrap;
  background:var(--ve-primary); color:var(--ve-primary-ink); box-shadow:var(--ve-shadow-1);
  transition:background var(--ve-dur) var(--ve-ease), border-color var(--ve-dur), box-shadow var(--ve-dur); }
.ve-btn:hover { background:var(--ve-primary-2); }
.ve-btn--secondary { background:var(--ve-surface); color:var(--ve-ink); border-color:var(--ve-line-strong); }
.ve-btn--secondary:hover { background:var(--ve-hover); }
.ve-btn--ghost { background:transparent; color:var(--ve-ink); box-shadow:none; }
.ve-btn--ghost:hover { background:var(--ve-hover); }
.ve-btn--danger { background:var(--ve-err); color:var(--ve-danger-ink); }
.ve-btn--danger:hover { background:var(--ve-err); filter:brightness(.92); }
.ve-btn--sm { min-height:28px; padding:0 var(--ve-s-3); font-size:12px; }
.ve-btn--icon { width:36px; padding:0; }
.ve-btn:disabled, .ve-btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
.ve-btn[aria-busy="true"] { cursor:progress; opacity:.75; }

/* ---- form field ---- */
.ve-field { display:flex; flex-direction:column; gap:var(--ve-s-1); margin-bottom:var(--ve-s-4); }
.ve-field > label, .ve-label { font:500 13px/1.3 var(--ve-sans); color:var(--ve-ink); }
.ve-input, .ve-select, .ve-textarea { width:100%; min-height:36px; padding:var(--ve-s-2) var(--ve-s-3);
  border:1px solid var(--ve-line); border-radius:var(--ve-r); background:var(--ve-surface);
  color:var(--ve-ink); font:var(--ve-t-body); transition:border-color var(--ve-dur), box-shadow var(--ve-dur); }
.ve-textarea { min-height:96px; font:var(--ve-t-mono); resize:vertical; }
.ve-input:focus, .ve-select:focus, .ve-textarea:focus { outline:none; border-color:var(--ve-line-strong); box-shadow:var(--ve-focus); }
.ve-help { font:var(--ve-t-small); color:var(--ve-muted); }
.ve-error { font:500 12.5px/1.4 var(--ve-sans); color:var(--ve-err); }
.ve-error:empty { display:none; }

/* ---- card / key-value ---- */
.ve-card { background:var(--ve-surface); border:1px solid var(--ve-line); border-radius:var(--ve-r-lg);
  box-shadow:var(--ve-shadow-1); padding:var(--ve-s-5); }
.ve-card__head { display:flex; align-items:center; justify-content:space-between; gap:var(--ve-s-3);
  margin-bottom:var(--ve-s-3); font:var(--ve-t-h3); color:var(--ve-muted); }
.ve-kv { display:flex; justify-content:space-between; gap:var(--ve-s-3); padding:var(--ve-s-1) 0;
  border-bottom:1px solid var(--ve-line); font:var(--ve-t-small); }
.ve-kv:last-child { border-bottom:0; }

/* ---- status: pill, tag, alert ---- */
.ve-pill { display:inline-flex; align-items:center; gap:var(--ve-s-1); padding:2px var(--ve-s-2);
  border-radius:var(--ve-r-pill); font:500 12px/1.5 var(--ve-sans);
  border:1px solid var(--ve-line); background:transparent; color:var(--ve-muted); }
.ve-pill--ok { border-color:transparent; background:var(--ve-ok-bg); color:var(--ve-ok); }
.ve-pill--warn { border-color:transparent; background:var(--ve-warn-bg); color:var(--ve-warn); }
.ve-pill--err { border-color:transparent; background:var(--ve-err-bg); color:var(--ve-err); }
.ve-pill--info { color:var(--ve-info); }
.ve-tag { display:inline-block; padding:1px var(--ve-s-2); border:1px solid var(--ve-line);
  border-radius:var(--ve-r-sm); font:var(--ve-t-mono); color:var(--ve-ink); background:var(--ve-surface-2); }
.ve-alert { display:flex; gap:var(--ve-s-3); padding:var(--ve-s-3) var(--ve-s-4); border-radius:var(--ve-r);
  border:1px solid var(--ve-line); background:var(--ve-surface); color:var(--ve-ink); font:var(--ve-t-body); }
.ve-alert--ok { border-color:var(--ve-ok); background:var(--ve-ok-bg); }
.ve-alert--warn { border-color:var(--ve-warn); background:var(--ve-warn-bg); }
.ve-alert--err { border-color:var(--ve-err); background:var(--ve-err-bg); }

/* ---- table ---- */
.ve-table-wrap { overflow-x:auto; border:1px solid var(--ve-line); border-radius:var(--ve-r); background:var(--ve-surface); }
.ve-table { width:100%; border-collapse:collapse; font:var(--ve-t-small); }
.ve-table th { position:sticky; top:0; background:var(--ve-surface); text-align:left; font-weight:500;
  color:var(--ve-muted); padding:var(--ve-s-2) var(--ve-s-3); border-bottom:1px solid var(--ve-line); }
.ve-table td { padding:var(--ve-s-2) var(--ve-s-3); border-bottom:1px solid var(--ve-line); color:var(--ve-ink); }
.ve-table .num { text-align:right; font-variant-numeric:tabular-nums; }

/* ---- empty / loading states ---- */
.ve-empty { padding:var(--ve-s-8) var(--ve-s-4); text-align:center; color:var(--ve-muted); font:var(--ve-t-body); }
.ve-skeleton { border-radius:var(--ve-r-sm); min-height:1em;
  background:linear-gradient(90deg, var(--ve-surface-2) 25%, var(--ve-line) 50%, var(--ve-surface-2) 75%) 0 0/200% 100%;
  animation:ve-shimmer 1.2s linear infinite; }
@keyframes ve-shimmer { to { background-position:-200% 0; } }

/* ---- dialog (veConfirm) ---- */
.ve-dialog { border:1px solid var(--ve-line); border-radius:var(--ve-r-lg); padding:0; width:min(440px, calc(100vw - 32px));
  background:var(--ve-surface); color:var(--ve-ink); box-shadow:var(--ve-shadow-2); }
.ve-dialog::backdrop { background:#0A0A0A66; }
.ve-dialog__body { padding:var(--ve-s-6) var(--ve-s-6) var(--ve-s-4); }
.ve-dialog__title { margin:0 0 var(--ve-s-2); font:var(--ve-t-h2); }
.ve-dialog__msg { margin:0; font:var(--ve-t-body); color:var(--ve-muted); white-space:pre-wrap; }
.ve-dialog__foot { display:flex; justify-content:flex-end; gap:var(--ve-s-2); padding:var(--ve-s-4) var(--ve-s-6);
  border-top:1px solid var(--ve-line); background:var(--ve-surface); border-radius:0 0 var(--ve-r-lg) var(--ve-r-lg); }

/* ---- toast (veToast) ---- */
.ve-toasts { position:fixed; right:var(--ve-s-4); bottom:var(--ve-s-4); z-index:var(--ve-z-toast);
  display:flex; flex-direction:column; gap:var(--ve-s-2); max-width:min(420px, calc(100vw - 32px)); pointer-events:none; }
.ve-toast { pointer-events:auto; display:flex; align-items:flex-start; gap:var(--ve-s-3);
  padding:var(--ve-s-3) var(--ve-s-4); border-radius:var(--ve-r); border:1px solid var(--ve-line);
  background:var(--ve-surface); color:var(--ve-ink); box-shadow:var(--ve-shadow-2); font:var(--ve-t-body);
  white-space:pre-wrap; animation:ve-rise var(--ve-dur-in) var(--ve-ease) both; }
.ve-toast--ok { border-color:var(--ve-ok); } .ve-toast--warn { border-color:var(--ve-warn); }
.ve-toast--err { border-color:var(--ve-err); }
.ve-toast__x { margin-left:auto; background:none; border:0; color:var(--ve-muted); cursor:pointer; font-size:16px; line-height:1; }

/* ---- icon (inline SVG sprite, ve-ui.js) ---- */
.ve-icon { width:16px; height:16px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px; }