/**
 * Form controls shared by calculators and converters.
 */

.calcoryn-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.calcoryn-field__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.calcoryn-field__input,
.calcoryn-field__select {
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-card);
  color: var(--color-text-primary);
  font-family: var(--font-family-numeric);
  font-size: var(--text-lg);
  width: 100%;
}

.calcoryn-field__input:focus-visible,
.calcoryn-field__select:focus-visible {
  outline: none;
  border-color: var(--color-primary-blue);
  box-shadow: var(--color-focus-ring);
}

.calcoryn-field__hint {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* Validation state is always paired with text, not color alone. */
.calcoryn-field--invalid .calcoryn-field__input {
  border-color: var(--color-danger);
}

.calcoryn-field__error {
  font-size: var(--text-xs);
  color: var(--color-danger);
  font-weight: var(--font-weight-medium);
}

.calcoryn-field__error:empty {
  display: none;
}

/* Result readout: large, high-contrast, tabular numerals. */
.calcoryn-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.calcoryn-result__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.calcoryn-result__value {
  font-family: var(--font-family-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  word-break: break-word;
}

/* Semantic tone modifiers -- neutral (no modifier) is the default for
   every result; --positive/--negative apply only where a tool's own
   framing (savings, profit, growth, or an explicitly gain/loss-labeled
   figure like ROI) supports it. Never inferred from a number's sign
   alone except where the tool explicitly documents that meaning (see
   docs/ADDING-A-CALCULATOR.md's result_tone section). Color is always
   paired with text that already says "saved"/"profit"/"gain"/"loss" (or,
   for ROI, an explicit signed dollar amount) -- never the sole indicator
   of meaning. */
.calcoryn-result__value--positive {
  color: var(--color-success);
}

.calcoryn-result__value--negative {
  color: var(--color-danger);
}

/* Multi-line breakdowns (e.g. Etsy Fee Calculator, Paint Calculator) use a
   smaller, left-aligned, non-bold style — the default 3xl bold single-line
   style doesn't scale to a dozen line items. white-space: pre-line lets
   the engine's formatted string include real line breaks. */
.calcoryn-result__value--detailed {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  white-space: pre-line;
  text-align: left;
  line-height: 1.6;
}

.calcoryn-swap-btn {
  align-self: center;
}