/* gd-code-field */
gd-code-field { display: block; }
gd-code-field .codefield { display: block; width: 100%; padding: 16px 18px;
  font: 600 var(--type-field)/1 var(--font-mono);
  letter-spacing: var(--code-tracking); text-align: center; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--accent-soft-border); border-radius: var(--radius-ctl); outline: none; }
gd-code-field .codefield:focus { border-color: var(--accent); }
gd-code-field .codefield.err { border-color: var(--garnet); }
gd-code-field .field-error { min-height: 20px; font: var(--type-note)/1.5 var(--font-ui);
  color: var(--garnet-ink); text-align: center; margin: var(--space-xs) 0 var(--space-2xs); }