/* css/components.css · Corvo redesign primitive kit [P1 · 2026-09-01]
   Every class is namespaced .c-* so nothing collides with the legacy layers.
   All values come from css/tokens.css. Green and red are P&L/success semantics
   only; the accent is orange; Base blue is the styled secondary.
   Additive: nothing here restyles existing markup. */

/* ---------- buttons ---------- */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font:600 var(--t-sm)/1 var(--font);color:var(--ink);letter-spacing:-.005em;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);
  min-height:40px;padding:0 var(--s-4);cursor:pointer;user-select:none;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);}
.c-btn:hover{background:var(--bg-3);border-color:var(--line-2);}
.c-btn:active{transform:translateY(1px);}
.c-btn:disabled,.c-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;}
.c-btn--primary{background:var(--brand);border-color:var(--brand);color:#0a0a0d;font-weight:700;}
.c-btn--primary:hover{background:var(--brand-hi);border-color:var(--brand-hi);}
.c-btn--danger{background:transparent;border-color:rgba(248,113,113,.4);color:var(--down);}
.c-btn--danger:hover{background:rgba(248,113,113,.1);}
.c-btn--ghost{background:transparent;border-color:transparent;color:var(--ink-2);}
.c-btn--ghost:hover{background:var(--panel-2);color:var(--ink);}
.c-btn--sm{min-height:32px;padding:0 var(--s-3);font-size:var(--t-xs);border-radius:var(--r-sm);}
.c-btn--lg{min-height:48px;padding:0 var(--s-5);font-size:var(--t-md);}
.c-btn--full{width:100%;}
@media (max-width:768px){ .c-btn{min-height:44px;} .c-btn--sm{min-height:38px;} }

/* ---------- inputs ---------- */
.c-input,.c-select{width:100%;font:500 var(--t-md)/1.3 var(--font);color:var(--ink);
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-md);
  min-height:44px;padding:0 var(--s-4);outline:none;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);}
.c-input::placeholder{color:var(--ink-4);}
.c-input:focus,.c-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
.c-input[aria-invalid="true"]{border-color:var(--down);}
.c-field{display:flex;flex-direction:column;gap:var(--s-2);}
.c-label{font:600 var(--t-xs)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.c-hint{font-size:var(--t-xs);color:var(--ink-4);}
.c-hint--error{color:var(--down);}
.c-amount{font:700 var(--t-2xl)/1.1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  background:none;border:none;color:var(--ink);width:100%;outline:none;padding:0;}

/* ---------- cards and surfaces ---------- */
.c-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-4);}
.c-card--pad{padding:var(--s-5);}
.c-card__title{font:700 var(--t-md)/1.2 var(--font);letter-spacing:-.01em;margin:0 0 var(--s-3);color:var(--ink);}
.c-stat{display:flex;flex-direction:column;gap:2px;min-width:0;}
.c-stat__label{font:600 var(--t-xs)/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);}
.c-stat__value{font:700 var(--t-lg)/1.15 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.015em;color:var(--ink);}
.c-stat__value--big{font-size:var(--t-2xl);}
.c-statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s-4);}

/* ---------- badges, chips, price change ---------- */
.c-badge{display:inline-flex;align-items:center;gap:4px;font:600 var(--t-xs)/1 var(--mono);
  padding:3px 8px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--ink-3);background:var(--panel);}
.c-badge--up{color:var(--up);border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.08);}
.c-badge--down{color:var(--down);border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.08);}
.c-badge--warn{color:var(--warn);border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.08);}
.c-badge--brand{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft);}
.c-chip{display:inline-flex;align-items:center;gap:var(--s-2);font:500 var(--t-sm)/1 var(--font);
  min-height:32px;padding:0 var(--s-3);border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--panel);color:var(--ink-2);cursor:pointer;transition:border-color var(--dur-1) var(--ease);}
.c-chip:hover{border-color:var(--brand);color:var(--ink);}
.c-delta{font:600 var(--t-sm)/1 var(--mono);font-variant-numeric:tabular-nums;}
.c-delta--up{color:var(--up);}
.c-delta--down{color:var(--down);}
.c-addr{display:inline-flex;align-items:center;gap:6px;font:500 var(--t-xs)/1 var(--mono);
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 9px;color:var(--ink-2);cursor:pointer;}
.c-addr:hover{border-color:var(--line-2);color:var(--ink);}

/* ---------- tabs ---------- */
.c-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;}
.c-tabs::-webkit-scrollbar{display:none;}
.c-tab{appearance:none;background:none;border:none;border-bottom:2px solid transparent;
  font:600 var(--t-sm)/1 var(--font);color:var(--ink-3);padding:var(--s-3) var(--s-4);cursor:pointer;white-space:nowrap;
  transition:color var(--dur-1) var(--ease);}
.c-tab:hover{color:var(--ink);}
.c-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand);}

/* ---------- tables (collapse to rows on mobile) ---------- */
.c-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);}
.c-table{width:100%;border-collapse:collapse;font-size:var(--t-sm);}
.c-table th{font:600 var(--t-xs)/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);
  text-align:left;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);background:var(--bg-1);white-space:nowrap;}
.c-table th[aria-sort]{cursor:pointer;}
.c-table th[aria-sort="ascending"]::after{content:" \2191";color:var(--brand);}
.c-table th[aria-sort="descending"]::after{content:" \2193";color:var(--brand);}
.c-table td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);vertical-align:middle;
  font-variant-numeric:tabular-nums;color:var(--ink);}
.c-table tbody tr{transition:background var(--dur-1) var(--ease);}
.c-table tbody tr:hover{background:var(--panel);}
.c-table tbody tr:last-child td{border-bottom:none;}
.c-table .num{text-align:right;}

