/* ============================================================================
   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.
   ============================================================================ */

code,
.code {
    padding: 2px 4px;
    font-size: 90%;
    color: var(--memo-color-rust);
    background-color: #f9f2f4;
    border-radius: 4px;
    font-family: monospace, monospace;
}

.doc {
    --doc-ink: var(--memo-color-dark-blue);
    --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-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --doc-measure: 68ch;

    color: var(--doc-ink);
}

/* ---- 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 {
    padding-top: 2.5rem;
}

.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;
}

.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);
    }
}