/* ============================================================================
   COLDLOADS — components.css  ·  shared premium component kit (.cl-* classes)
   Depends on tokens.css (--cl-* vars). Namespaced .cl-* so it never clashes with
   a page's existing .btn/.card/.pill. Pages opt in during their migration wave.
   Design-only: visual layer. Created 2026-10-04 (Wave 0).
   ============================================================================ */

/* ---- section header ---- */
.cl-sec-h { display:flex; align-items:center; gap:10px; margin:0 0 var(--cl-space-2); }
.cl-sec-h > h3, .cl-sec-h > .cl-sec-title {
  margin:0; font:700 var(--cl-text-sm)/1.2 var(--cl-font-sans);
  letter-spacing:.09em; text-transform:uppercase; color:var(--cl-text-muted);
}
.cl-sec-h > .cl-rule { flex:1; height:1px; background:var(--cl-border); }

/* ---- buttons ---- */
.cl-btn {
  appearance:none; font:600 var(--cl-text-base)/1 var(--cl-font-sans);
  border:1px solid transparent; border-radius:var(--cl-radius-md);
  padding:8px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  transition:background var(--cl-dur-fast) var(--cl-ease-out), border-color var(--cl-dur-fast) var(--cl-ease-out), transform .06s;
  white-space:nowrap;
}
.cl-btn:active { transform:translateY(1px); }
.cl-btn:focus-visible { outline:2px solid var(--cl-focus); outline-offset:2px; }
.cl-btn-primary { background:var(--cl-primary-fill); color:#fff; }
.cl-btn-primary:hover { background:var(--cl-primary-fill-hover); }
.cl-btn-secondary { background:transparent; border-color:var(--cl-border-strong); color:var(--cl-text); }
.cl-btn-secondary:hover { border-color:var(--cl-primary); color:var(--cl-primary); }
.cl-btn-ghost { background:transparent; color:var(--cl-text-muted); }
.cl-btn-ghost:hover { background:var(--cl-surface-2); color:var(--cl-text); }
.cl-btn-danger { background:var(--cl-danger); color:#fff; }
.cl-btn-sm { padding:5px 10px; font-size:var(--cl-text-sm); }

/* ---- inputs ---- */
.cl-input, .cl-select {
  width:100%; font:400 var(--cl-text-base)/1.3 var(--cl-font-sans);
  background:var(--cl-bg); color:var(--cl-text);
  border:1px solid var(--cl-border); border-radius:var(--cl-radius-md); padding:8px 11px;
  transition:border-color var(--cl-dur-fast), box-shadow var(--cl-dur-fast);
}
.cl-input::placeholder { color:var(--cl-faint); }
.cl-input:focus, .cl-select:focus { outline:none; border-color:var(--cl-primary); box-shadow:0 0 0 3px var(--cl-primary-dim); }
.cl-search { position:relative; }
.cl-search > svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--cl-faint); pointer-events:none; }
.cl-search > .cl-input { padding-left:32px; }

/* ---- card / panel ---- */
.cl-card {
  background:var(--cl-surface); border:1px solid var(--cl-border);
  border-radius:var(--cl-radius-lg); box-shadow:var(--cl-shadow-1);
}
.cl-card-pad { padding:var(--cl-space-4); }
.cl-card-hover { transition:border-color var(--cl-dur-fast), box-shadow var(--cl-dur-base), background var(--cl-dur-fast); }
.cl-card-hover:hover { box-shadow:var(--cl-shadow-2); border-color:var(--cl-border-strong); }

/* ---- pills / badges / status ---- */
.cl-pill {
  font:700 var(--cl-text-xs)/1 var(--cl-font-sans); letter-spacing:.04em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--cl-radius-pill); display:inline-flex; align-items:center; gap:5px;
}
.cl-pill-team { background:var(--cl-primary-dim); color:var(--cl-primary); }
.cl-pill-solo { background:var(--cl-warning-bg); color:var(--cl-warning); }
.cl-pill-neutral { background:var(--cl-sunken); color:var(--cl-text-muted); }
.cl-chip {
  font:600 var(--cl-text-xs)/1 var(--cl-font-mono); font-variant-numeric:tabular-nums;
  padding:2px 7px; border-radius:var(--cl-radius-sm); background:var(--cl-sunken); color:var(--cl-text-muted);
}
.cl-status {
  font:700 10px/1 var(--cl-font-sans); letter-spacing:.03em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--cl-radius-pill); display:inline-flex; align-items:center; gap:5px;
}
.cl-status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.cl-status-paid    { color:var(--cl-success); background:var(--cl-success-bg); }
.cl-status-unpaid  { color:var(--cl-danger);  background:var(--cl-danger-bg); }
.cl-status-partial { color:var(--cl-warning); background:var(--cl-warning-bg); }

/* ---- heat dot ---- */
.cl-heat { width:8px; height:8px; border-radius:50%; flex:none; display:inline-block; }
.cl-heat-hot { background:var(--cl-heat-hot); } .cl-heat-warm { background:var(--cl-heat-warm); } .cl-heat-cold { background:var(--cl-heat-cold); }

/* ---- stat tile ---- */
.cl-tile { background:var(--cl-surface); border:1px solid var(--cl-border); border-radius:var(--cl-radius-md); padding:12px 14px; box-shadow:var(--cl-shadow-1); }
.cl-tile-v { font:800 26px/1 var(--cl-font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.cl-tile-l { margin-top:6px; font:600 10.5px/1 var(--cl-font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--cl-text-muted); }

/* ---- data table ---- */
.cl-table { width:100%; border-collapse:collapse; font-size:var(--cl-text-base); }
.cl-table thead th {
  position:sticky; top:0; z-index:1; background:var(--cl-surface-2); text-align:left;
  font:700 10.5px/1.2 var(--cl-font-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--cl-text-muted);
  padding:9px var(--cl-cell-x); border-bottom:1px solid var(--cl-border); white-space:nowrap;
}
.cl-table thead th.cl-r { text-align:right; }
.cl-table tbody td { padding:var(--cl-cell-y) var(--cl-cell-x); border-bottom:1px solid var(--cl-border); color:var(--cl-text); font-weight:500; }
.cl-table tbody td.cl-r { text-align:right; font-family:var(--cl-font-mono); font-variant-numeric:tabular-nums; }
.cl-table tbody tr:nth-child(even) { background:var(--cl-surface-2); }
.cl-table tbody tr:hover { background:var(--cl-surface-hover); }
.cl-table tfoot td { padding:10px var(--cl-cell-x); border-top:2px solid var(--cl-border-strong); font-weight:800; background:var(--cl-surface-2); }
.cl-table tfoot td.cl-r { text-align:right; font-family:var(--cl-font-mono); font-variant-numeric:tabular-nums; }

/* ---- skeleton ---- */
.cl-sk { height:12px; border-radius:var(--cl-radius-sm);
  background:linear-gradient(90deg, var(--cl-surface-2) 25%, var(--cl-surface-hover) 37%, var(--cl-surface-2) 63%);
  background-size:400% 100%; animation:cl-shimmer 1.4s infinite; }
@keyframes cl-shimmer { 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
@media (prefers-reduced-motion: reduce) { .cl-sk { animation:none; } }

/* ---- utilities ---- */
.cl-mono { font-family:var(--cl-font-mono); font-variant-numeric:tabular-nums; }
.cl-num  { font-variant-numeric:tabular-nums; }
.cl-muted { color:var(--cl-text-muted); }
.cl-faint-t { color:var(--cl-faint); }