/* ============================================================
   Regole — il regolamento in prosa e in campi
   ============================================================
   Un regolamento si legge, non si consulta: il testo viene prima, le
   tabelle dopo, e i campi di modifica solo quando servono davvero.
   Percio' la colonna del testo ha una larghezza da lettura, non da
   cruscotto: oltre i settanta caratteri l'occhio perde la riga.
   ============================================================ */

.rg-panel .fw-panel-head { align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.rg-panel .fw-panel-head .btn { margin-left: auto; }

/* Il testo vuole una colonna da lettura, non da cruscotto: oltre i sessanta
   caratteri l'occhio perde la riga. Su schermo largo pero' una colonna sola
   lascia meta' pagina vuota, quindi le sezioni si affiancano a due a due. */
.rg-prosa { display: flex; flex-direction: column; gap: var(--sp-5); }

@media (min-width: 1100px) {
    .rg-prosa {
        align-items: start;
        column-gap: var(--sp-7);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.rg-blocco { max-width: 62ch; }

/* Una frase di servizio resta una frase: il maiuscoletto di .fw-micro e'
   per le etichette, non per il testo corrente. */
.rg-nota {
    color: var(--ink-3);
    display: block;
    font-size: var(--fs-sm);
    margin-top: var(--sp-2);
}

.rg-blocco h3 {
    border-bottom: 2px solid var(--line-strong);
    font-size: var(--fs-md);
    margin: 0 0 var(--sp-2);
    padding-bottom: var(--sp-1);
}

.rg-blocco p { color: var(--ink-2); line-height: var(--lh-base); margin: 0 0 var(--sp-3); }
.rg-blocco strong { color: var(--ink-1); }
.rg-blocco .fw-micro { color: var(--ink-3); display: block; margin-top: var(--sp-2); }

.rg-tab { margin: 0; width: auto; min-width: min(100%, 320px); }
.rg-tab :is(th, td) { padding: var(--sp-1) var(--sp-3); }
.rg-tab thead th { color: var(--ink-3); font-size: var(--fs-micro); text-transform: uppercase; }

/* ---- Avvisi -----------------------------------------------------------
   Due toni: il grigio-azzurro per "qui manca qualcosa", l'ambra per
   "attenzione, questo puo' averti gia' cambiato dei risultati". */
.rg-avviso {
    background: var(--navy-tint);
    border-radius: var(--r-sm);
    color: var(--navy-ink);
    margin-bottom: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
}

.rg-avviso p { margin: 0 0 var(--sp-2); }
.rg-avviso p:last-of-type { margin-bottom: var(--sp-3); }
.rg-avviso-attenzione { background: var(--caution-tint); color: var(--caution-ink); margin-top: var(--sp-5); }
.rg-avviso ul { margin: 0; padding-left: var(--sp-4); }

/* ---- Storico delle versioni ---- */
.rg-versioni { margin-top: var(--sp-5); }
.rg-versioni summary { color: var(--navy); cursor: pointer; font-size: var(--fs-sm); }
.rg-versioni ul { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.rg-versioni li { border-bottom: 1px solid var(--line); padding: var(--sp-2) 0; }
.rg-versioni .fw-micro { color: var(--ink-3); margin-left: var(--sp-2); }

/* ---- Il modulo di modifica -------------------------------------------- */
.rg-form { display: flex; flex-direction: column; gap: var(--sp-5); }

.rg-campo {
    align-items: center;
    display: flex;
    gap: var(--sp-3);
    justify-content: space-between;
    margin-bottom: var(--sp-2);
    max-width: 46ch;
}

.rg-campo > span { color: var(--ink-2); font-size: var(--fs-sm); }
.rg-campo :is(input, select, textarea) {
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xs);
    color: var(--ink-1);
    font: inherit;
    padding: var(--sp-1) var(--sp-2);
    width: 10rem;
}

.rg-campo-largo { align-items: flex-start; flex-direction: column; gap: var(--sp-1); max-width: 62ch; }
.rg-campo-largo :is(input, textarea) { width: 100%; }
.rg-campo-check { justify-content: flex-start; }
.rg-campo-check input { width: auto; }

/* ---- I criteri di spareggio, in ordine ---- */
.rg-criteri { list-style: none; margin: 0 0 var(--sp-3); max-width: 46ch; padding: 0; }

.rg-criteri li {
    align-items: center;
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
    padding: var(--sp-1) var(--sp-2);
}

.rg-criterio-pos {
    background: var(--navy);
    border-radius: var(--r-full);
    color: var(--ink-inverse);
    font-size: var(--fs-micro);
    font-weight: 700;
    height: 20px;
    line-height: 20px;
    text-align: center;
    width: 20px;
}

.rg-criterio-nome { flex: 1; }
.rg-criterio-bottoni { display: flex; gap: var(--sp-1); }
.rg-criterio-bottoni .btn { line-height: 1; padding: 0 var(--sp-2); }

.rg-azioni { display: flex; gap: var(--sp-2); }

/* ---- La verifica ------------------------------------------------------ */
.rg-verifica { margin-top: var(--sp-4); }

.rg-verifica-esito {
    align-items: center;
    border-radius: var(--r-sm);
    display: flex;
    font-weight: 600;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3);
}

.rg-verifica-esito.rg-ok { background: var(--positive-tint); color: var(--positive-ink); }
.rg-verifica-esito.rg-ko { background: var(--caution-tint); color: var(--caution-ink); }

.rg-tab-verifica { width: 100%; }
.rg-tab-verifica :is(th, td) { padding: var(--sp-1) var(--sp-2); white-space: nowrap; }
.rg-tab-verifica thead th { color: var(--ink-3); font-size: var(--fs-micro); }
.rg-riga-ko { background: var(--caution-tint); }
.rg-scarto { color: var(--negative-ink); font-weight: 700; }
.rg-loro { color: var(--ink-3); font-size: var(--fs-micro); }

.rg-osservati { margin-top: var(--sp-4); }
.rg-osservati summary { color: var(--navy); cursor: pointer; font-size: var(--fs-sm); }
.rg-osservati p { color: var(--ink-3); margin: var(--sp-2) 0 var(--sp-1); }

.rg-fasce { margin-top: var(--sp-5); max-width: 62ch; }
.rg-fasce h3 { color: var(--ink-3); margin: 0 0 var(--sp-1); }
.rg-fasce p { color: var(--ink-3); margin: 0 0 var(--sp-2); }
.rg-intervalli { margin: 0 0 var(--sp-3); padding-left: var(--sp-4); }
.rg-ambiguo { background: var(--bg-sunken); border-radius: var(--r-xs); padding: var(--sp-2); }

.rg-proposte { list-style: none; margin: 0; padding: 0; }

.rg-proposte li {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
}

.rg-proposte .btn { margin-left: auto; }

@media (max-width: 767px) {
    .rg-campo { max-width: none; }
    .rg-campo :is(input, select) { width: 7rem; }
}