/* ════════════════════════════════════════════════════════════
   Custom component classes and animations
   ════════════════════════════════════════════════════════════ */

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  padding: 1.25rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .04);
}

.card-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}

.card-title {
  font-size: .875rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -.01em;
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #e0e9ff;
  color: #4f46e5;
  font-size: .7rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* ── Form fields ────────────────────────────────────────────── */
.field-label {
  display: block;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  margin-bottom: .35rem;
}

.input-group {
  position: relative;
}

.field-input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: .5rem;
  padding: .5rem .75rem;
  padding-right: 2rem;
  font-size: .875rem;
  color: #1e293b;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -moz-appearance: textfield;
}
.field-input::-webkit-outer-spin-button,
.field-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgb(99 102 241 / .15);
}

.input-suffix {
  position: absolute;
  right: .625rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .75rem;
  font-weight: 600;
  color: #94a3b8;
  pointer-events: none;
}

/* ── Unit toggle ────────────────────────────────────────────── */
.unit-btn {
  cursor: pointer;
}
.active-unit {
  background: #4f46e5;
  color: #fff;
}

/* ── Density radio cards ────────────────────────────────────── */
.density-radio {
  display: block;
  cursor: pointer;
}

.density-card {
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  padding: .65rem .875rem;
  transition: all .15s;
}
.density-radio:hover .density-card {
  border-color: #818cf8;
}

.density-pill {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .5rem;
  border-radius: 999px;
}

/* ── Breakdown cards ────────────────────────────────────────── */
.breakdown-card {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  padding: 1rem;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .04);
}

.breakdown-dot {
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: .25rem;
}

.breakdown-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #94a3b8;
  margin-bottom: .2rem;
}

.breakdown-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: .4rem;
}

.breakdown-bar-track {
  height: .25rem;
  background: #f1f5f9;
  border-radius: 9999px;
  overflow: hidden;
}

.breakdown-bar {
  height: 100%;
  border-radius: 9999px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
  width: 0%;
}

/* ── Formula rows ───────────────────────────────────────────── */
.formula-row {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.formula-key {
  min-width: 7rem;
  font-size: .8rem;
  font-weight: 600;
  color: #64748b;
  flex-shrink: 0;
}

.formula-val {
  font-size: .875rem;
  color: #1e293b;
  font-weight: 500;
}

/* ── Drop zone states ───────────────────────────────────────── */
.dz-hover {
  border-color: #6366f1 !important;
  background-color: #f0f4ff !important;
  transform: scale(1.01);
}

/* ── Spinner ────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .65s linear infinite;
  flex-shrink: 0;
}

/* ── Entrance animations ────────────────────────────────────── */
@keyframes slide-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.slide-in { animation: slide-in .35s ease-out both; }

@keyframes count-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.count-animate { animation: count-up .4s ease-out both; }

/* ── Custom scrollbar (results panel) ──────────────────────── */
#right-col::-webkit-scrollbar         { width: 4px; }
#right-col::-webkit-scrollbar-track   { background: #f8fafc; }
#right-col::-webkit-scrollbar-thumb   { background: #cbd5e1; border-radius: 9999px; }

/* ── Mode toggle tab buttons ────────────────────────────────── */
.mode-tab { cursor: pointer; white-space: nowrap; }

/* Quick Estimate — active (emerald) */
.active-mode-quick     { background: #059669; color: #fff; }
.active-mode-quick-off { background: #fff; color: #64748b; }
.active-mode-quick-off:hover { background: #f8fafc; }

/* Accurate Mode — active (indigo) */
.active-mode-accurate     { background: #4f46e5; color: #fff; }
.active-mode-accurate-off { background: #fff; color: #64748b; }
.active-mode-accurate-off:hover { background: #f8fafc; }

/* ── Analysis chips (shared inputs row) ─────────────────────── */
.analysis-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: .2rem .65rem;
}
.analysis-chip-icon { font-size: .8rem; }

/* ── Density result cards (Low / Medium / High) ─────────────── */
.density-result-card {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / .05);
  display: flex;
  flex-direction: column;
}

.density-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1rem;
}

.density-result-body {
  padding: 1rem;
  flex: 1;
}

.density-total-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
  margin-bottom: .2rem;
}

.density-total-val {
  font-size: 2rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -.03em;
  line-height: 1;
}

.density-time-val {
  font-size: .75rem;
  color: #64748b;
  font-weight: 500;
  margin-top: .2rem;
}

/* ── Mini bar rows inside density cards ─────────────────────── */
.mini-bar-row {
  display: grid;
  grid-template-columns: 3.5rem 3rem 1fr;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  color: #64748b;
}
.mini-bar-row span:nth-child(2) {
  text-align: right;
  font-weight: 600;
  color: #374151;
  font-size: .68rem;
}
.mini-track {
  height: .3rem;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.mini-bar {
  height: 100%;
  border-radius: 999px;
  transition: width .75s cubic-bezier(.4,0,.2,1);
  width: 0%;
}

/* ── Formula equation boxes ─────────────────────────────────── */
.formula-eq-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.formula-eq-box {
  flex: 1;
  min-width: 70px;
  border-radius: .6rem;
  padding: .5rem .65rem;
  text-align: center;
}
.formula-eq-lbl {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  margin-bottom: .15rem;
}
.formula-eq-val {
  font-size: .85rem;
  font-weight: 700;
  color: #1e293b;
}
.formula-op {
  font-size: 1rem;
  font-weight: 700;
  color: #94a3b8;
}

/* ── Button variants ────────────────────────────────────────── */
.btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font-weight: 600;
  font-size: .75rem;
  padding: .625rem 1rem;
  border-radius: .75rem;
  cursor: pointer;
  transition: all .15s;
}
.btn-secondary:hover { background: #f8fafc; }

.btn-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  border: 1px solid #c4d3fe;
  background: #e0e9ff;
  color: #4338ca;
  font-weight: 700;
  font-size: .75rem;
  padding: .625rem 1rem;
  border-radius: .75rem;
  cursor: pointer;
  transition: all .15s;
}
.btn-brand:hover { background: #c4d3fe; }

/* ── Misc ───────────────────────────────────────────────────── */
button, input, label { transition: all .15s ease; }
#preview-img { max-height: 130px; object-fit: contain; }