/* Field component: text inputs, selects and textareas in panels and dialogs.
   Canonical markup: class="field". cloud-input stays as an alias. */
@layer components {
  .field, .cloud-input {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--sys-border);
    border-radius: var(--sys-radius-md);
    background: var(--sys-surface-control);
    box-shadow: var(--sys-elevation-1);
    color: var(--sys-on-surface);
  }
  select:is(.field, .cloud-input) option { background: var(--sys-bg-raised); color: var(--sys-on-surface); }
}