/* ============================================================================
   Versa UI kit  —  /styles/ui.css
   Component styles for src/ui.js. Everything is namespaced `.ui-*` (no collision
   with existing app styles) and built on the design tokens in app.css :root, so
   the kit re-themes for free. Motion is subtle and fully disabled under
   prefers-reduced-motion. Soft borders, calm radii, gentle hovers — "soothing".
   ============================================================================ */

/* ---- tone tokens: each component reads --ui-c / --ui-bg / --ui-line --------- */
.ui-tone-neutral { --ui-c:var(--ink2);  --ui-bg:var(--bg2);       --ui-line:var(--line); }
.ui-tone-info    { --ui-c:var(--info);  --ui-bg:var(--info-bg);   --ui-line:var(--info-line); }
.ui-tone-good    { --ui-c:var(--good);  --ui-bg:var(--good-bg);   --ui-line:var(--good-line); }
.ui-tone-warn    { --ui-c:var(--warn);  --ui-bg:var(--warn-bg);   --ui-line:var(--warn-line); }
.ui-tone-bad     { --ui-c:var(--bad);   --ui-bg:var(--bad-bg);    --ui-line:var(--bad-line); }

/* ---- Button ---------------------------------------------------------------- */
.ui-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-weight:600; line-height:1; white-space:nowrap;
  border:0.5px solid var(--line2); border-radius:var(--r-sm);
  background:var(--panel2); color:var(--ink); cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; text-decoration:none;
  transition:background .18s var(--ease), border-color .18s var(--ease),
             transform .08s var(--ease), box-shadow .18s var(--ease), opacity .18s var(--ease);
}
.ui-btn:focus-visible { outline:2px solid var(--info); outline-offset:2px; }
.ui-btn:active { transform:scale(.985); }
.ui-btn--block { width:100%; }
.ui-btn--sm { padding:7px 12px; font-size:12.5px; }
.ui-btn--md { padding:11px 16px; font-size:14px; }
.ui-btn--lg { padding:14px 20px; font-size:15.5px; }
.ui-btn--primary  { background:var(--info); border-color:var(--info); color:#0b0e13; }
.ui-btn--primary:hover  { background:#9cc4ff; border-color:#9cc4ff; }
.ui-btn--secondary:hover { background:#222c3a; border-color:var(--info); }
.ui-btn--ghost  { background:transparent; border-color:var(--line2); color:var(--ink2); }
.ui-btn--ghost:hover  { background:var(--bg2); color:var(--ink); border-color:var(--info); }
.ui-btn--subtle { background:transparent; border-color:transparent; color:var(--ink2); }
.ui-btn--subtle:hover { background:var(--bg2); color:var(--ink); }
.ui-btn--danger { background:var(--bad-bg); border-color:var(--bad-line); color:var(--bad); }
.ui-btn--danger:hover { background:#3a1d1f; border-color:var(--bad); }
.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity:.55; cursor:not-allowed; transform:none; pointer-events:none; }
.ui-btn.is-loading { cursor:progress; }

/* ---- Spinner --------------------------------------------------------------- */
.ui-spinner { display:inline-flex; width:var(--ui-spinner-size,16px); height:var(--ui-spinner-size,16px); color:currentColor; vertical-align:-0.15em; }
.ui-spinner__ring { width:100%; height:100%; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; opacity:.85; animation:ui-spin .7s linear infinite; }
@keyframes ui-spin { to { transform:rotate(360deg); } }

/* ---- Card ------------------------------------------------------------------ */
.ui-card { background:var(--panel); border:0.5px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); }
.ui-card--animate { animation:rise .35s var(--ease) both; }
.ui-card--pad-none .ui-card__body { padding:0; }
.ui-card--pad-sm   { padding:.7rem .8rem; }
.ui-card--pad-md   { padding:1.05rem 1.15rem; }
.ui-card--pad-lg   { padding:1.4rem 1.5rem; }
.ui-card__head { margin-bottom:.7rem; }
.ui-card__eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); font-weight:600; margin-bottom:4px; }
.ui-card__title { font-family:var(--disp); font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.ui-card__foot { margin-top:.9rem; padding-top:.8rem; border-top:0.5px solid var(--line); }

/* ---- StatTile + stats grid ------------------------------------------------- */
.ui-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:8px; }
.ui-stat { background:var(--bg2); border-radius:var(--r-md); padding:.65rem .7rem; }
.ui-stat--center { text-align:center; }
.ui-stat--right  { text-align:right; }
.ui-stat__label { font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink2); }
.ui-stat__value { font-size:18px; font-weight:600; color:var(--ink); margin-top:3px; line-height:1.1; }
.ui-stat__value--mono { font-family:var(--mono); }
.ui-stat.ui-tone-info .ui-stat__value { color:var(--info); }
.ui-stat.ui-tone-good .ui-stat__value { color:var(--good); }
.ui-stat.ui-tone-warn .ui-stat__value { color:var(--warn); }
.ui-stat.ui-tone-bad  .ui-stat__value { color:var(--bad); }
.ui-stat__sub { font-size:10.5px; color:var(--ink3); margin-top:2px; }

