@layer components {
  /* Shared form system: labeled fields with the brand focus ring, plus
     flash-message styling. Used by the login pages and the portal's
     new-claim / new-endorsement forms. */
  .form-alert {
    font-size: var(--text-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
  }
  .form-alert.alert {
    color: var(--semantic-danger);
    background: var(--semantic-danger-wash);
  }
  .form-alert.notice {
    color: var(--semantic-success);
    background: var(--semantic-success-wash);
  }
  /* A notice with a title, body, and chip links (the service review's
     completion confirmation). The body reads in the page's text color. */
  .form-alert--detail {
    color: var(--text-primary);
  }
  .form-alert--detail .app-chip-row {
    margin-top: var(--spacing-xs);
  }
  .form-alert-title {
    font-weight: 600;
    color: var(--semantic-success);
  }

  .form-group {
    margin-bottom: var(--spacing-sm);

    label {
      display: block;
      font-size: var(--text-xs);
      font-weight: 600;
      margin-bottom: var(--spacing-xs);
      color: var(--text-primary);
    }

    input,
    select,
    textarea {
      width: 100%;
      padding: var(--spacing-sm);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      color: var(--text-primary);
      background: var(--surface-card);
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    input::placeholder,
    textarea::placeholder {
      color: var(--text-tertiary);
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--accent);
      box-shadow: var(--shadow-focus);
    }

    textarea {
      min-height: 96px; /* ~4 lines of input */
      resize: vertical;
    }

    select {
      appearance: none;
      cursor: pointer;
      padding-right: calc(2 * var(--spacing-sm) + 12px); /* caret + a gap each side */
      background-image: var(--select-caret);
      background-repeat: no-repeat;
      background-position: right var(--spacing-sm) center;
      background-size: 12px; /* caret glyph size */
    }
  }
}