/* EV Calculator — scoped styles. Relies on /site.css for base typography. */

.calc-shell { max-width: 900px; margin: 0 auto; padding: 24px 16px 64px; }

.calc-disclosure {
  background: rgba(255,180,0,0.06);
  border: 1px solid rgba(255,180,0,0.18);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 32px;
  color: #c9c9d4;
  font-size: 0.9rem;
  line-height: 1.5;
}
.calc-disclosure a { color: #00e68a; }

.calc-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 32px;
}
@media (max-width: 640px) { .calc-form { grid-template-columns: 1fr; padding: 20px; } }

.calc-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; color: #aaaab8; }
.calc-form input, .calc-form select {
  background: #0d0d1a;
  color: #e6e6ee;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 1rem;
  font-family: inherit;
}
.calc-form input:focus, .calc-form select:focus {
  outline: none; border-color: #00e68a; box-shadow: 0 0 0 2px rgba(0,230,138,0.2);
}

.calc-results {
  background: rgba(0,230,138,0.04);
  border: 1px solid rgba(0,230,138,0.15);
  border-radius: 14px;
  padding: 28px;
}

.calc-metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 640px) { .calc-metric-row { grid-template-columns: 1fr; } }

.calc-metric { text-align: center; }
.calc-metric .label { display: block; font-size: 0.8rem; color: #7c7c8a; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.calc-metric .value { display: block; font-size: 1.8rem; font-family: 'Syne', sans-serif; font-weight: 700; color: #00e68a; }
.calc-metric.negative .value { color: #ff5c7a; }

.calc-histogram { margin-bottom: 24px; }
.calc-histogram h3 { font-size: 0.95rem; color: #aaaab8; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.calc-histogram svg { width: 100%; height: 140px; display: block; }
.calc-histogram .bar { fill: #00e68a; opacity: 0.7; }
.calc-histogram .axis { fill: #6b6b78; font-size: 10px; }

.calc-percentiles { display: flex; justify-content: space-around; font-size: 0.88rem; color: #aaaab8; margin-bottom: 20px; }
.calc-percentiles strong { display: block; color: #e6e6ee; font-size: 1.1rem; font-family: 'Syne', sans-serif; }

.calc-interp { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; color: #c9c9d4; font-size: 0.95rem; line-height: 1.6; }