Say a field is in error twice, and stop dashing a read-only one

M3 wants two visual indicators per state and names the pair for a text
field: the error colours and a trailing error icon. The field now draws
one, labelled "Error", unless the caller already trails it or the field
is xs. A read-only field loses its dashed outline: M3 keeps "the same
visual style as an editable field", and the native readonly attribute is
what tells a screen reader. The data-readonly hook stays.

Plan step 20, findings IN-18 and IN-19.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/components/field.css

@@ -238,6 +238,11 @@
         color: var(--md-sys-color-on-surface-variant);
     }
 
+    /* The error's second indicator: M3 asks that the colour change never stand alone. */
+    .field-error {
+        color: var(--md-sys-color-error);
+    }
+
     .field-icon,
     .field-arrow {
         pointer-events: none;
@@ -421,11 +426,11 @@
         --field-ink: var(--md-sys-color-error);
     }
 
-    /* Dashed for a field the caller made read-only — marked on the field, not read off the control,
-       because a date picker makes its own input read-only too. */
-    .field[data-readonly] .field-outline {
-        border-style: dashed;
-    }
+    /* `data-readonly` marks a field the caller made read-only — on the field, not read off the
+       control, because a date picker makes its own input read-only too. Nothing here draws it
+       differently: M3 says a read-only field keeps "the same visual style as an editable field, but
+       clearly labeled read-only", and the native `readonly` attribute is what carries that. The hook
+       stays for an application that wants a mark of its own. */
 
     .field:has(.field-control:disabled) {
         --field-edge: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);