/* ---- Progress -------------------------------------------------------------- */
.ui-progress { width:100%; }
.ui-progress__label { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:12px; color:var(--ink2); margin-bottom:6px; }
.ui-progress__pct { font-family:var(--mono); color:var(--ink3); }
.ui-progress__track { position:relative; width:100%; background:var(--line); border-radius:99px; overflow:hidden; }
.ui-progress--sm .ui-progress__track { height:6px; }
.ui-progress--md .ui-progress__track { height:8px; }
.ui-progress--lg .ui-progress__track { height:12px; }
.ui-progress__fill { height:100%; border-radius:99px; background:var(--ui-c,var(--info)); }
/* tone-aware gradient; if color-mix is unsupported the rule is dropped and the
   solid fill above shows through — graceful, no broken bar. */
.ui-progress__fill--grad { background:linear-gradient(90deg, color-mix(in srgb, var(--ui-c,var(--info)) 65%, #b3a6ff), var(--ui-c,var(--info))); }
.ui-progress__fill--animate { transition:width .5s var(--ease); }

/* ---- Chip ------------------------------------------------------------------ */
.ui-chip { display:inline-flex; align-items:center; gap:6px; border-radius:99px; font-family:var(--sans); font-weight:500; line-height:1; white-space:nowrap; border:0.5px solid transparent; }
.ui-chip--sm { padding:3px 9px;  font-size:11px; }
.ui-chip--md { padding:5px 11px; font-size:12.5px; }
.ui-chip__dot { width:8px; height:8px; border-radius:50%; background:var(--ui-chip-color,var(--ink3)); flex:none; }
.ui-chip--soft    { background:var(--ui-bg,var(--bg2)); color:var(--ui-c,var(--ink2)); }
.ui-chip--solid   { background:var(--ui-c,var(--panel2)); color:#0b0e13; }
.ui-chip--outline { background:transparent; border-color:var(--ui-line,var(--line2)); color:var(--ui-c,var(--ink2)); }
.ui-chip--custom  { color:var(--ui-chip-color); background:color-mix(in srgb, var(--ui-chip-color) 15%, transparent); }
.ui-chip--custom.ui-chip--outline { background:transparent; border-color:var(--ui-chip-color); }
.ui-chip--interactive { cursor:pointer; transition:background .15s var(--ease), border-color .15s var(--ease), transform .08s var(--ease); }
.ui-chip--interactive:hover { transform:translateY(-1px); }
.ui-chip--interactive:focus-visible { outline:2px solid var(--info); outline-offset:2px; }

/* ---- OptionCard ------------------------------------------------------------ */
.ui-option { display:block; width:100%; text-align:left; background:var(--panel); border:0.5px solid var(--line); border-radius:var(--r-md); padding:.85rem .95rem; color:var(--ink); cursor:pointer; font-family:var(--sans);
  transition:border-color .16s var(--ease), background .16s var(--ease), transform .08s var(--ease), box-shadow .16s var(--ease); }
.ui-option:hover { border-color:var(--info); background:var(--panel2); }
.ui-option:focus-visible { outline:2px solid var(--info); outline-offset:2px; }
.ui-option:active { transform:scale(.992); }
.ui-option.is-selected { border-color:var(--info); box-shadow:inset 0 0 0 1px var(--info); background:var(--panel2); }
.ui-option.is-disabled { opacity:.5; cursor:not-allowed; }
.ui-option__main { display:flex; align-items:center; gap:12px; }
.ui-option__icon { flex:none; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--bg2); color:var(--info); font-size:18px; }
.ui-option__text { flex:1; min-width:0; }
.ui-option__title { display:block; font-weight:600; font-size:14px; }
.ui-option__desc { display:block; font-size:12px; color:var(--ink2); margin-top:2px; line-height:1.45; }
.ui-option__meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.ui-option__badge { flex:none; font-size:10.5px; font-weight:600; color:var(--ink3); text-transform:uppercase; letter-spacing:.04em; }
.ui-option__check { flex:none; color:var(--info); font-size:18px; }

/* ---- EmptyState ------------------------------------------------------------ */
.ui-empty { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:2rem 1.2rem; color:var(--ink2); }
.ui-empty__icon { font-size:34px; color:var(--ink3); opacity:.85; margin-bottom:2px; }
.ui-empty__title { font-family:var(--disp); font-size:17px; font-weight:600; color:var(--ink); }
.ui-empty__body { max-width:34ch; font-size:13px; color:var(--ink2); line-height:1.55; }
.ui-empty__action { margin-top:8px; }

/* ---- Skeleton -------------------------------------------------------------- */
.ui-skeleton-group { display:flex; flex-direction:column; gap:8px; }
.ui-skeleton { display:block; background:linear-gradient(100deg, var(--bg2) 30%, var(--panel2) 50%, var(--bg2) 70%); background-size:200% 100%; border-radius:var(--r-sm); animation:ui-shimmer 1.4s ease-in-out infinite; }
.ui-skeleton--text   { height:.8em; border-radius:6px; }
.ui-skeleton--circle { border-radius:50%; }
.ui-skeleton--rect   { border-radius:var(--r-md); }
.ui-skeleton--tile   { height:64px; border-radius:var(--r-md); }
@keyframes ui-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* ---- responsive polish (mirrors app.css breakpoints) ----------------------- */
@media (max-width:520px) {
  .ui-card { border-radius:var(--r-md); }
  .ui-card--pad-md { padding:.9rem 1rem; }
  .ui-card--pad-lg { padding:1.1rem 1.15rem; }
  .ui-btn--lg { padding:13px 16px; }
  .ui-option__icon { width:32px; height:32px; font-size:16px; }
}

/* ---- breathing orbs (Tideglass: diversification you FEEL) ------------------- */
/* diversified money breathes slow + deep (long --orb-breath, larger --orb-amp);
   concentrated breathes quick + shallow. --orb-i shifts each orb out of phase. */
.ui-orb { animation:ui-orb-breath var(--orb-breath,4s) ease-in-out infinite; animation-delay:calc(var(--orb-i,0) * -0.7s); }
@keyframes ui-orb-breath { 0%,100% { transform:scale(1); } 50% { transform:scale(var(--orb-amp,1.04)); } }

/* ---- reduced motion: keep meaning, drop movement --------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* keep the MEANING (deeper = healthier) as a static size; drop the movement */
  .ui-orb { animation:none; transform:scale(var(--orb-amp,1)); }
  .ui-card--animate { animation:none; }
  .ui-progress__fill--animate { transition:none; }
  .ui-skeleton { animation:none; background:var(--panel2); }
  .ui-spinner__ring { animation-duration:1.6s; } /* slow turn still signals "busy" */
  .ui-btn:active, .ui-option:active, .ui-chip--interactive:hover { transform:none; }
}