/*
 * OTP boxes, distributed across the full form width.
 *
 * Filament lays the six boxes out as `display: flex; width: fit-content` with a
 * fixed per-box width, so they cluster on the left while the label above and the
 * submit button below span the whole column. In the split-login form that reads
 * as a broken layout rather than a deliberate one.
 *
 * This ONLY touches the `fi-*` hook classes, which is the customisation surface
 * Filament actually supports (docs/08-styling/02-css-hooks.md). The previous
 * approach — overriding the component's blade template — silently stopped working
 * in 5.7 when the component moved its markup into PHP. Styling through the hook
 * classes has no such failure mode: if a class ever disappears, the rule goes
 * inert and the layout falls back to Filament's own, which is merely plain.
 *
 * Kept in sync with app-enlil, which hit the same breakage first (PR #54 there).
 *
 * Selectors are doubled to raise specificity, because Filament's stylesheet is
 * loaded after this file and its single-class rules would otherwise win.
 */

.fi-one-time-code-input-ctn.fi-one-time-code-input-ctn {
    width: 100%;
}

.fi-one-time-code-input-ctn .fi-one-time-code-input-digit.fi-one-time-code-input-digit {
    /* `min-width: 0` lets a box shrink below its content width, so six of them
       always fit instead of overflowing the column on narrow viewports. */
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}