/* ---------- token / order rows ---------- */
.c-row{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);cursor:pointer;
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);}
.c-row:hover{border-color:var(--line-2);background:var(--panel-2);}
.c-row__ico{flex:none;width:34px;height:34px;border-radius:var(--r-pill);background:var(--bg-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;font:700 var(--t-sm)/1 var(--mono);color:var(--ink-3);}
.c-row__ico img{width:100%;height:100%;object-fit:cover;}
.c-row__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.c-row__title{font:600 var(--t-sm)/1.2 var(--font);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.c-row__sub{font-size:var(--t-xs);color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.c-row__end{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-variant-numeric:tabular-nums;}

/* ---------- dialog, sheet, scrim ---------- */
.c-scrim{position:fixed;inset:0;background:rgba(5,5,8,.66);backdrop-filter:blur(6px);z-index:120;
  opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease);}
.c-scrim.open{opacity:1;pointer-events:auto;}
.c-dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.97);z-index:121;
  width:min(480px,calc(100vw - 24px));max-height:min(86vh,86dvh);overflow:auto;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:var(--shadow-2);
  padding:var(--s-5);opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);}
.c-dialog.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.c-sheet{position:fixed;left:0;right:0;bottom:0;z-index:121;transform:translateY(102%);
  background:var(--bg-1);border:1px solid var(--line-2);border-bottom:none;border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--shadow-2);padding:var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom));
  max-height:min(92vh,92dvh);overflow:auto;transition:transform var(--dur-3) var(--ease);}
.c-sheet.open{transform:translateY(0);}
.c-sheet__grab{width:40px;height:4px;border-radius:99px;background:var(--line-2);margin:0 auto var(--s-3);}
@media (min-width:769px){ .c-sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(480px,calc(100vw - 24px));
  transform:translate(-50%,-46%);opacity:0;pointer-events:none;border-radius:var(--r-xl);border-bottom:1px solid var(--line-2);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);}
  .c-sheet.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%);}
  .c-sheet__grab{display:none;} }

/* ---------- toast ---------- */
.c-toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--botnav-h) + 18px + env(safe-area-inset-bottom));
  z-index:130;display:flex;flex-direction:column;gap:var(--s-2);align-items:center;pointer-events:none;}
.c-toast{display:flex;align-items:center;gap:var(--s-2);font:600 var(--t-sm)/1.3 var(--font);color:var(--ink);
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-pill);box-shadow:var(--shadow-2);
  padding:10px 16px;max-width:min(420px,90vw);pointer-events:auto;animation:c-toast-in var(--dur-2) var(--ease);}
.c-toast--ok{border-color:rgba(52,211,153,.4);}
.c-toast--err{border-color:rgba(248,113,113,.4);}
@keyframes c-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- skeletons ---------- */
.c-skel{position:relative;overflow:hidden;background:var(--bg-2);border-radius:var(--r-sm);min-height:14px;}
.c-skel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
  animation:c-skel 1.4s linear infinite;}
@keyframes c-skel{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.c-skel--text{height:14px;} .c-skel--title{height:22px;width:40%;} .c-skel--row{height:56px;border-radius:var(--r-md);}
.c-skel--stat{height:34px;width:120px;}

/* ---------- empty and error states ---------- */
.c-empty{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);text-align:center;
  padding:var(--s-7) var(--s-5);color:var(--ink-3);}
.c-empty__title{font:700 var(--t-md)/1.2 var(--font);color:var(--ink);}
.c-empty__body{font-size:var(--t-sm);max-width:36ch;color:var(--ink-3);}
.c-empty__actions{display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:center;margin-top:var(--s-2);}
.c-error{border:1px solid rgba(248,113,113,.35);background:rgba(248,113,113,.06);border-radius:var(--r-lg);
  padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);color:var(--ink-2);font-size:var(--t-sm);}
.c-error__title{font-weight:700;color:var(--down);}

/* ---------- TxFlow visual states ---------- */
.c-tx{display:flex;flex-direction:column;gap:var(--s-4);}
.c-tx__rows{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.c-tx__row{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--line);font-size:var(--t-sm);}
.c-tx__row:last-child{border-bottom:none;}
.c-tx__row dt{color:var(--ink-4);}
.c-tx__row dd{margin:0;font-variant-numeric:tabular-nums;color:var(--ink);text-align:right;}
.c-tx__ttl{display:flex;align-items:center;gap:6px;font:600 var(--t-xs)/1 var(--mono);color:var(--ink-3);}
.c-tx__ttl--expiring{color:var(--warn);}
.c-tx__ttl--expired{color:var(--down);}
.c-spinner{width:22px;height:22px;border-radius:50%;flex:none;
  background:conic-gradient(var(--brand),transparent 70%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  animation:c-spin .8s linear infinite;}
@keyframes c-spin{to{transform:rotate(360deg)}}
.c-tx__progress{display:flex;align-items:center;gap:var(--s-3);font-size:var(--t-sm);color:var(--ink-2);}
.c-tx__check{color:var(--up);} .c-tx__cross{color:var(--down);}

/* ---------- focus and motion ---------- */
.c-btn:focus-visible,.c-chip:focus-visible,.c-tab:focus-visible,.c-row:focus-visible,
.c-addr:focus-visible,.c-input:focus-visible,.c-select:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  .c-skel::after,.c-spinner{animation:none;}
  .c-toast{animation:none;}
  .c-dialog,.c-sheet,.c-scrim,.c-btn,.c-row,.c-chip{transition:none;}
}