/* ============================================================================
   Documentazione tecnica di MEMO
   I colori e i caratteri sono quelli del sito — blu d'inchiostro, ruggine,
   salmone, Mulish — ma la pagina è un manuale di riferimento, non una pagina di
   racconto: misura corta per la prosa, indice sempre a portata, e il monospazio
   dovunque compaia qualcosa che si scrive in una richiesta o si legge in una
   risposta. Il monospazio è quello di sistema: è il carattere del terminale,
   cioè del posto da cui questa API viene chiamata, e non costa un download.
   ============================================================================ */

/* La pastiglia del <code> in mezzo alla prosa: rende al 90% del testo che la circonda
   (22,5px dentro una riga da 25), che è la misura giusta per un pezzo di codice citato in
   una frase. Dentro un blocco di esempio non vale — vedi .doc-figure pre code più sotto.

   Il `monospace, monospace` che stava qui era il vecchio trucco per non farsi rimpicciolire
   il monospazio dal browser; il foglio ha già il suo elenco in --doc-mono, e i due valori
   scritti in due posti prima o poi divergono. Ogni <code> di questa pagina sta dentro .doc,
   quindi il token si eredita.

   Il selettore era `code, .code`: la classe non esiste in nessun template — la pagina usa
   solo il tag — e le uniche cose che le somigliavano erano icone Bootstrap (`bi-qr-code`,
   `bi-code-slash`), che sono un altro token e non l'hanno mai attivata. */
code {
    padding: 2px 4px;
    font-size: 90%;
    color: var(--doc-accent);
    background-color: var(--doc-code-bg);
    border-radius: 4px;
    font-family: var(--doc-mono);
}

/* ---- impianto ------------------------------------------------------------- */

/* Una colonna sola. Lo stacco dal menu del sito lo davano, sulle altre pagine di MEMO, i
   450px di fotografia della testata: qui non c'è una fotografia — è un manuale — e lo
   spazio va messo a mano, o il titolo nasce appiccicato alla barra blu. */
.doc {
    --doc-ink: var(--memo-body-text);
    --doc-muted: var(--memo-body-muted-text);
    --doc-rule: var(--memo-border-color);
    --doc-rule-strong: rgba(36, 58, 98, 0.28);
    --doc-accent: var(--memo-color-rust);
    --doc-tint: var(--memo-color-light-salmon);
    --doc-surface: var(--memo-color-very-light-gray);
    --doc-code-bg: #f9f2f4;
    --doc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --doc-measure: 68ch;

    color: var(--doc-ink);
    padding-top: 2.5rem;
}

/* Col tema scuro questa pagina era illeggibile, ed è il difetto peggiore di questo foglio:
   --doc-ink discendeva da --memo-color-dark-blue, che è un colore della tavolozza e NON un
   ruolo — nessun tema scuro lo ribalta (lo cambia solo il daltonico) — quindi titolo,
   occhiello, sommario e descrizioni dei campi uscivano blu scuro su quasi nero: 1,58:1,
   misurato nel browser. Adesso --doc-ink è l'inchiostro del corpo, che si ribalta da sé nei
   tre temi; qui restano i quattro token che discendono da colori CHIARI, e che senza una
   versione notturna sarebbero altrettante lastre di luce — le pastiglie del codice, il
   riquadro dell'indirizzo da chiamare, i blocchi di esempio e il filetto forte.
   L'accento passa al salmone e non al ruggine chiaro: il ruggine chiaro è calibrato per
   stare sul FONDO della pagina (4,74:1) e qui finisce anche dentro le campiture tenui, dove
   scenderebbe a 4,4; il salmone ne fa 11 sull'una e sull'altro. */
:root[data-theme="dark"] .doc {
    --doc-rule-strong: rgba(148, 163, 184, 0.5);
    --doc-accent: var(--memo-color-salmon);
    --doc-tint: var(--memo-band-warm-soft);
    --doc-surface: var(--memo-band-neutral);
    --doc-code-bg: var(--memo-band-warm-soft);
}

.doc-body {
    min-width: 0;
}

/* La misura corta vale per la prosa, che si legge riga per riga. Tabelle e blocchi di
   codice prendono tutta la larghezza: quelli si scorrono. */
.doc-body>* {
    max-width: var(--doc-measure);
}

.doc-body>.field-table,
.doc-body>.doc-figure,
.doc-body>.doc-endpoint {
    max-width: none;
}

/* ---- testata -------------------------------------------------------------- */

.doc-eyebrow {
    margin: 0 0 0.35rem;
    font-family: var(--doc-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--doc-muted);
}

/* Il margine superiore dei titoli di MEMO (--memo-title-mt: 2em) serve dove un h1 apre
   una sezione dopo del testo: qui l'h1 viene subito dopo il suo occhiello, e quel margine
   apriva un buco di centotrenta pixel in mezzo alle due righe che vanno lette insieme. */
.doc h1 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem);
    letter-spacing: -0.02em;
}

.doc-lede {
    font-size: 1.125rem;
    line-height: 1.6;
}

/* L'a capo dell'incisione dentro la stringa: è il dettaglio che spiega text_list
   meglio di un paragrafo, e va visto. */
