/* Money input
*
* An amount and its currency, as one control. STORY-020 calls this the
* highest-risk field in the product, and the risk is not the styling.
*
*
*
*
*
*
*
* ── the amount and the currency are one value ────────────────────────────────
* ADR-0005: money is an integer in the minor unit plus an ISO 4217 code, never
* a float and never a bare number. The two inputs are joined visually because
* neither means anything alone — a "12000" with no currency is not a smaller
* amount, it is not an amount.
*
* ── why the digit count cannot be a constant ─────────────────────────────────
* The minor-unit digits come from the currency: JPY has 0, KWD has 3, most have
* 2. So the SAME keystrokes are three different amounts depending on the select
* beside them, and changing the currency must re-validate the field rather than
* only relabel it.
*
* ── and neither can the separators ───────────────────────────────────────────
* `1.234,50` is one thousand in Turkish and malformed in English. The parser's
* separators come from the locale, so the same input is two different numbers
* in the two languages the product ships — found in this prototype, ADR-0014.
* A component that hardcodes `.` as the decimal point is wrong for half the
* users on day one.
*
* ── behaviour this file cannot express, and that is not optional ─────────────
* · `inputmode="decimal"`, not `type="number"`. A number input's spinners are
* meaningless for money, its scroll-wheel changes values by accident, and
* browsers disagree about what it does with a comma.
* · Digits are tabular and end-aligned, so a column of amounts compares by eye.
* · Parse on submit, not per keystroke. A field that rejects "12," while the
* reader is halfway through typing "12,50" is fighting them.
* · An invalid amount keeps what was typed. Clearing the field to "fix" it
* loses the only copy of what they meant.
*/
.amount {
display: flex;
align-items: stretch;
}
/* Joined, so the pair reads as one control: the input loses its trailing
corners and the select loses its leading border. */
.amount .field__control {
border-start-end-radius: 0;
border-end-end-radius: 0;
font-variant-numeric: tabular-nums;
text-align: end;
}
/* A real