/* ==========================================================================
MacLaine Finance, Field & Input Component System
fields.css · v1.0
--------------------------------------------------------------------------
A modular, bilingual, theme-aware set of form-field components. Every tool
composes its input UI (and the shared "Your Details" section) from these
classes. Add or remove fields freely, the group grid reflows on its own.
DEPENDS ON _shared.css design tokens. Load this file AFTER _shared.css:
Tokens consumed (all already defined in _shared.css, light + dark):
--bg --surface --surface-2 --ink --muted --faint
--line --line-2 --accent --accent-soft --accent-text --red --red-soft
--radius --sans --mono --serif
Dark theme is driven by [data-theme="dark"] on (same as _shared.css).
Nothing here redefines a colour token, restyle the whole system by editing
_shared.css.
INTENTIONAL #fff EXCEPTION: three surfaces are hard white in light mode by
design, the free-input well (.fld__input), the switch knob
(.switch__track::after) and the stepper track (.stepper). They read as
"type/act here" against the warm --surface card, and each has a correct
[data-theme="dark"] override. This is the suite's only sanctioned raw-#fff
use; do not "tokenise" it away.
A11Y (intake, 0.24): every interactive control carries :focus-visible; the
segmented toggle mirrors its state in aria-pressed (the controller sets both
the .is-on class and aria-pressed, and this file styles both), so toggle
state is programmatic, not class-only. prefers-reduced-motion is handled by
the global kill switch in _shared.css (loaded first, `*` + !important), which
reaches every transition below, nothing to duplicate here.
CONTENTS
1 Density scale ............ --fld-* vars + .fields--compact
2 Field primitive .......... .fld .fld__label .fld__control .fld__input
3 Input variants ........... --suffix --select --computed
4 Choice controls .......... .seg .switch .stepper .range
5 States & affordances ..... :focus .is-default .fld--inherited
.fld__hint .tip .fld--error
6 Groups & layout .......... .fgroup .fgrid
7 Person / partner ......... .people .person .addcard .sharednote
Input enclosure .......... .fcard (bounded surface for a tool input section)
8 Modifiers ................ .fields--compact .fields--uppercase
========================================================================== */
/* 1 ── DENSITY SCALE ──────────────────────────────────────────────────────
Three spacing values drive the whole system. Comfortable is the default
(full-page tool sections). Add .fields--compact on any wrapper to tighten
for dense contexts, this is what the settings-drawer sub-page uses. */
:root{
--fld-card-pad: 1.6rem 1.85rem; /* .person padding */
--fld-group-gap: 1.9rem; /* space above each .fgroup */
--fld-grid-gap: 1.05rem 1.3rem; /* row/col gap between fields in .fgrid */
--fld-col-min: 185px; /* min field width before the grid wraps */
}
.fields--compact{
--fld-card-pad: 1.05rem 1.25rem;
--fld-group-gap: 1.2rem;
--fld-grid-gap: .85rem 1rem;
--fld-col-min: 100%; /* drawer is narrow → always one column */
}
/* 2 ── FIELD PRIMITIVE ────────────────────────────────────────────────────
The atom of the system. Every field is:
.fld > .fld__label + .fld__control > .fld__input
Labels are sentence-case sans (readable); reserve UPPERCASE MONO for group
headings so hierarchy reads through case + typeface, not size alone. */
.fld{ display:flex; flex-direction:column; min-width:0; }
.fld__label{
font-family:var(--sans); font-size:12.5px; font-weight:500; letter-spacing:0;
color:var(--ink); margin-bottom:.5rem; line-height:1.35;
}
.fld__control{ position:relative; }
.fld__input{
display:block; width:100%;
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
color:var(--ink); font-family:var(--mono); font-size:13px;
padding:.65rem .9rem; min-height:44px; /* 44px touch target */
outline:none; -webkit-appearance:none; appearance:none;
transition:border-color .2s, background .2s;
}
.fld__input:focus{ border-color:var(--accent); } /* focus affordance */
.fld__input::-webkit-outer-spin-button,
.fld__input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.fld__input[type=number]{ -moz-appearance:textfield; }
[data-theme="dark"] .fld__input{ background:var(--surface); }
/* 3 ── INPUT VARIANTS ─────────────────────────────────────────────────────
FREE INPUTS are white (light) / surface (dark) → "type here".
DROPDOWNS get a surface-2 tint + a caret → "choose from a list".
This tint/caret contrast is the primary affordance that tells the two apart. */
/* 3a --suffix : a trailing unit inside the box (currency, %, age). */
.fld__control--suffix .fld__input{ padding-right:2.6rem; }
.fld__unit{
position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
font-family:var(--mono); font-size:12px; color:var(--faint); pointer-events:none;
}
/* 3b --select : a native