/*
 * mortgage-calculator.css — per-tool styles: loan-mode radios and the
 * down-payment percent/amount select embedded inside an input affix.
 * Tokens only; no inline styles (CSP: style-src 'self').
 */

.mc-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-4);
}

/* Loan-mode radios — stacked, wraps cleanly on narrow screens. */
.mc-radio-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.mc-radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font: 500 14px/1.4 var(--font-sans);
  color: var(--text-primary);
}
.mc-radio input {
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--blue-600);
  cursor: pointer;
}

/* Down-payment unit selector, embedded in the right-hand affix slot. */
.mc-down-affix {
  padding: 0;
  border-right: 1px solid var(--neutral-300);
}
.mc-down-select {
  appearance: none;
  border: 0;
  height: 100%;
  padding: 0 32px 0 var(--space-3);
  background-color: transparent;
  color: var(--text-primary);
  font: 500 14px/1 var(--font-sans);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2363718A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}
.mc-down-select:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}