.doc-esc {
    padding: 0 0.2em;
    background-color: var(--doc-tint);
    color: var(--doc-accent);
    font-weight: 700;
}

/* ---- sezioni -------------------------------------------------------------- */

.doc-section {
    margin-top: 3.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--doc-rule);
}

.doc-section>h2 {
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

/* ---- l'indirizzo da chiamare ---------------------------------------------- */

.doc-endpoint {
    display: block;
    margin: 1.25rem 0 1.75rem;
    padding: 1.1rem 1.25rem;
    background-color: var(--doc-tint);
    border-left: 4px solid var(--doc-accent);
    font-family: var(--doc-mono);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--doc-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.doc-endpoint:hover,
.doc-endpoint:focus-visible {
    color: var(--doc-accent);
}

.doc-endpoint small {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--memo-body-font-family);
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--doc-muted);
}

/* ---- esempi di codice ----------------------------------------------------- */

.doc-figure {
    margin: 1.25rem 0 1.75rem;
}

.doc-figure pre {
    margin: 0;
    padding: 1.1rem 1.25rem;
    background-color: var(--doc-surface);
    border: 1px solid var(--doc-rule);
    font-family: var(--doc-mono);
    font-size: 0.9375rem;
    line-height: 1.7;
    overflow-x: auto;
}

/* Dentro un esempio la campitura è del <pre>: il <code> che lo avvolge è un elemento IN
   LINEA, e un fondo su venti righe non è un rettangolo — il browser lo dipinge riga per
   riga, e ne esce una scaletta frastagliata larga quanto ogni riga di codice. Non si vedeva
   perché il rosa della pastiglia e il grigio del riquadro erano quasi lo stesso colore; col
   tema scuro, dove sono due tinte distinte, salta agli occhi. La pastiglia serve al <code>
   in mezzo alla prosa, non a quello che è già dentro un riquadro suo.

   Il `font-size` NON sta qui, ed è voluto: il 90% della pastiglia non si compone con lo
   0.9375rem del <pre>, perché Bootstrap dichiara `pre code { font-size: inherit }`, che vale
   0,0,2 contro lo 0,0,1 del nostro `code`. Misurato: <pre> e <code> rendono tutt'e due
   18,75px. Riscriverlo qui sarebbe una riga che non cambia niente. */
.doc-figure pre code {
    padding: 0;
    background-color: transparent;
    color: inherit;
}

.doc-figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--doc-muted);
}

/* ---- tabelle dei campi ---------------------------------------------------- */

/* Non usano .table di Bootstrap: qui serve un registro, righe fitte e una prima
   colonna che si legge come un indice. Stavano a font-size: 65% scritto in linea
   (dieci pixel) ed erano il contenuto principale della pagina. */
.field-table {
    width: 100%;
    margin-bottom: 2rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.field-table caption {
    caption-side: top;
    padding: 0 0 0.6rem;
    font-family: var(--doc-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--doc-muted);
    text-align: left;
}

.field-table thead th {
    padding: 0.35rem 0.75rem 0.35rem 0;
    border-bottom: 2px solid var(--doc-rule-strong);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--doc-muted);
    text-align: left;
    vertical-align: bottom;
}

.field-table tbody th,
.field-table tbody td {
    padding: 0.7rem 0.75rem 0.7rem 0;
    border-bottom: 1px solid var(--doc-rule);
    vertical-align: top;
    text-align: left;
    font-weight: 400;
}

.field-table tbody tr:hover {
    background-color: var(--doc-tint);
}

.field-table tbody tr:target {
    background-color: var(--doc-tint);
    box-shadow: inset 3px 0 0 var(--doc-accent);
}

/* La chiave: monospazio, e collegata a sé stessa — una riga di questa tabella è
   un indirizzo che si può mandare a qualcuno («guarda il campo text_list»). */
.field-key {
    width: 1%;
    white-space: nowrap;
}

.field-key a {
    font-family: var(--doc-mono);
    font-weight: 700;
    color: var(--doc-ink);
    text-decoration: none;
    border-bottom: 1px dotted var(--doc-rule-strong);
}

.field-key a:hover,
.field-key a:focus-visible {
    color: var(--doc-accent);
    border-bottom-color: var(--doc-accent);
}

.field-key a+a {
    margin-left: 0.35rem;
}

.field-type {
    width: 1%;
    white-space: nowrap;
    font-family: var(--doc-mono);
    font-size: 0.8125rem;
    color: var(--doc-muted);
}

.field-example {
    font-family: var(--doc-mono);
    font-size: 0.8125rem;
    color: var(--doc-muted);
    overflow-wrap: anywhere;
}

/* Sotto una certa larghezza una tabella a quattro colonne non ci sta: diventa un
   elenco di schede, una per campo, con l'intestazione ripetuta da `data-label`. */
@media (max-width: 47.98rem) {

    .field-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .field-table tbody tr {
        display: block;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--doc-rule);
    }

    .field-table tbody th,
    .field-table tbody td {
        display: block;
        width: auto;
        padding: 0.15rem 0;
        border: 0;
        white-space: normal;
    }

    .field-table tbody td[data-label]::before {
        content: attr(data-label) " ";
        font-family: var(--doc-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--doc-muted);
    }
}