/* These refinements complement the existing shared public-form components. */
@media screen {
  .calculator-form, .loan-form { container: public-form / inline-size; }
  @supports (grid-template-rows: subgrid) {
    .calculator-form .calculator-field {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      row-gap: 8px;
      align-items: start;
    }
  }
  .calculator-form[data-calculator="subscriptions_calc"] .calculator-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .calculator-form[data-calculator="subscriptions_calc"] [data-field="count"] {
    grid-column: 1 / -1;
  }
  .calculator-fields-help {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
  }
  .receipt-form .loan-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
  .receipt-form .loan-field { gap: 8px; }
  .receipt-form .loan-field > .loan-help { margin: 0; }
  .receipt-form .field-row-help {
    grid-column: 1 / -1;
    margin: -8px 0 0;
  }
  .receipt-form .loan-section > .loan-field,
  .receipt-form details[open] > .loan-fields { margin-top: 16px; }
  @container public-form (max-width: 435px) {
    .loan-form .loan-fields,
    .calculator-form .calculator-fields,
    .calculator-form[data-calculator="subscriptions_calc"] .calculator-fields {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}