/* Reusable components: modals, buttons, pills, chips, bars, dialogs. */

/* ---------- Modal (cream card) ---------- */
.modal {
  position: relative;
  width: min(100%, 30rem);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  color: var(--text);
  animation: modal-in var(--dur-slow) var(--ease-spring) both;
}
.modal-header { display: flex; flex-direction: column; gap: var(--sp-1); text-align: center; }
.modal-body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.modal-footer .t-hint { flex: 1 1 12rem; }
.modal-footer .actions { display: flex; gap: var(--sp-2); margin-left: auto; }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 2.6rem;
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out),
    background-color var(--dur-med) var(--ease-out);
}
.btn:active { transform: scale(0.96); }
.ui .btn-primary { background: var(--accent-grad); color: var(--text-on-accent); box-shadow: var(--shadow-accent); }
.ui .btn-primary:hover { box-shadow: 0 16px 38px rgba(123, 47, 247, 0.6); }
.ui .btn-ghost { background: var(--surface-muted); color: var(--ink-700); }
.ui .btn-ghost:hover { background: var(--lilac-200); }
.btn-lg { min-height: 3.2rem; padding: 0 var(--sp-6); font-size: var(--fs-md); }
.btn.is-active { outline: 3px solid var(--purple-300); outline-offset: 2px; }

/* ---------- Pills (HUD glass chips) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 2.4rem;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-sm);
  color: var(--white);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  white-space: nowrap;
}

/* ---------- Stat chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); justify-content: center; margin: 0; padding: 0; list-style: none; }
.chip {
  --chip: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.3em 0.75em;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--chip) 14%, white);
  color: color-mix(in srgb, var(--chip) 80%, black);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.chip b { font-weight: var(--fw-black); font-size: 1.15em; }

/* ---------- Progress bars ---------- */
.bar {
  --fill: var(--accent);
  position: relative;
  height: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--lilac-200);
  overflow: hidden;
}
.bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value, 0%);
  border-radius: inherit;
  background: var(--fill);
  transition: width 700ms var(--ease-out);
}

/* ---------- Dialog (small confirmation over a modal) ---------- */
.scrim {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: var(--scrim);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: auto;
  animation: fade-in var(--dur-med) var(--ease-out) both;
}
.dialog {
  width: min(100%, 22rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: modal-in var(--dur-slow) var(--ease-spring) both;
}
.dialog .actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Icon badge ---------- */
.badge-icon {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: var(--r-md);
  font-size: 1.9rem;
}