/* -----------------------------------------------------------------------------
   SpesAPP — foglio di stile.

   L'aria e' quella della carta termica: fondo caldo, inchiostro nero un po'
   sbiadito, monospaziato per tutto cio' che sullo scontrino sarebbe stampato.
   Il verde e il rosso compaiono solo dove hanno un significato — buono, da
   evitare — e mai come decorazione, altrimenti smettono di voler dire qualcosa.

   Tema chiaro dichiarato, non ereditato: e' un foglio di carta, e la carta e'
   bianca anche di notte.
----------------------------------------------------------------------------- */

:root {
    --carta:       #F6F2E9;
    --carta-alta:  #FFFDF7;
    --carta-scura: #EAE4D6;
    --inchiostro:  #1E1B16;
    --tenue:       #6B6357;
    --bordo:       #D6CDBA;

    --buono:       #2E7D32;
    --buono-vivo:  #3D9B42;
    --evita:       #C62828;

    --larghezza: 1000px;
    --stretta: 680px;
    --passo: clamp(1rem, 2.2vw, 1.6rem);

    --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, "Courier New", monospace;

    color-scheme: light;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--carta);
    color: var(--inchiostro);
    font: 16px/1.7 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, .mono { font-family: var(--mono); font-weight: 700; }
h2 { font-size: clamp(1.3rem, 3.4vw, 1.9rem); margin: 0 0 1.2rem; letter-spacing: -.01em; }
h3 { font-size: 1.02rem; margin: 0 0 .5rem; }

a { color: var(--buono); text-underline-offset: .18em; }
a:hover { color: var(--buono-vivo); }

p { margin: 0 0 1rem; }
strong { font-weight: 700; }
code { font-family: var(--mono); font-size: .92em; background: var(--carta-scura); padding: .1em .35em; border-radius: 3px; }

.dentro {
    max-width: var(--larghezza);
    margin: 0 auto;
    padding: 0 var(--passo);
}

.dentro.stretto { max-width: var(--stretta); }

section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
section.alternata { background: var(--carta-alta); border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); }

/* --------------------------------------------------------------- intestazione */

header {
    /* La dentellatura in alto e' quella dello scontrino strappato: due gradienti
       che si incastrano, nessuna immagine da scaricare. */
    background:
        repeating-linear-gradient(90deg, var(--carta-alta) 0 10px, transparent 10px 20px) 0 100% / 100% 8px no-repeat,
        var(--carta-alta);
    border-bottom: 1px solid var(--bordo);
    padding: clamp(2.8rem, 8vw, 5rem) 0 clamp(2.4rem, 6vw, 4rem);
    text-align: center;
}

h1 {
    margin: 0;
    font-size: clamp(1.8rem, 7vw, 3.2rem);
    letter-spacing: .12em;
    color: var(--inchiostro);
}

.sottotitolo {
    margin: 1.1rem auto 0;
    max-width: 32rem;
    font-size: clamp(1.05rem, 2.6vw, 1.28rem);
    line-height: 1.5;
}

.minuta {
    margin-top: .8rem;
    color: var(--tenue);
    font-size: .88rem;
}

/* -------------------------------------------------------------------- pulsanti */

.bottone {
    display: inline-block;
    margin: 1.4rem .35rem 0;
    padding: .78rem 1.4rem;
    border: 1px solid var(--inchiostro);
    border-radius: 2px;
    background: transparent;
    color: var(--inchiostro);
    font: 700 .95rem/1 var(--mono);
    text-decoration: none;
    cursor: pointer;
}

.bottone:hover { background: var(--carta-scura); color: var(--inchiostro); }

.bottone.primario {
    background: var(--buono);
    border-color: var(--buono);
    color: #fff;
}

