/* Le caselle di PROD.

   Una casella di spunta e un pallino di scelta, lasciati nudi, li disegna il
   browser: un quadrato con lo spigolo vivo e la tavolozza del sistema
   operativo, in mezzo a una schermata dove tutto il resto e' arrotondato. E'
   il contorno squadrato che si vede nei filtri, nei kit, nel calendario.

   Il vestito sta qui e in nessun altro posto, e non chiede niente a chi scrive
   il markup: resta un <input type="checkbox"> vero, quindi .checked, l'evento
   di cambio, l'invio del modulo e i campi obbligatori continuano a funzionare
   come prima.

   Scritto con :where() apposta: pesa zero, quindi le caselle che si erano gia'
   vestite da sole continuano a vincere senza che nessuno le tocchi. La stessa
   regola scritta senza :where() peserebbe piu' di una classe e le
   scavalcherebbe tutte.

   L'interruttore delle Impostazioni e' escluso a mano perche' non e' una
   casella: e' una pastiglia che scorre, e il suo pallino vive nello stesso
   pseudo-elemento che qui porta la spunta.

   Il bordo della casella e la spunta NON usano `border`. Tailwind, caricato
   dal CDN, inietta a pagina avviata — dopo tutti i fogli di PROD — una regola
   universale `*, ::after, ::before { border-width: 0 }` che pesa zero come
   queste e vince per ordine: con `border` la casella era un quadrato senza
   contorno e la spunta non si vedeva, e il 12 settembre 2026 le caselle
   dell'albero degli allegati sembravano non esserci. Il bordo e' un
   box-shadow interno, la spunta una forma ritagliata: proprieta' che quella
   regola non tocca, e la specificita' resta zero. */

:where(input[type="checkbox"]:not(.imp-sw), input[type="radio"]) {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    flex: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--panel-border-mid);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

:where(input[type="radio"]) {
    border-radius: 50%;
}

:where(input[type="checkbox"]:not(.imp-sw), input[type="radio"])::after {
    content: '';
    opacity: 0;
}

:where(input[type="checkbox"]:not(.imp-sw))::after {
    width: 10px;
    height: 10px;
    background: var(--accent-contrast);
    clip-path: polygon(14% 46%, 0 62%, 40% 100%, 100% 22%, 84% 8%, 40% 70%);
}

:where(input[type="radio"])::after {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-contrast);
}

:where(input[type="checkbox"]:not(.imp-sw), input[type="radio"]):checked {
    background: var(--accent);
    box-shadow: inset 0 0 0 1.5px var(--accent);
}

:where(input[type="checkbox"]:not(.imp-sw), input[type="radio"]):checked::after {
    opacity: 1;
}

/* La casella a meta': tutte spuntate tranne qualcuna. Una barretta, non una
   spunta, perche' non dice "si'" ma "in parte". */
:where(input[type="checkbox"]:not(.imp-sw)):indeterminate {
    background: var(--accent);
    box-shadow: inset 0 0 0 1.5px var(--accent);
}

:where(input[type="checkbox"]:not(.imp-sw)):indeterminate::after {
    opacity: 1;
    width: 9px;
    height: 2px;
    clip-path: none;
}

:where(input[type="checkbox"]:not(.imp-sw), input[type="radio"]):focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1.5px var(--panel-border-mid), var(--focus-ring);
}

:where(input[type="checkbox"]:not(.imp-sw), input[type="radio"]):checked:focus-visible {
    box-shadow: inset 0 0 0 1.5px var(--accent), var(--focus-ring);
}

:where(input[type="checkbox"]:not(.imp-sw), input[type="radio"]):disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Le due frecce del campo numerico sono l'unica cosa del browser che si vede
   in un campo numerico, e non servono a nessuno: chi inserisce una quantita' o
   un importo lo scrive. Il campo resta quello di sistema, ed e' voluto: su
   centoquarantaquattro campi, centotrentadue hanno un minimo e un massimo che
   il browser fa rispettare da solo, e riscriverli a mano vorrebbe dire
   riscrivere centoquarantaquattro controlli su quantita' e prezzi. */
:where(input[type="number"])::-webkit-inner-spin-button,
:where(input[type="number"])::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

:where(input[type="number"]) {
    -moz-appearance: textfield;
}

/* Il bottone "Scegli file" e' un bottone di sistema: dove il campo non e' gia'
   nascosto dietro un bottone di PROD, almeno si veste. */
:where(input[type="file"])::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: 1px solid var(--panel-border-mid);
    border-radius: 8px;
    background: var(--card-surface);
    color: var(--text-strong);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

:where(input[type="file"])::file-selector-button:hover {
    background: var(--surface-hover-soft);
    border-color: var(--accent);
}

/* Un campo di testo attivo mostra il bordo color accento, e basta.

   Il contorno di sistema (`:focus-visible` in style-core.css, 2px squadrati)
   sui campi di testo scatta anche col mouse, non solo con la tastiera: senza
   questa regola un campo che non si e' vestito da solo — la ricerca dei
   quaderni, la riga «aggiungi» del calendario — lo mostrava. Pesa zero come
   il resto del file, quindi ogni campo che ha gia' il proprio focus (bordo,
   anello morbido, niente) continua a vincere; batte il contorno di sistema
   solo perche' questo foglio viene dopo la catena dei sei. Caselle, pallini e
   file hanno il loro vestito qui sopra; il numero e' un campo di testo. Gli
   input che sono bottoni (submit, button, reset, image) restano fuori: a
   loro il contorno di tastiera serve, e non hanno un bordo da colorare. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]), textarea):focus-visible {
    outline: none;
    border-color: var(--accent);
}