/* ═══════════════════════════════════════════════════════════════
   MISE — COMPONENTS  ·  cards · buttons · chips · metrics · charts · toasts
═══════════════════════════════════════════════════════════════ */

/* ── Card ── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e1);
  transition: box-shadow var(--d-med) var(--ease-out), transform var(--d-med) var(--ease-out);
}
.card.pad { padding: var(--s5); }
.card.lift:hover { box-shadow: var(--e3); transform: translateY(-3px); }
.card-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card-ink .eyebrow, .card-ink .muted { color: color-mix(in srgb, var(--paper) 62%, transparent); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: 44px; padding: 0 var(--s5);
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-full); font-weight: 640; font-size: var(--t-sm);
  letter-spacing: .01em; box-shadow: var(--e2);
  transition: transform var(--d-fast) var(--ease-spring), box-shadow var(--d-fast) var(--ease-out), opacity var(--d-fast);
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--e3); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn-ghost:hover { background: var(--line-2); box-shadow: var(--e1); }
.btn-sm { height: 34px; padding: 0 var(--s4); font-size: var(--t-xs); }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .4; pointer-events: none; }

/* ── Chip / tag ── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: var(--r-full);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--ink-3); background: var(--card);
}
.chip .dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.chip.live { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, var(--line)); background: var(--live-glow); }
.chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: var(--warn-glow); }
.chip.crit { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, var(--line)); background: var(--crit-glow); }

/* ── Metric ── */
.metric { display: flex; flex-direction: column; gap: 6px; }
.metric .val { font-family: var(--serif); font-weight: 900; font-size: clamp(2rem,1.2rem+2vw,3rem); line-height: .92; letter-spacing: -0.035em; }
.metric .cap { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: var(--t-xs); }
.delta.up { color: var(--live); } .delta.down { color: var(--crit); }
.delta svg { width: 13px; height: 13px; }

/* ── List row ── */
.lrow {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  transition: background var(--d-fast) var(--ease-out);
}
.lrow:hover { background: var(--line-2); }
.lrow + .lrow { border-top: 1px solid var(--line); }
.lrow .grow { flex: 1; min-width: 0; }
.lrow .name { font-weight: 620; }
.lrow .sub { font-size: var(--t-xs); color: var(--ink-3); }

/* ── Progress / meter ── */
.meter { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 99px; background: var(--ink);
  transform-origin: left; animation: meterfill var(--d-slow) var(--ease-out) both; }
.meter.warn > i { background: var(--warn); } .meter.crit > i { background: var(--crit); }
.meter.live > i { background: var(--live); }
@keyframes meterfill { from { transform: scaleX(0); } }

/* ── Toast ── */
#toasts { position: fixed; bottom: var(--s5); right: var(--s5); z-index: 100;
  display: flex; flex-direction: column; gap: var(--s2); }
.toast {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); min-width: 260px; max-width: 380px;
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-md); box-shadow: var(--e-ink);
  animation: toastin var(--d-med) var(--ease-spring) both;
}
.toast.out { animation: toastout var(--d-med) var(--ease-inout) both; }
.toast .bar { width: 3px; align-self: stretch; border-radius: 99px; background: var(--paper); }
.toast.success .bar { background: var(--live); }
.toast.warn .bar { background: var(--warn); }
.toast.crit .bar { background: var(--crit); }
.toast .t-title { font-weight: 700; font-size: var(--t-sm); }
.toast .t-sub { font-size: var(--t-xs); opacity: .7; }
@keyframes toastin { from { opacity: 0; transform: translateX(40px) scale(.96); } }
@keyframes toastout { to { opacity: 0; transform: translateX(40px) scale(.96); } }

/* ── Skeleton shimmer (perceived performance) ── */
.skel { background: linear-gradient(90deg, var(--line-2) 25%, var(--line) 37%, var(--line-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-sm); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Segmented control ── */
.seg { display: inline-flex; padding: 3px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-full); }
.seg button { height: 32px; padding: 0 16px; border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 640; color: var(--ink-3);
  transition: color var(--d-fast); position: relative; z-index: 1; }
.seg button.on { color: var(--paper); }
.seg { position: relative; }
.seg .thumb { position: absolute; top: 3px; bottom: 3px; border-radius: var(--r-full); background: var(--ink); box-shadow: var(--e2);
  transition: transform var(--d-med) var(--ease-spring), width var(--d-med) var(--ease-spring); z-index: 0; }

/* ── Divider ── */
.hr { height: 1px; background: var(--line); border: none; margin: var(--s4) 0; }

/* Product / UI icon sizing — SVGs fill their box, colour via currentColor */
.pico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 22px; color: var(--ink-2); }
.pico svg { width: 100%; height: 100%; }
.pico.lg { width: 26px; height: 26px; }
.pico.xl { width: 30px; height: 30px; color: var(--ink); }

/* Number reveal helper */
.count { opacity: 0; }
.count.in { animation: fadeUp var(--d-med) var(--ease-out) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Stagger utility: children animate in sequence (set --i per child) */
.stagger > * { animation: fadeUp var(--d-med) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }