/* api.css — la guida all'API.
 *
 * ⚠️ Un foglio suo e non righe aggiunte ad `app.css`: `app.css` lo scarica ogni
 * visitatore della vetrina, e la guida la apre chi sviluppa. Sono 3 KB che non ha
 * senso far pagare a tutti.
 */

.guida { max-width: 900px; }
.guida__intro { font-size: 18px; line-height: 1.6; color: #3a3438; }

.guida h1 { font-family: Poppins, system-ui, sans-serif; }
.guida h2 {
    font-family: Poppins, system-ui, sans-serif;
    margin-top: 8px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0ecec;
}
.guida h3 { font-family: Poppins, system-ui, sans-serif; font-size: 17px; margin: 26px 0 8px; }

/* ⚠️ `overflow-x: auto` sul blocco di codice e non `white-space: pre-wrap`: una riga
 * di `curl` spezzata a metà non si può copiare e incollare, ed è l'unica cosa che si
 * fa con un blocco di codice in una guida. */
.guida pre {
    background: #16151c;
    color: #e8e6ef;
    padding: 16px 18px;
    border-radius: 10px;
    overflow-x: auto;
    font-size: 13.5px;
    line-height: 1.65;
}
.guida pre code { background: none; color: inherit; padding: 0; }
.guida code {
    background: #f4f1f1;
    border: 1px solid #e6e1e1;
    border-radius: 5px;
    padding: 1px 5px;
    font-size: .92em;
}

.nota {
    background: #f7f5f5;
    border-left: 3px solid #cfc8c8;
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    font-size: 15px;
}
.nota--attenzione { background: #fdecec; border-left-color: #cc262a; }

.passi { line-height: 1.9; }

/* ⚠️ La tabella scorre nel PROPRIO contenitore: con otto opzioni su una riga, su
 * telefono sfonderebbe la pagina e tutto il documento scorrerebbe di lato. */
.tabella-guida { overflow-x: auto; margin: 18px 0; }
.tabella-guida table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.tabella-guida th, .tabella-guida td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #ece8e8;
    vertical-align: top;
}
.tabella-guida th { background: #f7f5f5; font-family: Poppins, system-ui, sans-serif; font-size: 13px; }
.tabella-guida td:first-child { white-space: nowrap; }

.elenco-errori { line-height: 1.9; }
/* ⚠️ `scroll-margin-top`: gli indirizzi `/errori/<codice>` arrivano qui con
 * un'ancora, e senza questo la riga puntata finisce incollata al bordo dello
 * schermo — chi arriva da un messaggio d'errore non capisce quale riga guardare. */
.elenco-errori code[id] { scroll-margin-top: 90px; }
.elenco-errori code[id]:target {
    background: #fdecec;
    border-color: #cc262a;
    font-weight: 700;
}

/* Riga di intestazione dentro la tabella delle operazioni.
 * ⚠️ Serve a separare le operazioni che agiscono SUL documento da quelle che
 * agiscono DENTRO: sono ventuno, e un elenco piatto di ventuno righe si legge
 * come un muro. Non è decorazione — è l'unica cosa che dice al lettore che le
 * ultime otto rispondono a una domanda diversa. */
.tabella-op td.gruppo,
table td.gruppo {
    padding-top: 1.4rem;
    border-bottom: 2px solid var(--bordo, #ddd);
    font-size: .95rem;
    letter-spacing: .02em;
    color: var(--principale, #cc262a);
}