/* Finance filter controls share one compact two-column range geometry. */
.finance-v4-date-range,
.finance-v4-amount-range {
  display: grid;
  gap: 7px;
}

.finance-v4-date-range > span,
.finance-v4-amount-range > span {
  color: var(--muted);
  font-size: var(--text-caption, 12px);
  font-weight: 650;
  line-height: var(--line-ui, 1.4);
}

.finance-v4-date-range > div,
.finance-v4-amount-range > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.finance-v4-date-range label,
.finance-v4-amount-range label {
  min-width: 0;
}

.finance-v4-date-range small,
.finance-v4-amount-range small {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: var(--text-caption, 12px);
  line-height: var(--line-ui, 1.4);
}

.finance-v4-date-range .amosha-date-control,
.finance-v4-date-range input,
.finance-v4-amount-range input {
  width: 100%;
  min-width: 0;
}

/* finance-form-v5 intentionally makes transaction amount fields large (24px / 58px).
 * Filter amounts reuse the same decimal behavior, not the transaction-card geometry.
 * Keep filter controls on the normal product control scale. */
.finance-filter-money-input {
  height: var(--control-default, 40px) !important;
  min-height: var(--control-default, 40px) !important;
  padding: 9px 12px !important;
  appearance: textfield;
  -moz-appearance: textfield;
  border-radius: var(--radius-sm, 8px) !important;
  font-size: var(--text-body, 14px) !important;
  font-weight: 500 !important;
  line-height: var(--line-ui, 1.4) !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.finance-filter-money-input::-webkit-outer-spin-button,
.finance-filter-money-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* Finance readability baseline. No operational label should drop to legacy
 * 10px metadata sizing; the shared caption/body tokens are the floor here. */
.finance-v4-filter-head span,
.finance-v4-filter-body label > span,
.finance-v4-type legend,
.finance-v4-summary span,
.finance-v4-day > header span,
.finance-v4-copy small,
.finance-v4-details dt {
  font-size: var(--text-caption, 12px);
  line-height: var(--line-ui, 1.4);
}

.finance-v4-filter-head strong,
.finance-v4-day > header strong,
.finance-v4-copy strong,
.finance-v4-amount strong,
.finance-v4-details dd {
  font-size: var(--text-body, 14px);
  line-height: var(--line-ui, 1.4);
}

.finance-v4-filter-body input,
.finance-v4-filter-body select,
.finance-v4-filter-body .segmented button,
.finance-v4-filter-head .button {
  font-size: var(--text-body, 14px);
}