@layer components {
  .form { max-width: 38rem; }

  .form fieldset {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-4) var(--space-2);
  }
  .form legend {
    font-family: var(--font-serif);
    font-size: var(--text-base);
    padding-inline: var(--space-2);
  }

  .field-group { margin-bottom: var(--space-4); }
  /* Field text-labels only — not control labels like .switch / .check. */
  .field-group > label:not(.switch):not(.check) {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    color: var(--ink-2);
  }

  /* Inputs sit inset — darker than their surface, light border. */
  .input, .select, .textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--control-bg);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    color: var(--ink);
  }
  .input::placeholder, .textarea::placeholder { color: var(--ink-4); }
  .input:focus, .select:focus, .textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 0;
    border-color: var(--accent);
  }
  .input.tnum { font-family: var(--font-mono); }
  .textarea { min-height: 5rem; resize: vertical; }

  .field-hint { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--ink-3); }

  .form__actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
}