/* Phase 8: the identity, rhythm, focus and CTA colors come from tokens.css. */
.mg-p8-form { padding:var(--space-6); border:var(--hairline) solid var(--line); border-radius:var(--radius-md); background:var(--surface-raised); gap:var(--space-4); margin-block-end:var(--space-4); }
.mg-p8-form input:not([type="hidden"]):not([type="checkbox"]), .mg-p8-form select { width:100%; min-height:var(--tap-min); color:var(--ink); background:var(--surface); border:var(--hairline) solid var(--line-strong); border-radius:var(--radius-sm); padding:var(--space-3); font:inherit; }
.mg-p8-form label { color:var(--ink); }
.mg-p8-form .mg-p8-addon { display:flex; align-items:center; gap:var(--space-2); }
.mg-p8-form :is(input,select,button):focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
@media(prefers-reduced-motion:reduce) { .mg-p8-form *, .mg-p8-form *::before { transition:none!important; animation:none!important; } }