/* Software Cost Calculator
   Builds on the assessment page (ai-readiness.css) for the hero, card, gate and report
================================================= */

.calculator-card [hidden] {
  display: none !important;
}

/* Inputs */
.hours-rows {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-unit) * 2);
  margin-bottom: calc(var(--space-unit) * 4);
}

.hours-row {
  display: grid;
  grid-template-columns: 1fr 128px;
  gap: calc(var(--space-unit) * 2);
  align-items: center;
}

.hours-row label {
  font-size: 1rem;
  line-height: 1.45;
}

.calculator-card .input-text {
  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);
}

/* No spinner arrows: they eat the room the number needs in a narrow box */
.calculator-card input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.calculator-card input[type="number"]::-webkit-inner-spin-button,
.calculator-card input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* A unit inside the input: "hrs" after the number, "$" before it */
.input-suffix,
.input-prefix {
  position: relative;
}

.input-suffix span,
.input-prefix span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  pointer-events: none;
}

.input-suffix span { right: calc(var(--space-unit) * 2); }
.input-suffix .input-text { padding-right: calc(var(--space-unit) * 6); }

.input-prefix span { left: calc(var(--space-unit) * 2); }
.input-prefix .input-text { padding-left: calc(var(--space-unit) * 4); }

.rate-group .input-prefix {
  max-width: 200px;
}

/* Result */
.cost-result {
  padding-top: calc(var(--space-unit) * 4);
  border-top: 1px solid var(--color-mint);
}

.cost-result .small-caps {
  margin-bottom: calc(var(--space-unit) * 1);
}

.cost-number {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 11vw, 4.5rem);
  line-height: 1;
  color: var(--color-sage);
  overflow-wrap: anywhere;
}

.cost-period {
  font-size: 1.25rem;
  color: var(--color-text-secondary);
  margin-left: calc(var(--space-unit) * 1);
}

.cost-summary {
  margin-top: calc(var(--space-unit) * 2);
}

.cost-benchmark {
  margin-top: calc(var(--space-unit) * 1);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.calculator-next {
  margin-top: calc(var(--space-unit) * 4);
}

.calculator-next a:not(.project-link) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 600px) {
  .hours-row { grid-template-columns: 1fr 112px; }
}