@layer components {
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .field__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-ink-muted);
  }

  .field__label--required::after {
    content: " *";
    color: var(--color-negative);
  }

  .field__hint {
    font-size: var(--text-xs);
    color: var(--color-ink-subtle);
    margin-block-start: var(--space-1);
  }

  .form-warning {
    font-size: var(--text-sm);
    color: var(--color-warning);
    background: var(--color-warning-bg);
    border: var(--border);
    border-color: var(--color-warning-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
  }

  .field__error {
    font-size: var(--text-xs);
    color: var(--color-negative);
    margin-block-start: var(--space-1);
  }

  .input {
    inline-size: 100%;
    padding: var(--control-pad-y) var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-ink);
    background-color: var(--color-canvas);
    border: var(--border-input);
    border-radius: var(--radius);
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);
    appearance: none;

    &::placeholder {
      color: var(--color-ink-subtle);
    }

    &:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
    }

    &:disabled {
      background-color: var(--color-surface-alt);
      color: var(--color-ink-subtle);
      cursor: not-allowed;
    }

    &.input--error {
      border-color: var(--color-negative);

      &:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-negative) 15%, transparent);
      }
    }
  }

  textarea.input {
    resize: vertical;
    min-block-size: 6rem;
  }

  select.input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23868e96' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25em;
    padding-inline-end: 2.5rem;
  }

  /* Error summary */
  .error-summary {
    background-color: var(--color-negative-bg);
    border: 1px solid var(--color-negative-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-negative);

    p + p {
      margin-block-start: var(--space-1);
    }
  }

  /* Form layout */
  .form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .form__grid {
    display: grid;
    gap: var(--space-4);

    &.form__grid--2 {
      grid-template-columns: repeat(2, 1fr);
    }

    &.form__grid--3 {
      grid-template-columns: repeat(3, 1fr);
    }

    /* Le quattro bande di inabilità temporanea in fila, come le scalano
       le relazioni medico-legali: 100/75/50/25. */
    &.form__grid--4 {
      grid-template-columns: repeat(4, 1fr);
    }

    @media (max-width: 39rem) {
      &.form__grid--2,
      &.form__grid--3,
      &.form__grid--4 {
        grid-template-columns: 1fr;
      }
    }
  }

  /* Colonne del form Subject (assistito/controparte, vedi .form--wide in
     modal.css): pannelli lunghi affiancati invece che impilati, per
     sfruttare la larghezza extra del modale su schermi desktop. */
  .form__columns {
    display: grid;
    gap: var(--space-5);
    align-items: start;

    @media (min-width: 56rem) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .form__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block-start: var(--space-2);
  }

  /* Autocomplete combobox */
  .combobox__results {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: 10;
    margin-block-start: var(--space-1);
    /* surface-alt, non canvas: canvas è lo sfondo di pagina stesso (identico
       in dark mode, #1a1c22) — il dropdown vi si mimetizzava del tutto. */
    background-color: var(--color-surface-alt);
    border: var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-block-size: 15rem;
    overflow-y: auto;
    list-style: none;
    padding: var(--space-1);
  }

  /* Stile "autocomplete" (vedi tailwindcss.com/plus/ui-blocks — pannello
     con opzioni arrotondate, evidenziazione piena in tinta primaria
     all'hover/selezione invece di un semplice sfondo neutro). */
  .combobox__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s ease, color 0.1s ease;

    &:hover,
    &.combobox__option--active {
      background-color: var(--color-primary);
      color: var(--color-primary-text);
    }
  }

  /* Un contatto "di fiducia" lo è già prima di aprirlo: un pallino pieno
     invece di anteporre un'emoji ★ testuale al nome (vedi
     combobox_controller.js#_renderResults). */
  .combobox__option-dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-positive);
    flex-shrink: 0;
  }
  .combobox__option-detail {
    margin-inline-start: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  /* Riga non interattiva mostrata quando la ricerca non trova nulla —
     senza, il pannello si limitava a richiudersi silenziosamente e chi
     cercava un'anagrafica non registrata non aveva alcun riscontro. */
  .combobox__empty {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-ink-subtle);
  }

  /* Icona di ricerca nel campo: stesso trucco della freccia sulle select
     poco sopra, un SVG inline come background-image invece di un elemento
     in più nel markup. Solo sui campi che SONO una ricerca (anagrafica
     professionisti) — i campi di parties/_identity_fields.html.erb
     restano campi anagrafici puri, cercano "dietro le quinte" ma non
     vanno segnalati come ricerca. */
  .combobox__input {
    /* #64748b (slate-500): the previous slate-400 fell below the 3:1
       contrast an interface element needs on a light background. A fixed
       value because a data-URI cannot reference a custom property; it is
       the hex of --color-border-input, the same in both themes. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.6rem center;
    background-size: 1rem;
    padding-inline-start: 2.1rem;
    /* Spazio per .combobox__toggle, che si sovrappone qui come farebbe la
       freccia nativa di una <select> — vedi sotto. */
    padding-inline-end: 1.75rem;
  }

  /* Bottone per aprire l'elenco completo senza dover digitare — vedi
     combobox_controller.js#toggle. A differenza della freccia della
     select (solo decorativa, un background-image) qui serve un elemento
     vero e cliccabile, quindi un <button>, non un altro trucco CSS. */
  .combobox__toggle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    /* ink-subtle come base (non ink-faint, troppo tenue per un controllo
       cliccabile — stesso motivo della correzione sull'icona di ricerca
       qui sopra), ink-muted all'hover: più scuro in chiaro, più chiaro in
       scuro, la direzione giusta in entrambi i temi per segnalare
       l'interazione senza invertire la scala. */
    color: var(--color-ink-subtle);
    transition: color var(--transition-fast);

    &:hover {
      color: var(--color-ink-muted);
    }

    .icon {
      inline-size: 1rem;
      block-size: 1rem;
      transition: transform var(--transition-base);
    }

    &[aria-expanded="true"] .icon {
      transform: rotate(180deg);
    }
  }

  /* Fieldset */
  .fieldset {
    border: var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .fieldset__legend {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-muted);
    padding-inline: var(--space-1);
  }

  /* Form field row */
  .form__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .form__row label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-ink-muted);
  }

  .form__input {
    inline-size: 100%;
    padding: var(--control-pad-y) var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-ink);
    background-color: var(--color-canvas);
    border: var(--border-input);
    border-radius: var(--radius);
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);
    appearance: none;

    &::placeholder {
      color: var(--color-ink-subtle);
    }

    &:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
    }

    &:disabled {
      background-color: var(--color-surface-alt);
      color: var(--color-ink-subtle);
      cursor: not-allowed;
    }
  }

  .form__textarea {
    inline-size: 100%;
    padding: var(--control-pad-y) var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-ink);
    background-color: var(--color-canvas);
    border: var(--border-input);
    border-radius: var(--radius);
    font-family: inherit;
    resize: vertical;
    min-block-size: 6rem;

    &:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
    }
  }

  .checkbox {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    cursor: pointer;
    accent-color: var(--color-primary);
  }

  .form__fieldset {
    border: var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .form__legend {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-muted);
    padding-inline: var(--space-1);
  }
}