.bottone.primario:hover { background: var(--buono-vivo); border-color: var(--buono-vivo); color: #fff; }

/* Un pulsante che non porta da nessuna parte e' peggio di un pulsante assente. */
.bottone[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* --------------------------------------------------------------------- griglia */

.griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.scheda {
    background: var(--carta-alta);
    border: 1px solid var(--bordo);
    border-radius: 3px;
    padding: 1.2rem;
}

section.alternata .scheda { background: var(--carta); }
.scheda p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- scontrino */

.scontrino {
    max-width: 26rem;
    margin: 2.2rem auto 0;
    padding: 1.4rem 1.6rem 1.2rem;
    background: var(--carta-alta);
    border: 1px solid var(--bordo);
    /* Lo strappo in basso: stessa dentellatura dell'intestazione, capovolta. */
    box-shadow: 0 1px 0 var(--bordo);
    font-family: var(--mono);
    font-size: .86rem;
}

.scontrino .testata {
    margin: 0 0 .9rem;
    padding-bottom: .6rem;
    border-bottom: 1px dashed var(--bordo);
    text-align: center;
    font-weight: 700;
    letter-spacing: .06em;
}

.scontrino .riga {
    display: grid;
    grid-template-columns: 1fr auto 3.4rem;
    gap: .5rem;
    align-items: baseline;
    margin: 0 0 .45rem;
}

.scontrino .prezzo { text-align: right; }

.scontrino .segno {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .08em .4em;
    border-radius: 2px;
}

.scontrino .segno.si { color: #fff; background: var(--buono); }
.scontrino .segno.no { color: #fff; background: var(--evita); }

.scontrino .totale {
    margin-top: .8rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--bordo);
    font-weight: 700;
}

.scontrino .nota {
    margin: 1rem 0 0;
    padding-top: .8rem;
    border-top: 1px dashed var(--bordo);
    color: var(--evita);
    font-size: .8rem;
    text-align: center;
}

/* ------------------------------------------------------------------- manifesto */

.manifesto {
    margin: 0;
    padding: 0 0 0 1.2rem;
    border-left: 3px solid var(--buono);
    font-size: 1.04rem;
}

.manifesto p:last-child { margin-bottom: 0; }
.manifesto .firma { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px dashed var(--bordo); }

.occhiello {
    font-size: 1.04rem;
    padding: .9rem 1.1rem;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--buono);
    border-radius: 2px;
}

section.alternata .occhiello { background: var(--carta-scura); }

/* ---------------------------------------------------------------------- modulo */

.modulo {
    margin: 1.8rem 0 2.4rem;
    padding: 1.4rem;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 3px;
}

section.alternata .modulo { background: var(--carta-alta); }

.campi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem 1.2rem;
}

.campo { margin: 0; display: flex; flex-direction: column; }
.campo label { font: 700 .82rem/1.4 var(--mono); margin-bottom: .35rem; }
.campo .facolt { font-weight: 400; color: var(--tenue); }

.campo input {
    padding: .6rem .7rem;
    border: 1px solid var(--bordo);
    border-radius: 2px;
    background: var(--carta-alta);
    color: var(--inchiostro);
    font: 1rem/1.4 var(--mono);
}

.campo input:focus-visible { outline: 2px solid var(--buono); outline-offset: 1px; }

.campo .aiuto {
    margin-top: .35rem;
    color: var(--tenue);
    font-size: .8rem;
    line-height: 1.5;
}

.anteprima { margin-top: 1.4rem; }
.anteprima .etichetta { margin: 0 0 .4rem; font: 700 .82rem/1.4 var(--mono); }
.anteprima .oggetto { margin: 0 0 .5rem; font-size: .86rem; color: var(--tenue); }

.anteprima pre {
    margin: 0;
    padding: 1rem 1.1rem;
    max-height: 22rem;
    overflow: auto;
    background: var(--carta-alta);
    border: 1px solid var(--bordo);
    border-radius: 2px;
    font: .84rem/1.65 var(--mono);
    /* La lettera va a capo da sola: una barra di scorrimento orizzontale su
       un testo da leggere e' un testo che non si legge. */
    white-space: pre-wrap;
    word-wrap: break-word;
}

section.alternata .anteprima pre,
section.alternata .campo input { background: var(--carta); }

.azioni { margin: .4rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.azioni .bottone { margin-top: 1.1rem; }

.esito {
    margin: 1.1rem 0 0 .6rem;
    font: .84rem/1 var(--mono);
    color: var(--buono);
}

.esito.errore { color: var(--evita); }

/* ---------------------------------------------------------------------- chiuse */

footer {
    padding: 2.4rem 0 3rem;
    border-top: 1px solid var(--bordo);
    background: var(--carta-alta);
    color: var(--tenue);
    font-size: .9rem;
}

footer p:last-child { margin-bottom: 0; }
footer .minuta { margin-top: .7rem; font-size: .82rem; }

@media (max-width: 30rem) {
    .bottone { display: block; margin-left: 0; margin-right: 0; text-align: center; }
    .azioni { display: block; }
    .esito { display: block; margin-left: 0; }
}