/* ============================================================
   TOPKEBAB — foglio di stile pubblico.

   Il tema vive nei TOKEN, non nei componenti: i colori si
   ridefiniscono una volta sola per tema e tutto il resto pesca
   da lì. Prima ogni componente aveva la sua regola scura scritta
   a mano, e ogni pagina nuova rischiava di dimenticarsene —
   testo scuro su fondo scuro senza che nessuno se ne accorgesse.

   Tre livelli di preferenza, in ordine di forza:
     1. tema di sistema        (@media prefers-color-scheme)
     2. scelta esplicita       (:root[data-theme=...])
   La seconda deve poter vincere sulla prima in entrambi i versi.
   ============================================================ */

/* Carattere display: Anton (Copyright 2020 The Anton Project Authors),
   SIL Open Font License 1.1 — testo completo in assets/fonts/OFL.txt.
   Ospitato qui e non preso da Google: nessuna dipendenza da CDN esterni
   come tutto il resto del progetto, e gli indirizzi IP dei visitatori non
   finiscono a un terzo solo per caricare un carattere.
   Se il file mancasse, la pila ripiega su Impact senza rompere nulla. */
@font-face {
    font-family: "TK Display";
    src: url("/assets/fonts/tk-display.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* --- marchio: costante in ogni tema ---
       Questi tre vanno cambiati INSIEME: sono lo stesso rosso a tre
       intensità. --tk-red-acceso serve dove il fondo è scuro per scelta
       (la fascia del calcolatore), perché lì il rosso pieno sparirebbe;
       non si può ricavare dal primo schiarendolo, perché verrebbe
       slavato invece che acceso. */
    --tk-red: #d81222;
    --tk-red-dark: #a80e1a;
    --tk-red-acceso: #ff6257;
    /* Il fondo tenue del rosso di marchio, per la scelta selezionata
       (`.tk-opzione:has(input:checked)`). **Definito il 5 settembre 2026: era
       usato e non esisteva.** Il rimando c'era da tempo, scritto come
       `var(--tk-red-bg, transparent)`, e il ripiego lo salvava — quindi la
       regola non è mai fallita e nessuno si è accorto che un fondo pensato da
       qualcuno non c'era mai stato. È il motivo per cui un valore di riserva
       che somiglia al risultato voluto è peggio di nessun valore di riserva
       (`docs/15` §2.1).
       Non si riusa `--tk-danger-bg`, che pure è un rosso chiaro: lì vuol dire
       «pericolo», e una scelta selezionata non è un avvertimento. */
    --tk-red-bg: #fbe9ec;
    --tk-white: #ffffff;

    /* **Il rosso di marca nell'intensità che regge sul fondo di questo tema.**
       Sul chiaro è il rosso pieno; sullo scuro il rosso pieno non basta —
       #d81222 su #14100e dà contrasto 3.63, sotto il minimo di 4.5 per il
       testo corrente — e serve --tk-red-acceso, che arriva a 6.43 ed è nato
       proprio per questo.

       Esiste come token suo *(27 agosto 2026)* perché la stessa scelta la
       fanno due cose diverse: i link nel contenuto e il rosso dei grafici
       (`app/Grafico.php`). Erano la stessa coppia di valori scritta due
       volte, cioè la forma in cui su questo progetto le copie divergono: si
       ritocca il rosso dei link e i grafici restano indietro, senza che
       niente si rompa. */
    --tk-red-fondo: var(--tk-red);

    /* Colore dei link dentro il contenuto: la stessa scelta di sopra, con un
       nome che dice a cosa serve. */
    --tk-link: var(--tk-red-fondo);

    /* --- caratteri --- */
    --tk-display: "TK Display", Impact, Haettenschweiler, "Arial Narrow", sans-serif;
    --tk-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --tk-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* --- superfici e testo (tema chiaro) --- */
    --tk-bg: #f2efec;
    --tk-surface: #ffffff;
    --tk-surface-2: #f7f4f1;
    --tk-fg: #191512;
    --tk-fg-mut: #6f655e;
    --tk-black: #191512;
    --tk-gray: #6f655e;
    --tk-gray-light: #f2efec;
    --tk-border: #e3dcd6;
    --tk-border-strong: #cdc3bb;

    /* --- semantica --- */
    --tk-green: #1e7e34;
    --tk-green-bg: #e7f4ea;
    --tk-orange: #a15c00;
    --tk-orange-bg: #fbf1de;
    --tk-danger: #8a1f1f;
    --tk-danger-bg: #fbeae7;

    --tk-up: #1e7e34;
    --tk-up-bg: #e7f4ea;
    --tk-down: #a8442a;
    --tk-down-bg: #fbeae5;
    --tk-wait: #8a6412;
    --tk-wait-bg: #fbf2dd;

    --tk-radius: 10px;

    /* Larghezza della colonna del sito. Sta qui perché la usano in tre:
       intestazione, contenuto largo e piè di pagina. Cambiandola in un
       punto solo, quei tre restano allineati fra loro — che è esattamente
       ciò che prima non succedeva. */
    --tk-larghezza: 1100px;
    --tk-larghezza-stretta: 560px;

    /* Quanto può allargarsi la colonna di contenuto dei **pannelli** (admin e
       partner). *(19 agosto 2026)*

       **Prima erano due numeri scritti a mano e diversi** — 960px nell'admin,
       1000px nel partner — per la stessa identica cosa, e nessuno aveva
       deciso che dovessero differire di quaranta pixel.

       **Perché così alto.** Rilevato dall'utente: su uno schermo largo il
       contenuto si fermava a 960px lasciando una fascia vuota a destra,
       mentre a sinistra il menù stava attaccato. Con `flex: 1` e un `padding`
       uguale sui due lati, togliere il tetto basso rende i due margini
       **simmetrici da soli**, senza calcoli.

       **Perché un tetto comunque.** Su un monitor molto largo una tabella
       stirata a 2400px costringe a spostare gli occhi da un capo all'altro
       per leggere una riga sola. 1800px è il punto oltre il quale il guadagno
       si inverte: sotto, si vede più roba; sopra, si legge peggio.

       Non vale per le pagine pubbliche: quelle usano
       `--tk-larghezza-stretta`, che è una **misura di lettura** (560px, circa
       75 caratteri) e allargarla peggiorerebbe proprio ciò per cui esiste. */
    --tk-larghezza-pannello: 1800px;
    --tk-radius-sm: 6px;

    /* Lo stacco fra due blocchi di primo livello: sopra-sotto e destra-sinistra,
       la stessa misura *(18 agosto 2026)*.

       Nasce da tre valori vicini che convivevano senza che nessuno lo sapesse:
       20px nella regola per coppie del pannello partner, 24px nei blocchi
       della sua dashboard, e uno spazio a parte nelle griglie. Nessuno dei tre
       sembrava sbagliato da solo — è così che una discrepanza sopravvive.

       **Un token e non due**, dopo aver valutato di fare il verticale più
       stretto dell'orizzontale: l'asimmetria ha una sua logica (l'ordine di
       lettura separa già le cose in sequenza, mentre due colonne parallele
       senza uno stacco netto si fondono), ma è una regola in più da spiegare e
       da ricordare, e chi tiene all'ordine legge due misure diverse come una
       svista. Se un giorno si vuole riprovare, sdoppiare questo token è una
       riga.

       Adottato nel pannello partner. **Admin e pagine pubbliche usano ancora i
       loro numeri**: vedi `docs/14`. */
    --tk-gap-blocchi: 2rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tk-bg: #14100e;
        --tk-surface: #1c1714;
        --tk-surface-2: #221c19;
        --tk-fg: #f2ece7;
        --tk-fg-mut: #9b9089;
        --tk-black: #f2ece7;
        --tk-gray: #9b9089;
        --tk-gray-light: #221c19;
        --tk-border: #2f2823;
        --tk-border-strong: #453b34;

        --tk-green: #4cc46e;
        --tk-green-bg: #13301f;
        --tk-orange: #d59a2c;
        --tk-orange-bg: #2e2413;
        --tk-danger: #e8836b;
        --tk-danger-bg: #331813;

        --tk-up: #2ea86a;
        --tk-up-bg: #12301f;
        --tk-down: #c4553a;
        --tk-down-bg: #331813;
        --tk-wait: #c8912c;
        --tk-wait-bg: #2e2413;
        --tk-red-bg: #33131a;

        --tk-red-fondo: var(--tk-red-acceso);
        --tk-link: var(--tk-red-fondo);
    }
}

:root[data-theme="dark"] {
    --tk-bg: #14100e;
    --tk-surface: #1c1714;
    --tk-surface-2: #221c19;
    --tk-fg: #f2ece7;
    --tk-fg-mut: #9b9089;
    --tk-black: #f2ece7;
    --tk-gray: #9b9089;
    --tk-gray-light: #221c19;
    --tk-border: #2f2823;
    --tk-border-strong: #453b34;
    --tk-green: #4cc46e;
    --tk-green-bg: #13301f;
    --tk-orange: #d59a2c;
    --tk-orange-bg: #2e2413;
    --tk-danger: #e8836b;
    --tk-danger-bg: #331813;
    --tk-up: #2ea86a;
    --tk-up-bg: #12301f;
    --tk-down: #c4553a;
    --tk-down-bg: #331813;
    --tk-wait: #c8912c;
    --tk-wait-bg: #2e2413;
    --tk-red-bg: #33131a;
    --tk-red-fondo: var(--tk-red-acceso);
    --tk-link: var(--tk-red-fondo);
}

:root[data-theme="light"] {
    --tk-bg: #f2efec;
    --tk-surface: #ffffff;
    --tk-surface-2: #f7f4f1;
    --tk-fg: #191512;
    --tk-fg-mut: #6f655e;
    --tk-black: #191512;
    --tk-gray: #6f655e;
    --tk-gray-light: #f2efec;
    --tk-border: #e3dcd6;
    --tk-border-strong: #cdc3bb;
    --tk-green: #1e7e34;
    --tk-green-bg: #e7f4ea;
    --tk-orange: #a15c00;
    --tk-orange-bg: #fbf1de;
    --tk-danger: #8a1f1f;
    --tk-danger-bg: #fbeae7;
    --tk-up: #1e7e34;
    --tk-up-bg: #e7f4ea;
    --tk-down: #a8442a;
    --tk-down-bg: #fbeae5;
    --tk-wait: #8a6412;
    --tk-wait-bg: #fbf2dd;
    --tk-red-bg: #fbe9ec;
    --tk-red-fondo: var(--tk-red);
    --tk-link: var(--tk-red-fondo);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--tk-body);
    background: var(--tk-bg);
    color: var(--tk-fg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* I link dentro il testo.
   Non esisteva nessuna regola generica: erano colorati solo dentro .tk-nav,
   .tk-footer e .tk-links, e in ogni altro punto restava il blu predefinito
   del browser. Sul chiaro si legge e infatti non se n'era accorto nessuno;
   sul fondo scuro il contrasto è 2.01, meno della metà del minimo. Il tema
   scuro c'era già via prefers-color-scheme, quindi il difetto è vecchio:
   l'interruttore l'ha solo reso facile da incontrare.
   Selettore di elemento nudo, la specificità più bassa che esista: le tre
   regole con la classe continuano a vincere e nessuna barra cambia colore. */
a {
    color: var(--tk-link);
}

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

/* Il rosso resta da bordo a bordo, ma logo e menù si allineano alla stessa
   colonna del contenuto: prima l'intestazione era larga quanto lo schermo
   mentre sotto tutto era limitato a 900px, e su un monitor grande logo e
   menù finivano agli angoli opposti, scollegati dalla pagina.
   Il margine calcolato evita di dover aggiungere un contenitore nel
   markup, che vive in lib/ e si carica a mano. */
.tk-header {
    background: var(--tk-red);
    color: var(--tk-white);
    padding: 1.4rem max(1.5rem, calc((100% - var(--tk-larghezza)) / 2));
    display: flex;
    /* Centrato, non su linea di base: per un'immagine la linea di base è il
       suo bordo inferiore, quindi il menù finiva schiacciato in fondo con
       tutto il vuoto sopra. Con il logo a 40px si notava appena, a 62 no. */
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.tk-logo {
    font-weight: 800;
    /* 35px. L'immagine, se caricata, la segue in proporzione: sono due
       forme dello stesso logo e devono pesare uguale nella banda. */
    font-size: 2.2rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--tk-white);
}

.tk-logo span {
    color: color-mix(in srgb, var(--tk-red) 15%, white);
}

/* max-width oltre all'altezza: su schermi molto stretti l'immagine deve
   poter rimpicciolirsi invece di spingere il menù fuori dalla banda. */
.tk-logo-img {
    display: block;
    height: 50px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.tk-subtitle {
    font-size: 0.9rem;
    opacity: 0.9;
    letter-spacing: 0.02em;
}

/* La navigazione va a fondo riga. Su schermo stretto **non** va più a capo da
   sé: dal 27 agosto 2026 si ripiega in un menù, vedi in fondo a questo
   blocco.

   Il commento che stava qui diceva che un menù a scomparsa «richiederebbe
   JavaScript per una manciata di voci». Non è vero, e nel frattempo l'abbiamo
   dimostrato due volte: il pannello partner e quello admin lo fanno con una
   casella di spunta e il combinatore CSS. */
.tk-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.tk-nav a,
.tk-header > .tk-nav-partner {
    color: var(--tk-white);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}

.tk-nav a:hover,
.tk-header > .tk-nav-partner:hover {
    background: rgba(255, 255, 255, 0.15);
}

.tk-nav a:focus-visible,
.tk-header > .tk-nav-partner:focus-visible {
    outline: 2px solid var(--tk-white);
    outline-offset: 1px;
}

/* L'azione del cliente: piena, è quella che deve saltare all'occhio. */
.tk-nav .tk-nav-forte {
    background: var(--tk-white);
    color: var(--tk-red);
    font-weight: 700;
}

.tk-nav .tk-nav-forte:hover {
    background: color-mix(in srgb, var(--tk-red) 8%, white);
}

/* L'ingresso dei locali: presente ma sommesso, perché parla a un altro
   pubblico e non deve competere con l'azione del cliente.

   Dal 27 agosto 2026 sta **fuori** dal `<nav>`, come figlio diretto della
   barra: è l'unica voce che resta scritta quando il resto si ripiega nel
   menù. Su schermo largo non cambia niente — arriva subito dopo la
   navigazione, cioè dove stava. */
.tk-nav-partner {
    border: 1px solid rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
}

/* ============================================================
   RITIRO O CONSEGNA, E DOVE SEI (home, 27 agosto 2026)
   ============================================================ */

.tk-dove {
    max-width: 30rem;
    margin: 0 auto 0.6rem;
}

/* Le due modalità come pastiglie, non come menù a tendina: sono due, e una
   scelta fra due si mostra, non si apre. Il pallino vero resta sotto — è lui
   che il tabulatore raggiunge e che il modulo invia — e la pastiglia è la sua
   etichetta. */
.tk-modi {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
}

.tk-modo {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    color: var(--tk-white);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.tk-modo input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.tk-modo.is-attivo {
    background: var(--tk-white);
    border-color: var(--tk-white);
    color: var(--tk-red);
}

.tk-modo:focus-within {
    outline: 2px solid var(--tk-white);
    outline-offset: 2px;
}

/* Campo e pulsante in un guscio solo: sono una domanda sola, e due riquadri
   bianchi affiancati si leggevano come due cose da fare. Il tondo rosso dentro
   il bianco è anche l'unico punto della fascia in cui il rosso torna a essere
   un'azione invece che uno sfondo. */
/* Le due strade per dire dove sei: scrivere il CAP, o farlo dire al telefono.
   Pari peso, affiancate finché c'è spazio.

   Il campo prende quello che avanza e il bottone resta della sua misura; sotto
   una certa larghezza vanno una sopra l'altra e **il bottone diventa largo
   quanto la barra**, perché su telefono è la strada migliore — un tocco invece
   di ricordare e digitare un CAP. */
.tk-dove-azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
}

.tk-dove-azioni > .tk-dove-barra {
    /* `min-width: 0` e non `auto`: dentro un flex un campo di testo non scende
       sotto la sua larghezza predefinita, e la riga uscirebbe di lato. */
    flex: 1 1 15rem;
    min-width: 0;
}

/* Contorno bianco su fondo rosso, non pieno: il pieno è del «→», che è
   l'azione a cui si arriva scrivendo. Si riempie al passaggio, così si vede
   che è premibile senza gridare più dell'altro. */
.tk-dove-vicino {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border: 2px solid var(--tk-white);
    border-radius: 999px;
    background: none;
    color: var(--tk-white);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.tk-dove-vicino:hover,
.tk-dove-vicino:focus-visible {
    background: var(--tk-white);
    color: var(--tk-red);
}

@media (max-width: 560px) {
    .tk-dove-vicino {
        flex: 1 1 100%;
    }
}

.tk-dove-barra {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--tk-white);
    border: 2px solid var(--tk-white);
    border-radius: 999px;
    padding: 0.25rem 0.25rem 0.25rem 1rem;
}

.tk-dove-barra:focus-within {
    border-color: #191512;
}

.tk-dove-barra input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    padding: 0.45rem 0;
    font-size: 1rem;
    font-family: inherit;
    color: #191512;
}

.tk-dove-barra input:focus {
    outline: none;
}

.tk-dove-vai {
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 999px;
    background: var(--tk-red);
    color: var(--tk-white);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.tk-dove-vai:hover {
    background: var(--tk-red-dark);
}

/* La riga che dice cosa si sta guardando e come cambiarlo. */
.tk-lista-modo {
    margin: -0.35rem 0 0.9rem;
    font-size: 0.88rem;
    color: var(--tk-fg-mut);
}

.tk-lista-modo a {
    margin-left: 0.4rem;
}

/* «Riordina», per chi ha già ordinato. Un filo di rosso sul fianco perché è
   una scorciatoia personale e non una sezione del sito: si deve distinguere a
   colpo d'occhio dalla classifica che sta subito sotto, senza gridare. */
.tk-riordina {
    border-left: 3px solid var(--tk-red);
}

/* Una colonna sola. `.tk-clas-riga` ne ha tre — numero, testo, punteggio — e
   qui il numero non c'è (non è una classifica, è il tuo ultimo ordine) né il
   punteggio: con la griglia originale il testo finiva nella prima colonna, che
   si stringe sul contenuto, e «ritiro · CHF 15.50» andava a capo tre volte. */
.tk-riordina .tk-clas-riga {
    grid-template-columns: minmax(0, 1fr);
    border-top: 0;
    border-bottom: 0;
    padding-top: 0;
}

/* «Chi si è mosso»: la freccia porta il numero di posti guadagnati, non una
   percentuale. «Terzo, era quinto» si capisce senza spiegazioni. */
.tk-movimento {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0.5rem 0;
    border-top: 1px solid var(--tk-border);
    font-size: 0.95rem;
}

.tk-movimento:first-of-type {
    border-top: 0;
}

.tk-movimento-freccia {
    font-family: var(--tk-mono);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--tk-up);
    white-space: nowrap;
}

.tk-movimento a {
    font-weight: 700;
    text-decoration: none;
    color: var(--tk-fg);
}

.tk-movimento a:hover {
    color: var(--tk-red);
}

/* Il trattino al posto della posizione, quando una classifica non c'è ancora.
   Attenuato di proposito: deve leggersi come «qui non c'è un numero», non come
   un numero strano. */
.tk-clas-pos-vuota {
    color: var(--tk-border-strong);
}

/* ---- il menù a scomparsa della barra pubblica (27 agosto 2026) ----

   Su schermo largo non esistono: la barra è quella di sempre. */
.tk-menu-stato,
.tk-menu-btn,
.tk-logo-marchio {
    display: none;
}

@media (max-width: 720px) {
    /* La barra si dispone con `order`, non riordinando il markup: nel
       documento la casella deve restare **prima** della navigazione perché il
       combinatore guarda in avanti, ma sullo schermo il pulsante va per
       ultimo, dopo la pastiglia dei locali. */
    .tk-header > .tk-nav-partner { order: 2; margin-left: auto; }
    .tk-menu-btn { order: 3; }
    .tk-nav { order: 4; }

    .tk-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.2rem;
        padding: 0.3rem 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 999px;
        color: var(--tk-white);
        font-size: 1.1rem;
        line-height: 1;
        cursor: pointer;
    }

    /* Invisibile ma raggiungibile col tabulatore: con `display: none` il
       menù diventerebbe inaccessibile a chi non usa il dito. */
    .tk-menu-stato {
        display: block;
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        pointer-events: none;
    }

    .tk-menu-stato:focus-visible + .tk-menu-btn {
        outline: 2px solid var(--tk-white);
        outline-offset: 2px;
    }

    .tk-menu-stato:checked + .tk-menu-btn {
        background: rgba(255, 255, 255, 0.18);
    }

    .tk-menu-stato:not(:checked) ~ .tk-nav {
        display: none;
    }

    /* Aperto: una voce per riga sotto la barra, a piena larghezza. */
    .tk-menu-stato:checked ~ .tk-nav {
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        gap: 0;
        padding-top: 0.6rem;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }

    .tk-nav a {
        padding: 0.6rem 0.2rem;
        border-radius: 0;
        font-size: 1rem;
    }

    .tk-nav .tk-nav-forte {
        margin: 0.4rem 0 0;
        border-radius: 999px;
        padding: 0.5rem 0.9rem;
        text-align: center;
    }

    /* Il tema per ultimo: nel documento sta in testa perché lassù apre
       l'elenco invece di chiuderlo, ma dentro il pannello è una preferenza e
       va dove si mettono le preferenze. */
    .tk-nav .tk-tema {
        order: 9;
        align-self: flex-start;
        margin-top: 0.7rem;
    }
}

/* Sotto i 430px il logo esteso e la pastiglia dei locali non stanno sulla
   stessa riga: passa il testimone al marchio quadrato. La soglia è più alta
   di 375 perché il conto va fatto **con** la pastiglia, non col solo logo. */
@media (max-width: 430px) {
    .tk-header > .tk-logo { display: none; }

    .tk-logo-marchio {
        display: block;
        flex: 0 0 auto;
        line-height: 0;
    }

    .tk-logo-marchio img {
        display: block;
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }
}

/* Interruttore chiaro/scuro, condiviso da sito, pannello partner e admin
   (entrambi importano questo foglio).

   Le due icone stanno sempre visibili e il cursore scorre sotto quella
   attiva, che si accende in controluce: si capisce cosa è acceso senza
   leggere niente. Un pallino nudo direbbe solo "c'è un interruttore", non
   quale dei due stati sia in corso.

   Due vesti, perché vive su fondi opposti. Quella base usa i token e serve
   sulle superfici chiare — la barra del pannello partner. La variante
   `tk-tema-su-scuro` è bianca e serve dove i token di sfondo non arrivano:
   l'intestazione rossa del sito e la barra nera dell'admin. */
.tk-tema {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    width: 3.4rem;
    padding: 0.2rem 0.35rem;
    border: 1px solid var(--tk-border-strong);
    border-radius: 999px;
    background: var(--tk-surface-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tk-tema:hover {
    border-color: var(--tk-red);
}

.tk-tema:focus-visible {
    outline: 2px solid var(--tk-red);
    outline-offset: 2px;
}

.tk-tema .tk-tema-cursore {
    background: var(--tk-red);
}

.tk-tema .tk-tema-icona {
    color: var(--tk-fg-mut);
}

.tk-tema[aria-checked="false"] .tk-tema-icona:first-of-type,
.tk-tema[aria-checked="true"] .tk-tema-icona:last-of-type {
    color: var(--tk-white);
}

/* Variante per barre scure o rosse: cambia solo i colori, la geometria
   resta quella di base. */
.tk-tema-su-scuro {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.15);
}

.tk-tema-su-scuro:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.28);
}

.tk-tema-su-scuro:focus-visible {
    outline-color: var(--tk-white);
}

.tk-tema-su-scuro .tk-tema-cursore {
    background: var(--tk-white);
}

.tk-tema-su-scuro .tk-tema-icona {
    color: rgba(255, 255, 255, 0.75);
}

/* Sopra il cursore bianco l'icona va scritta in rosso, o sparirebbe. */
.tk-tema-su-scuro[aria-checked="false"] .tk-tema-icona:first-of-type,
.tk-tema-su-scuro[aria-checked="true"] .tk-tema-icona:last-of-type {
    color: var(--tk-red);
}

.tk-tema-cursore {
    position: absolute;
    top: 50%;
    left: 0.18rem;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.625rem;
    border-radius: 50%;
    transition: transform 0.18s ease;
}

.tk-tema[aria-checked="true"] .tk-tema-cursore {
    transform: translateX(1.55rem);
}

.tk-tema-icona {
    position: relative;
    z-index: 1;
    width: 1.25rem;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .tk-tema-cursore {
        transition: none;
    }
}

/* ---------- impaginazione ---------- */

/* Colonna con spaziatura invece di margini sui riquadri: le sezioni
   consecutive si toccavano bordo contro bordo e sembravano un blocco unico
   diviso da righe. La spaziatura sta sul contenitore, così vale per
   qualunque figlio — riquadri, avvisi, titoli — senza eccezioni per
   l'ultimo elemento e senza margini che collassano fra loro. */
.tk-main {
    max-width: var(--tk-larghezza-stretta);
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: var(--tk-gap-blocchi);
}

.tk-main-wide {
    max-width: var(--tk-larghezza);
}

/* Due colonne affiancate dentro una pagina.

   Nata in `admin.css` per «Prezzo & pacchetti» — a sinistra il comando, a
   destra quello che il comando produce — **spostata qui il 19 agosto 2026**
   quando è servita anche a «Dati attività» del partner. Era nell'admin
   perché lì è stata usata per prima, non perché ci appartenesse: la stessa
   ragione per cui `Periodo` e `Paginazione` sono finite in `app/`.

   **`2fr / 3fr` di base**: dove i due lati hanno mestieri diversi (un modulo
   di pochi campi e una tabella) le larghezze uguali sprecano da una parte e
   stringono dall'altra. Chi ha due blocchi omogenei aggiunge
   `.tk-due-colonne--pari`.

   `align-items: start` perché le colonne hanno altezze diverse per natura:
   senza, la scheda corta si stirerebbe fino a quella lunga e il suo bordo
   inferiore cadrebbe nel vuoto.

   Sotto i 900px diventa una colonna sola: è dove i 2/5 dello spazio scendono
   sotto le ~16rem del campo più largo, cioè dove la colonna sinistra
   smetterebbe di contenere i propri campi. */
/* **Niente `margin-bottom`, tolto il 20 agosto 2026.** Lo stacco verso il
   blocco successivo lo dà il contenitore, e a questo punto ce l'hanno tutti:
   `.tk-main` e `.tkp-modulo-sezioni` con `gap`, `.tkp-main` e
   `.tk-admin-content` con la regola sull'adiacenza.

   Non era innocuo: in un contenitore **flex** il margine non collassa con il
   `gap`, ci si somma — 64px invece di 32. Era gia' successo dentro i moduli
   del partner, dove è stato tappato con una regola apposta
   (`.tkp-modulo-sezioni > .tk-due-colonne`), e sarebbe risuccesso sulla prima
   pagina pubblica che avesse usato questa classe. Vedi docs/14
   §3-septdecies. */
.tk-due-colonne {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--tk-gap-blocchi);
    align-items: start;
}

/* **`minmax(0, 1fr)` e non `1fr`, altrimenti «pari» è una promessa che la
   classe non mantiene** *(28 agosto 2026)*.

   `1fr` vale `minmax(auto, 1fr)`: la colonna non scende **mai** sotto la
   larghezza minima del suo contenuto, quindi basta un riquadro con dentro una
   griglia o una tabella un po' larga perché le due colonne smettano di essere
   uguali — e nessuno se ne accorge, perché il difetto non rompe niente: la
   pagina si apre, sono solo storte. Misurato su «Il mio andamento», dove le
   due colonne venivano 437 e 611 invece di 524 e 524.

   `minmax(0, …)` toglie quel pavimento e le rende davvero pari. Sta qui e non
   nella pagina che l'ha rivelato: tapparlo dove fa male lascia la trappola
   armata per la prossima pagina che userà la classe — è già successo con i
   margini dentro i moduli del partner, due righe più su. */
.tk-due-colonne--pari {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Una colonna che contiene più riquadri impilati, con lo stesso stacco che
   c'è fra le colonne: senza, i due riquadri di destra si toccherebbero
   mentre quello di sinistra è staccato da loro. */
.tk-colonna-impilata {
    display: flex;
    flex-direction: column;
    gap: var(--tk-gap-blocchi);
}

/* **Due riquadri che finiscono alla stessa altezza.**

   Il valore predefinito è `start` perché di solito le due colonne hanno
   contenuti di lunghezza molto diversa — un modulo e una tabella da venti
   righe — e pareggiarle lascerebbe una voragine bianca sotto quella corta.

   Dove invece i due riquadri sono confrontabili, il bordo inferiore
   disallineato si legge come una sbavatura e non come una conseguenza del
   contenuto. Allora conviene pareggiarli: è la stessa ragione per cui le
   schede in griglia, di norma, sono tutte alte uguali. */
.tk-due-colonne--pareggia {
    align-items: stretch;
}

@media (max-width: 900px) {
    /* **Anche qui `minmax(0, …)`, e su schermo stretto conta di più.**

       `1fr` da solo non scende sotto la larghezza minima del contenuto:
       incolonnate, le due colonne diventano **una** che resta larga quanto il
       riquadro più largo, e la pagina esce dallo schermo di lato. Misurato a
       375px su «Il mio andamento»: il documento veniva 628px, cioè 253 in più
       del telefono.

       È il difetto peggiore della coppia, perché a video largo non si vede
       mai — e chi lo trova è chi usa il pannello dal telefono, cioè quasi
       tutti i partner. */
    .tk-due-colonne,
    .tk-due-colonne--pari {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Il titolo della colonna non deve staccarsi dal blocco che introduce: senza
   questo, l'`h2` porta il margine superiore predefinito e le due colonne
   partono da altezze diverse di una decina di pixel. */
.tk-due-colonne > section > h2:first-child {
    margin-top: 0;
}

.tk-card {
    background: var(--tk-surface);
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius);
    padding: 1.75rem;
}

.tk-card h1 {
    margin-top: 0;
    font-size: 1.45rem;
    letter-spacing: -0.02em;
    color: var(--tk-fg);
}

.tk-card h2 {
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--tk-fg);
}

/* ---------- avvisi ---------- */

.tk-alert {
    padding: 0.85rem 1rem;
    border-radius: var(--tk-radius-sm);
    margin: 1rem 0;
    font-size: 0.94rem;
    border: 1px solid transparent;
}

.tk-alert-error {
    background: var(--tk-danger-bg);
    border-color: var(--tk-danger);
    color: var(--tk-danger);
}

/* L'invito a segnalare un errore tecnico, subito sotto il riquadro rosso.

   Fuori dal riquadro e non dentro: `render_error_box()` sfugge tutto —
   giustamente, riceve testi da mezzo pannello — e qui serve un collegamento.
   Meglio due elementi che una seconda funzione che disegna riquadri rossi:
   quella diventerebbe subito la copia che diverge dalla prima.

   Sta in `site.css` e non nel foglio del partner perché la stessa riga
   servirà all'area cliente il giorno che anche lì un salvataggio fallisce:
   il problema non è di questo pannello, è di chiunque mostri un errore. */
.tk-errore-segnala {
    margin: -0.6rem 0 1rem;
    font-size: 0.9rem;
    color: var(--tk-fg-mut);
}

.tk-errore-segnala code {
    font-family: var(--tk-mono);
    letter-spacing: 0.06em;
}

.tk-alert-success {
    background: var(--tk-green-bg);
    border-color: var(--tk-green);
    color: var(--tk-green);
}

/* Campi affiancati su una riga sola.

   Stava in `partner.css` come `.tkp-riga-campi` — quindi l'admin, che quel
   foglio non lo carica, non poteva usarla e i suoi moduli avevano ogni campo
   a tutta larghezza. Spostata qui il 19 agosto 2026 con le stesse regole:
   è la terza volta in tre giorni che un blocco utile a entrambi i pannelli
   viveva in quello di uno solo.

   `align-items: flex-end` allinea i campi **sulla base**, non in alto: le
   etichette hanno lunghezze diverse e vanno a capo, e allineando in alto i
   riquadri di inserimento risulterebbero sfalsati fra loro. */
.tk-riga-campi {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 1rem;
}

.tk-riga-campi .tk-field {
    margin-bottom: 1rem;
}

.tk-riga-campi .tk-actions {
    margin: 0 0 1rem;
}

/* «Cosa si rompe se sbagli questo valore», sotto l'etichetta e sopra il
   campo. Neutra e non allarmante: compare solo su una quindicina di
   impostazioni su settantanove, e se fosse rossa la pagina sembrerebbe piena
   di errori invece che di avvertenze. Il fatto che sia rara è metà del suo
   valore — dove c'è, si legge. */
.tk-conseguenza {
    margin: 0.35rem 0 0.5rem;
    padding-left: 0.7rem;
    border-left: 2px solid var(--tk-border-strong);
    color: var(--tk-fg-mut);
    font-size: 0.88rem;
    line-height: 1.5;
    max-width: 62ch;
}

/* Nota in testa a una categoria di impostazioni: dice dove si agisce quando
   non si agisce da lì. Colore d'attesa e non d'errore — non c'è niente di
   rotto, c'è una cosa che si fa altrove. */
.tk-nota-categoria {
    margin: 0 0 1.25rem;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--tk-wait);
    background: var(--tk-wait-bg);
    color: var(--tk-wait);
    font-size: 0.9rem;
    line-height: 1.5;
    border-radius: 0 var(--tk-radius-sm) var(--tk-radius-sm) 0;
}

/* «Questo locale non riceve ancora ordini online.»

   Riquadro e non riga discreta: sostituisce l'elenco dei prodotti, cioè la
   cosa che il cliente era venuto a cercare, e deve occupare quello spazio con
   la stessa evidenza. Una nota piccola dove ci si aspetta un menù si legge
   come «sta caricando» e fa aspettare, o peggio fa ricaricare la pagina.

   Colore d'attesa e non d'errore: il locale esiste, è raggiungibile, e magari
   domani accende gli ordini. Non c'è niente di rotto da segnalare. */
.tk-avviso-nonordinabile {
    background: var(--tk-wait-bg);
    border: 1px solid var(--tk-wait);
    border-radius: var(--tk-radius);
    padding: 1.5rem;
    color: var(--tk-wait);
}

.tk-avviso-nonordinabile p {
    margin: 0;
}

.tk-avviso-nonordinabile p + p {
    margin-top: 0.5rem;
}

.tk-alert-warning {
    background: var(--tk-orange-bg);
    border-color: var(--tk-orange);
    color: var(--tk-orange);
}

/* ---------- moduli ---------- */

.tk-field {
    margin-bottom: 1rem;
}

.tk-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}

.tk-field small {
    display: block;
    color: var(--tk-fg-mut);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    line-height: 1.45;
}

.tk-field input[type="text"],
.tk-field input[type="email"],
.tk-field input[type="password"],
.tk-field input[type="number"],
.tk-field input[type="tel"],
.tk-field input[type="date"],
/* `search` aggiunto il 19 agosto 2026 con la casella che restringe il menù
   dei partner. Mancava per lo stesso motivo per cui mancava nella barra:
   l'elenco è stato scritto sui tipi che c'erano allora. Se aggiungi un tipo
   di campo, guarda che sia qui dentro — se non c'è non si rompe niente, si
   presenta soltanto con l'aspetto grezzo del browser. */
.tk-field input[type="search"],
/* `url` aggiunto il 29 agosto 2026 coi link social in Fatturazione: **terza
   volta**, e stavolta con l'avvertimento già scritto qui sopra. Il sintomo è
   sempre lo stesso e non somiglia a un difetto di CSS — un campo che appare
   largo un terzo degli altri sembra una svista di impaginazione, non un tipo
   mancante da un elenco. */
.tk-field input[type="url"],
.tk-field select,
.tk-field textarea {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--tk-border-strong);
    border-radius: var(--tk-radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--tk-surface);
    color: var(--tk-fg);
}

/* **Un campo largo promette un contenuto lungo, e la promessa vale ovunque.**
   *(Portate qui il 22 agosto 2026.)*

   Queste misure esistevano **due volte** — sotto `.tk-admin-content` e sotto
   `.tkp-main` — e nell'area pubblica non c'erano affatto: misurato sull'area
   personale del cliente, «CAP» e «Città» erano larghi **1010px** come tutto
   il resto. Il difetto era già stato corretto il 19 agosto, ma la correzione
   era agganciata ai due pannelli e il cliente non l'ha mai ricevuta.

   Le due copie **avevano già preso strade diverse**: `tel` era 32rem
   nell'admin e 16 nel partner, `textarea` 60 contro 46. Nessuno l'aveva
   deciso. Unificate sui valori migliori — un numero di telefono è corto in
   qualunque pannello — e le copie sono state tolte da lì.

   `max-width` e non `width`: non litiga con il `width: 100%` qui sopra, sono
   proprietà diverse, quindi non c'è nessuna gara di specificità da vincere.
   Ed è anche il motivo per cui i campi già stretti (`tk-campo-corto`)
   restano come sono.

   Le misure vengono da cosa ci si scrive dentro: un numero sono due o tre
   cifre, un telefono una riga corta, un nome o un indirizzo una riga, il
   corpo di un'email di sistema ha bisogno di respiro per vedersi come
   arriverà. */
.tk-field input[type="number"] {
    max-width: 12rem;
}

.tk-field input[type="tel"] {
    max-width: 16rem;
}

.tk-field input[type="text"],
.tk-field input[type="email"],
.tk-field input[type="date"],
.tk-field input[type="time"],
.tk-field input[type="password"],
.tk-field input[type="search"],
.tk-field select {
    max-width: 32rem;
}

.tk-field textarea {
    max-width: 60rem;
}

/* Un campo largo promette un contenuto lungo. Una quantità di crediti sono
   due o tre cifre: a tutta larghezza sembra che ci si aspetti un testo.

   **Queste due regole stanno qui sotto e non più in alto, ed è l'unico modo
   perché funzionino.** Erano scritte come `.tk-campo-corto input` — una
   classe e un elemento — contro `.tk-field input[type="text"]` qui sopra, che
   con l'attributo pesa di più e vinceva sempre con il suo `width: 100%`.
   Erano **inerti da quando esistono**: dove sembravano funzionare (la riga
   dei campi su `admin/crediti.php`) a stringere il campo era il `display:
   flex` del contenitore, non loro.

   Ora pesano uguale — due classi e un elemento — e vengono **dopo**, che a
   parità di peso è quello che decide. Quarta volta oggi che il conto dei
   selettori morde: quando una regola «non si applica», il sospetto è la
   specificità prima del refuso. */
.tk-field.tk-campo-corto input,
.tk-field.tk-campo-corto select {
    width: auto;
    min-width: 7rem;
}

.tk-field.tk-campo-medio input,
.tk-field.tk-campo-medio select {
    width: auto;
    min-width: 16rem;
}

.tk-field input:focus-visible,
.tk-field select:focus-visible,
.tk-field textarea:focus-visible {
    outline: 2px solid var(--tk-red);
    outline-offset: 1px;
}

.tk-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tk-checkbox input {
    margin-top: 0.25rem;
}

.tk-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.tk-btn {
    display: inline-block;
    padding: 0.65rem 1.4rem;
    border-radius: var(--tk-radius-sm);
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    font-family: inherit;
    /* Senza questa riga **lo stesso `.tk-btn` è alto 31px su un `<button>` e
       34px su un `<a>`**, e i due sono spesso affiancati (Filtra accanto ad
       Annulla, Salva accanto a Torna indietro). Non è una svista di questa
       barra: succede ovunque, da sempre.

       Il motivo è che `<button>` non eredita il testo dal documento — il
       foglio del browser gli mette `line-height: normal`, circa 1.17, mentre
       il link prende l'1.55 del corpo. `font-family: inherit` qui sopra
       tappava già lo stesso buco per il carattere: mancava il gemello. */
    line-height: inherit;
}

.tk-btn:focus-visible {
    outline: 2px solid var(--tk-red);
    outline-offset: 2px;
}

.tk-btn-primary {
    background: var(--tk-red);
    color: var(--tk-white);
}

.tk-btn-primary:hover {
    background: var(--tk-red-dark);
}

.tk-btn-secondary {
    background: var(--tk-surface);
    color: var(--tk-fg);
    border: 1px solid var(--tk-border-strong);
}

.tk-btn-secondary:hover {
    background: var(--tk-surface-2);
}

/* ---------- tabelle ---------- */

/* **Scorre la tabella, non la pagina.** *(Portata qui il 22 agosto 2026.)*
 *
 * Esisteva solo sotto `.tk-admin-content`, dove era nata il 19 agosto. Fuori
 * di lì il difetto era ancora tutto: misurata l'area personale del cliente a
 * 375px, la tabella dello storico ordini veniva **497px su uno schermo da
 * 356** e trascinava di lato **l'intera pagina** — titolo e campi compresi.
 * Era l'unica pagina del percorso cliente a farlo, su nove misurate, ed è la
 * pagina che un cliente apre dal telefono.
 *
 * `display: block` su una `<table>` è il modo di renderla scorrevole senza
 * doverla avvolgere in un contenitore, cioè senza toccare tutte le pagine che
 * ne disegnano una. Con `width: 100%` su schermo largo riempie come prima e
 * la barra non compare: **il cambiamento si vede solo dove prima c'era il
 * difetto**. */
.tk-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

.tk-table th,
.tk-table td {
    text-align: left;
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--tk-border);
}

.tk-table th {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
    font-weight: 700;
}

.tk-ok {
    color: var(--tk-green);
    font-weight: 600;
}

/* Il ✓ / ✗ che nelle tabelle sostituisce «Valido» / «Invalidato».

   Più grande del testo attorno perché è il segno che si cerca scorrendo la
   colonna, e a dimensione normale ✓ e ✗ si somigliano più di quanto sembri.
   Il colore lo mettono `.tk-ok` e `.tk-ko`, che sono già definite nei due
   temi: qui c'è solo la dimensione. */
.tk-stato-segno {
    font-size: 1.25rem;
    line-height: 1;
}

.tk-ko {
    color: var(--tk-danger);
    font-weight: 600;
}

.tk-mono {
    font-family: var(--tk-mono);
    background: var(--tk-surface-2);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    word-break: break-all;
}

/* ---------- prodotti ---------- */

/* In alto e non centrati.

   Con la riga centrata, un prodotto che ha la descrizione su due righe si
   porta il prezzo e i comandi a metà altezza, cioè più in basso del nome: e
   siccome alcuni prodotti la descrizione ce l'hanno e altri no, ogni riga
   cadeva a un'altezza diversa dalla precedente. Allineando in alto, nome,
   prezzo e comandi stanno sulla stessa linea in tutte le righe, con o senza
   descrizione. */
.tk-prodotto {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--tk-border);
}

.tk-prodotto > img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.tk-prodotto-testo {
    flex: 1 1 55%;
    min-width: 8rem;
}

.tk-prodotto-nome {
    font-weight: 600;
}

/* **La descrizione di un prodotto, ovunque si mostri** (27 agosto 2026).

   Nata per il listino pubblico, ora la usano anche il catalogo dell'admin, la
   pagina in cui il partner attiva i prodotti e la scelta dentro un menù. Una
   classe sola e non una per foglio: i tre pannelli caricano tutti `site.css`,
   e tre regole gemelle in tre file sono tre occasioni di divergere.

   `display: block` perché in tabella la porta un `<small>`, che di suo
   starebbe in riga col nome e sembrerebbe parte di lui. */
.tk-prodotto-desc {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--tk-fg-mut);
    line-height: 1.4;
}

.tk-prodotto-prezzo {
    font-weight: 700;
    color: var(--tk-red);
    margin-top: 2px;
}

/* Il prezzo come colonna propria, quando è figlio diretto della riga.

   I nomi dei prodotti hanno lunghezze diverse: lasciando il prezzo sotto il
   nome, ogni cifra cadeva a una distanza diversa dal bordo e confrontarle
   scorrendo era impossibile. Incolonnato a destra si allineano tutte, e il
   nome resta comunque la prima cosa che si legge — chi cerca in un menù
   cerca "kebab", non "15.00".

   tabular-nums allinea anche i decimali: senza, un "1" occupa meno di un "8"
   e le virgole ballano di qualche pixel proprio dove l'occhio le confronta. */
.tk-prodotto > .tk-prodotto-prezzo {
    flex: none;
    margin-top: 0;
    min-width: 6rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Sullo stretto la riga va a capo da sola: il prezzo apre la seconda riga e i
   comandi restano all'estremità opposta. Incolonnare a destra su 360 pixel
   vorrebbe dire spezzare i nomi in tre righe per guadagnare un allineamento
   che lì non serve, perché i prodotti si leggono uno alla volta. */
@media (max-width: 560px) {
    /* Il testo si prende tutta la prima riga, prezzo e comandi stanno insieme
       sulla seconda.

       Lasciandoli liberi di andare a capo per conto loro il blocco cresceva a
       quattro righe — nome, descrizione, comandi, e solo allora la pastiglia
       delle salse — che finiva staccata dal prodotto a cui si riferisce.
       Prezzo e comandi sulla stessa riga fanno risalire tutto di una. */
    .tk-prodotto > .tk-prodotto-testo {
        flex-basis: 100%;
    }

    .tk-prodotto > .tk-prodotto-prezzo {
        min-width: 0;
        text-align: left;
    }

    .tk-prodotto > .tk-prodotto-azione,
    .tk-prodotto > .tk-carrello-azioni {
        margin-left: auto;
    }
}

.tk-prodotto-azione {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.tk-prodotto-azione input[type="number"] {
    width: 3rem;
    text-align: center;
    padding: 0.5rem 0.2rem;
    border: 1px solid var(--tk-border-strong);
    border-radius: var(--tk-radius-sm);
    background: var(--tk-surface);
    color: var(--tk-fg);
}

/* ---------- comandi in fila, tutti della stessa altezza ----------

   Campo della quantità, «+», «Aggiorna», «✕»: ognuno prendeva la sua altezza
   da una regola diversa — il bottone dal padding di .tk-btn, l'icona da
   quello di .tk-btn-icona, il campo dal suo — e i tre risultati non
   coincidevano mai. Uno sfalsamento di due pixel non si nota su un bottone
   solo; ripetuto su ogni riga del listino sì, e fa sembrare storta tutta la
   colonna.

   Un'altezza dichiarata una volta al posto di tre padding che si inseguono. */
.tk-prodotto-azione,
.tk-carrello-azioni {
    --tk-comando-h: 2.6rem;
}

.tk-prodotto-azione input[type="number"],
.tk-carrello-azioni input[type="number"],
.tk-prodotto-azione .tk-btn,
.tk-carrello-azioni .tk-btn {
    height: var(--tk-comando-h);
    box-sizing: border-box;
}

/* Il testo va ricentrato a mano: con un'altezza fissa il padding verticale
   non lo mette più a metà da solo. */
.tk-prodotto-azione .tk-btn,
.tk-carrello-azioni .tk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}

/* ---------- "vuoi aggiungere altro?" nel carrello ----------

   Pastiglie in fila e non righe di menù: sono un ripensamento veloce, non
   una seconda spesa. Una riga per prodotto con foto e descrizione
   riaprirebbe il menù dentro il carrello e allontanerebbe la conferma, che
   è il contrario di quello che serve a chi sta concludendo. */
/* Niente più filo di separazione né margine: dal 20 agosto 2026 «Vuoi
   aggiungere altro?» è un riquadro suo, e a separarlo dal precedente ci pensa
   il bordo del riquadro più lo stacco della colonna. Lasciandoli, il riquadro
   aveva una riga orizzontale a mezz'aria sotto il titolo — lo stesso avanzo
   che il filo fra le righe dei prodotti ha lasciato nelle mattonelle. */
.tk-suggerimenti {
    margin: 0;
}

.tk-suggerimenti > h2 {
    font-size: 1rem;
    margin: 0 0 0.7rem;
}

.tk-suggerimenti-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tk-suggerimento-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--tk-border-strong);
    border-radius: 999px;
    background: var(--tk-surface);
    color: var(--tk-fg);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tk-suggerimento-btn:hover,
.tk-suggerimento-btn:focus-visible {
    border-color: var(--tk-red);
    background: var(--tk-surface-2);
}

.tk-suggerimento-prezzo {
    color: var(--tk-fg-mut);
    font-size: 0.9em;
}

.tk-suggerimento-piu {
    color: var(--tk-red);
    font-weight: 700;
    font-size: 1.15em;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .tk-suggerimento-btn {
        transition: none;
    }
}

/* ---------- salse e ingredienti sul prodotto ----------

   Il modulo avvolge la riga del prodotto perché deve contenere anche la
   scelta, che sta sotto. La riga tiene il suo bordo inferiore solo quando è
   sola: se sotto c'è la scelta, il bordo separerebbe il prodotto dai suoi
   stessi ingredienti. */
.tk-prodotto-modulo {
    border-bottom: 1px solid var(--tk-border);
}

.tk-prodotto-modulo > .tk-prodotto {
    border-bottom: 0;
}

.tk-ingredienti {
    padding: 0 0 0.8rem;
    font-size: 0.9rem;
}

/* La domanda è la parte importante: chi scorre in fretta deve accorgersi che
   può togliere qualcosa, senza che chi non ha preferenze debba aprire niente.

   Perciò è una pastiglia e non una riga di testo: in un elenco di undici
   prodotti una scritta rossa in più si perde fra i prezzi, che sono già
   rossi; una forma no. Sembra premibile perché lo è.

   Fondo grigio e scritta rossa, NON bordo rosso: il contorno rosso ripetuto
   sotto ogni prodotto caricava troppo la pagina — undici richiami della
   stessa intensità del pulsante di acquisto, che è la cosa che deve vincere.
   La forma basta a farla riconoscere, il rosso resta solo nel testo. */
.tk-ingredienti > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    color: var(--tk-red);
    font-weight: 600;
    padding: 0.35rem 0.8rem;
    margin: 0.2rem 0;
    border: 1px solid var(--tk-border);
    border-radius: 999px;
    background: var(--tk-surface-2);
    list-style: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* Il triangolino nativo va tolto in due modi diversi: WebKit usa uno
   pseudo-elemento proprio, gli altri il list-style di sopra. */
.tk-ingredienti > summary::-webkit-details-marker {
    display: none;
}

.tk-ingredienti > summary::after {
    content: "▾";
    font-size: 0.85em;
}

.tk-ingredienti[open] > summary::after {
    content: "▴";
}

/* Il rosso torna solo al passaggio del mouse e sul fuoco da tastiera: lì è
   una pastiglia sola, non undici. */
.tk-ingredienti > summary:hover,
.tk-ingredienti > summary:focus-visible {
    border-color: var(--tk-red);
}

@media (prefers-reduced-motion: reduce) {
    .tk-ingredienti > summary {
        transition: none;
    }
}

/* Nel carrello la stessa pastiglia è più piccola: lì la domanda arriva a chi
   ha già scelto, e non deve competere col nome del prodotto. */
.tk-ingredienti-carrello {
    padding-bottom: 0;
    font-size: 0.85rem;
}

/* Il pulsante di conferma resta agganciato al fondo dello schermo finché il
   riquadro è aperto.

   Con diciotto voci il pulsante finisce sotto la piega, e quando si smette di
   spuntare l'attenzione è dove si è cliccato — non quaranta pixel più in
   basso, fuori campo. Il risultato era che si chiudeva il riquadro credendo
   di aver scelto. Non è un pulsante in più: è lo stesso, portato dove
   l'occhio arriva.

   Il fondo pieno serve: senza, le caselle gli scorrerebbero sotto e si
   leggerebbero due cose sovrapposte. */
.tk-ingredienti .tk-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 0.7rem 0 0;
    padding: 0.7rem 0;
    background: var(--tk-surface);
    border-top: 1px solid var(--tk-border);
}

.tk-ingredienti-gruppo {
    margin: 0.6rem 0 0;
}

.tk-ingredienti-gruppo > strong {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tk-fg-mut);
    margin-bottom: 0.3rem;
}

.tk-ingrediente {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0;
    cursor: pointer;
}

/* Il sovrapprezzo accanto al nome, non in una colonna a parte: è la ragione
   per cui quella voce non è già spuntata, e va letto insieme al nome. */
.tk-ingrediente em {
    font-style: normal;
    color: var(--tk-red);
    font-weight: 600;
}

/* Cosa il cliente ha tolto e cosa ha aggiunto: `-cipolla +feta`.

   Il segno sta attaccato alla parola e il colore lo raddoppia, non lo
   sostituisce — chi non distingue rosso e verde legge comunque il meno, e su
   una comanda stampata in bianco e nero pure.

   Rosso-terra e verde sono gli stessi di salita e discesa in classifica: in
   questo progetto vogliono già dire "meno" e "più". */
.tk-ing-tolto,
.tk-ing-aggiunto,
.tk-ing-tutto {
    display: inline-block;
    padding: 0.1em 0.5em;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92em;
    line-height: 1.5;
    white-space: nowrap;
    /* Lo spazio fra le parole non basta a separarle: attaccate sembrano una
       pastiglia sola spezzata, e «senza cipolla senza piccante» si legge come
       un blocco unico. Il margine sotto serve quando vanno a capo, dove
       altrimenti si toccherebbero riga con riga. */
    margin: 0.1rem 0.3rem 0.1rem 0;
}

/* Il blocco di colore si vede da lontano, il testo resta leggibile da vicino:
   fondo tenue e scritta piena, non il contrario. Un pieno saturo su una riga
   di comanda con tre variazioni diventa una bandiera e copre il nome del
   prodotto, che è l'informazione principale. */
.tk-ing-tolto {
    color: var(--tk-down);
    background: color-mix(in srgb, var(--tk-down) 14%, transparent);
}

.tk-ing-aggiunto {
    color: var(--tk-up);
    background: color-mix(in srgb, var(--tk-up) 14%, transparent);
}

/* «con tutto» è neutro di proposito: non è una variazione, è il valore
   predefinito. In rosso o in verde suggerirebbe che sia successo qualcosa,
   e il suo lavoro è solo far sapere che quel prodotto si poteva cambiare. */
.tk-ing-tutto {
    color: var(--tk-fg-mut);
    background: var(--tk-surface-2);
    font-weight: 600;
}

/* Il prefisso una volta sola in testa al gruppo (17 agosto 2026): il perché
   sta in Ingredienti::descriviSceltaHtml(), qui conta solo che il gruppo si
   legga come un blocco. Lo stacco fra «senza …» e «con …» è più largo di
   quello fra due nomi dello stesso gruppo — è quel rapporto, non il colore, a
   dire dove finisce un'etichetta e comincia l'altra. */
.tk-ing-gruppo {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin: 0.1rem 0.85rem 0.1rem 0;
    vertical-align: middle;
}

/* Dentro il gruppo la distanza la dà il gap: lasciando anche il margine delle
   pastiglie lo spazio raddoppierebbe, e a capo il rapporto fra i due stacchi
   si invertirebbe proprio dove serve di più. */
.tk-ing-gruppo > span {
    margin: 0;
}

/* L'etichetta è la stessa pastiglia con il fondo più carico e la scritta in
   maiuscoletto: si distingue senza introdurre un colore in più, e resta nella
   famiglia del suo gruppo. Il maiuscolo lo fa il CSS, non il testo: nei testi
   di sistema «senza» resta una parola normale, traducibile senza portarsi
   dietro una convenzione tipografica italiana. */
.tk-ing-eti {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78em;
    font-weight: 800;
    background: color-mix(in srgb, currentColor 26%, transparent);
}

/* color-mix è recente: dove manca, la pastiglia resta senza fondo e il testo
   colorato in grassetto regge da solo. Nessun fondo è meglio di un fondo
   sbagliato che rende il testo illeggibile. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .tk-ing-tolto,
    .tk-ing-aggiunto,
    .tk-ing-eti {
        padding-left: 0;
        padding-right: 0;
    }

    /* Senza fondo l'etichetta perde la sua distinzione principale: il
       maiuscoletto da solo si confonde con i nomi, e i due punti rimettono il
       confine che il colore non può più segnare. */
    .tk-ing-eti::after {
        content: ':';
    }
}

.tk-btn-icona {
    padding: 0.55rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
}

.tk-msg-inline {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 2px;
}

.tk-msg-inline-successo {
    color: var(--tk-green);
}

.tk-msg-inline-errore {
    color: var(--tk-danger);
}

.tk-carrello-azioni {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.tk-carrello-azioni input[type="number"] {
    width: 3.5rem;
    text-align: center;
    padding: 0.5rem 0.2rem;
    border: 1px solid var(--tk-border-strong);
    border-radius: var(--tk-radius-sm);
    background: var(--tk-surface);
    color: var(--tk-fg);
}

/* ---------- piè di pagina ---------- */

.tk-footer {
    text-align: center;
    color: var(--tk-fg-mut);
    font-size: 0.8rem;
    padding: 1.5rem max(1.5rem, calc((100% - var(--tk-larghezza)) / 2));
}

/* Qui, fino al 27 agosto 2026, «Assistenza» e «Sei un locale?» venivano
   **nascoste** sotto i 640px, perché l'intestazione arrivava a 125px di
   altezza. La motivazione scritta allora era che quelle due voci esistono già
   altrove — l'assistenza nel piè di pagina, i locali in una fascia della home.
   Vale per la prima, non per la seconda: la fascia dei locali sta **in fondo**
   alla home, dopo la mappa e l'elenco, cioè dove non arriva chi apre il sito
   per cenare. Sul telefono, che è da dove arriva quasi tutto il traffico,
   l'unica porta d'ingresso dei partner era di fatto chiusa.
   Adesso «Assistenza» va nel menù e «Sei un locale?» resta scritta. */
@media (max-width: 40rem) {
    /* Il logo resta più grande di prima ma sotto la misura del desktop:
       altrimenti spinge il resto a capo e l'intestazione torna alta 125px.

       `flex-wrap` non è più `nowrap`: adesso deve poter andare a capo, ma solo
       per far scendere il menù aperto sotto la barra. Con `nowrap` il pannello
       resterebbe schiacciato sulla stessa riga. */
    .tk-header {
        padding: 0.85rem 1rem;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .tk-logo {
        font-size: 1.6rem;
    }

    .tk-logo-img {
        height: 45px;
    }

    .tk-nav {
        gap: 0.15rem;
        flex-wrap: nowrap;
    }

    .tk-nav a {
        font-size: 0.82rem;
        padding: 0.3rem 0.5rem;
    }

    /* Il sottotitolo è una firma, non un'informazione: sul telefono
       ruberebbe la riga a qualcosa di utile. */
    .tk-subtitle {
        display: none;
    }
}

.tk-footer a {
    color: var(--tk-fg-mut);
}

/* I recapiti su una riga loro: in coda ai link legali si leggerebbero come un
   sesto documento da aprire, mentre sono una cosa diversa — sono come ci si
   mette in contatto. */
.tk-footer-recapiti {
    display: block;
    margin-top: 0.4rem;
}

.tk-links {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.tk-links a {
    color: var(--tk-red);
    text-decoration: none;
}

.tk-links a:hover {
    text-decoration: underline;
}

/* ============================================================
   CLASSIFICA
   Le tre voci tipografiche: display condensato per i titoli,
   monospaziato per etichette e dati, corpo normale per il resto.
   ============================================================ */

.tk-clas-titolo {
    font-family: var(--tk-display);
    font-size: clamp(2.2rem, 8vw, 3.2rem);
    line-height: 0.9;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.01em;
    margin: 0 0 1rem;
    color: var(--tk-fg);
}

.tk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.tk-chip {
    display: inline-block;
    font-size: 0.82rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--tk-border-strong);
    color: var(--tk-fg-mut);
    text-decoration: none;
    white-space: nowrap;
}

.tk-chip:hover {
    border-color: var(--tk-fg-mut);
}

.tk-chip-attivo {
    background: var(--tk-red);
    border-color: var(--tk-red);
    color: var(--tk-white);
    font-weight: 600;
}

/* Barra «schede a sinistra, ricerca a destra»: la lista ordini del partner e
   le impostazioni dell'admin fanno la stessa cosa — restringere una pagina
   lunga a un sottoinsieme, con una casella che invece guarda ovunque.

   Stava in partner.css come `.tk-ordini-barra` (17 agosto 2026: spostata qui
   e rinominata, valori identici). Il nome vecchio parlava del posto invece
   che della funzione, ed è il motivo per cui la seconda pagina che ne aveva
   bisogno non poteva usarla: l'admin quel foglio non lo carica.

   Si usa anche in servizio, quindi i bersagli restano grandi sul telefono. */
.tk-barra-schede {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--tk-border);
}

/* **`min-width: 0`, o su schermo stretto la barra sfonda la pagina.**
   *(22 agosto 2026.)*

   Un elemento flex non scende sotto la larghezza minima del proprio contenuto
   se non glielo si dice: la barra dei chip e quella di ricerca restavano
   **338px dentro un contenitore da 266**, e trascinavano di lato tutta la
   pagina. Non si era mai visto perché queste barre erano nate nell'admin,
   dove la colonna è larga — è arrivato con l'area cliente, che si guarda dal
   telefono.

   È la stessa riga che `.tk-admin-content` porta da luglio, per lo stesso
   motivo e con lo stesso commento: quella regola conosceva già il problema, e
   qui mancava. */
.tk-barra-schede > * {
    min-width: 0;
}

/* E la barra di ricerca va a capo lei stessa: campo più pulsante non stanno
   affiancati in 266px, e senza `wrap` uno dei due esce comunque. */
.tk-barra-cerca {
    flex-wrap: wrap;
}

/* Dentro la barra i chip non portano il margine inferiore che hanno altrove:
   lo stacco lo dà già la barra con il suo padding e la sua riga. */
.tk-barra-schede .tk-chips {
    margin-bottom: 0;
}

.tk-chip-n {
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.tk-barra-cerca {
    display: flex;
    gap: 0.4rem;
    /* `stretch` e non `center`: anche con lo stesso `padding` e lo stesso
       `line-height` questi tre widget non vengono alti uguali — il campo data
       si porta dietro l'icona del calendario, il menù a tendina la sua
       freccia, e restavano 36.3 / 34.3 / 33.2 px, centrati e visibilmente
       scalinati. Con `stretch` si allineano tutti al più alto, **qualunque
       sia**, senza che io debba scrivere un'altezza fissa che il prossimo
       browser smentisce. */
    align-items: stretch;
}

/* I campi della barra devono avere l'aspetto e l'altezza dei pulsanti che
   hanno accanto, e per averli servono tutte e sei le righe qui sotto.

   La regola prima copriva **solo** `input[type="search"]`, ed era vero quando
   la barra aveva solo la casella di ricerca: le date e il menù dei partner
   sono arrivati dopo, con il filtro per periodo, e nessuno ha esteso il
   selettore. Il risultato non era «un po' più piccoli»: prendevano *tutto*
   dal browser — bordo 2px incassato, monospace, e **sfondo bianco anche in
   tema scuro**, gli unici elementi chiari della riga.

   `font-family` e `line-height` a `inherit` sono la stessa cosa che serve a
   `.tk-btn` più su: i controlli di modulo non ereditano il testo dal
   documento se non glielo si dice esplicitamente. */
/* Una riga di comando dentro una cella di tabella: campo + pulsante.

   Prima erano tre `<form>` con `style="margin-bottom:0.5rem"` e dentro un
   `<input type="text" style="width:10rem">` che **non prendeva nessuno
   stile** — fuori da `.tk-field`, quindi bordo incassato da 2px, carattere
   del browser e fondo bianco anche in tema scuro, accanto a un pulsante alto
   diversamente. Stesso identico buco della barra dei filtri e della casella
   che restringe i menù: la terza volta oggi.

   Condivide le **stesse dichiarazioni** della barra di ricerca invece di
   averne di proprie simili: sotto, i selettori sono elencati insieme. Due
   nomi perché sono due posti diversi, un blocco solo perché sono la stessa
   misura. */
.tk-riga-comandi {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
    /* Va a capo invece di sfondare la colonna: qui la larghezza disponibile
       la decide la tabella, non questa riga. */
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
}

.tk-riga-comandi:last-child {
    margin-bottom: 0;
}

/* Larghezza fissa e non `flex: 1`: è quella che allinea le tre caselle
   incolonnate una sotto l'altra. Con la larghezza elastica ognuna si
   adatterebbe alla lunghezza del proprio pulsante, e le tre partirebbero e
   finirebbero in tre punti diversi — che è come stavano. */
.tk-riga-comandi input[type="text"] {
    width: 9rem;
}

/* Il pulsante si allarga a riempire la riga.

   Nella colonna «Azioni», larga 163px, campo e pulsante non ci stanno
   affiancati e vanno a capo: senza questa riga il pulsante resterebbe largo
   quanto la sua etichetta, e i tre verrebbero di tre larghezze diverse uno
   sotto l'altro — cioè il difetto segnalato, spostato di un livello invece
   che risolto. Così ogni elemento è largo quanto il campo e la colonna si
   legge incolonnata. Dove invece lo spazio c'è, il pulsante si mette
   semplicemente accanto e riempie quello che avanza. */
.tk-riga-comandi .tk-btn {
    flex: 1 1 auto;
}

.tk-barra-cerca input[type="search"],
.tk-barra-cerca input[type="date"],
.tk-barra-cerca select,
.tk-riga-comandi input[type="text"] {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--tk-border-strong);
    border-radius: var(--tk-radius-sm);
    font-size: 0.85rem;
    font-family: inherit;
    line-height: inherit;
    background: var(--tk-surface);
    color: var(--tk-fg);
}

.tk-barra-cerca input[type="search"] {
    width: 12rem;
}

/* I voti di una recensione: icona + numero, cinque in una cella.

   **`nowrap` sulla cella intera**, e la prima versione ce l'aveva solo sulla
   singola pastiglia: il ragionamento era «se la colonna è stretta vadano pure
   a capo fra loro». Guardando la pagina vera, con sette colonne la colonna è
   *sempre* stretta, quindi «se serve» voleva dire «sempre» — cinque righe per
   recensione e righe alte il triplo. Su una riga occupano una ventina di
   caratteri, e da quando le tabelle dell'admin scorrono per conto loro
   allargare una colonna non costa più niente a nessuno.

   Il colore è **in aggiunta** al numero, mai al suo posto: qui si decide se
   invalidare i voti di una persona, e nessuna decisione deve dipendere dal
   saper distinguere due tinte. */
.tk-voti {
    white-space: nowrap;
}

/* Una cella che contiene un importo. «CHF 375.00» spezzato in «CHF» a capo
   «375.00» non è solo brutto: per un attimo si legge un numero senza la sua
   valuta. In una colonna stretta succede da solo, e nessuno lo decide. */
.tk-cella-importo {
    white-space: nowrap;
}

.tk-voto {
    display: inline-block;
    white-space: nowrap;
    margin-right: 0.45rem;
    font-size: 0.9rem;
}

.tk-voto-n {
    margin-left: 0.15rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--tk-fg-mut);
}

.tk-voto-basso .tk-voto-n {
    color: var(--tk-red);
}

.tk-voto-alto .tk-voto-n {
    /* `--tk-green`, la stessa di `.tk-ok`: è già definita nei due temi. Un
       verde scritto a mano qui sarebbe illeggibile su fondo scuro. */
    color: var(--tk-green);
}

/* La casella che restringe una tendina. Nel modulo sta sopra al menù e più
   piccola del campo vero: è un aiuto per arrivarci, non un dato da compilare,
   e darle lo stesso peso farebbe credere che vada riempita.

   `input.tk-filtra-menu` e non `.tk-filtra-menu`: la regola dei campi qui
   sopra è `.tk-field input[type="search"]`, che pesa più di due classi. Con
   il selettore corto passava solo il margine — l'unica proprietà che l'altra
   regola non dichiara — e il campo restava grande come gli altri. Il tipo di
   elemento pareggia il conto, e venendo dopo vince. */
.tk-field input.tk-filtra-menu {
    margin-bottom: 0.35rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

.tk-barra-cerca .tk-filtra-menu {
    width: 7rem;
}

.tk-barra-cerca .tk-btn,
.tk-riga-comandi .tk-btn {
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
}

@media (max-width: 720px) {
    .tk-barra-schede {
        flex-direction: column;
        align-items: stretch;
    }

    .tk-barra-cerca input[type="search"] {
        width: 100%;
    }
}

/* riga: rango | attività | andamento | punteggio | variazione */
.tk-clas-riga {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 0 0.9rem;
    align-items: start;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--tk-border);
}

.tk-clas-riga:last-of-type {
    border-bottom: 0;
}

.tk-clas-riga-inattiva {
    opacity: 0.58;
}

.tk-clas-pos {
    font-family: var(--tk-display);
    font-size: 1.6rem;
    line-height: 1.05;
    color: var(--tk-fg-mut);
    font-variant-numeric: tabular-nums;
}

.tk-clas-riga-podio .tk-clas-pos {
    color: var(--tk-red);
}

.tk-clas-etichetta {
    display: block;
    font-family: var(--tk-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tk-wait);
    margin-bottom: 0.1rem;
}

.tk-clas-nome {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    text-decoration: none;
    color: var(--tk-fg);
}

.tk-clas-nome:hover {
    color: var(--tk-red);
}

/* La medaglia dei primi tre (25 agosto 2026).

   `font-style: normal` e la famiglia di sistema perché il nome usa il font
   del display: applicato a un'emoji, su alcuni sistemi cambia quale
   variante viene scelta o la lascia in bianco e nero.

   `inline-block` con larghezza fissa: le tre emoji non hanno la stessa
   larghezza in tutti i font, e senza il nome dell'oro partirebbe un paio di
   pixel più in là di quello del bronzo — poco visibile da sola, evidente su
   tre righe incolonnate. */
.tk-clas-medaglia {
    display: inline-block;
    width: 1.35em;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.tk-clas-meta {
    display: block;
    font-size: 0.78rem;
    color: var(--tk-fg-mut);
    margin-top: 0.1rem;
}

/* Lo stato e il pulsante occupano lo stesso posto perché sono le due
   facce della stessa domanda: o puoi ordinare, o la riga ti dice perché
   no. Non compaiono mai insieme, e le righe restano allineate. */
.tk-clas-stato {
    display: inline-block;
    font-family: var(--tk-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
    border: 1px solid var(--tk-border-strong);
    border-radius: 3px;
    padding: 0.1rem 0.4rem;
    margin-top: 0.35rem;
}

.tk-clas-ordina {
    display: inline-block;
    margin-top: 0.45rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: var(--tk-red);
    color: var(--tk-white);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.tk-clas-ordina:hover {
    background: var(--tk-red-dark);
}

.tk-clas-ordina:focus-visible {
    outline: 2px solid var(--tk-fg);
    outline-offset: 2px;
}

.tk-clas-destra {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    text-align: right;
}

.tk-clas-punt {
    font-family: var(--tk-display);
    font-size: 1.6rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--tk-fg);
    white-space: nowrap;
}

/* Il "/5" serve a dare la scala, non a competere col numero: corpo del
   testo, piccolo e smorzato, così l'occhio legge prima il punteggio. */
.tk-clas-punt small {
    font-family: var(--tk-body);
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--tk-fg-mut);
    letter-spacing: 0.02em;
    margin-left: 0.1em;
}

.tk-badge {
    font-family: var(--tk-mono);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tk-badge-su {
    background: var(--tk-up-bg);
    color: var(--tk-up);
}

.tk-badge-giu {
    background: var(--tk-down-bg);
    color: var(--tk-down);
}

.tk-badge-fermo {
    background: var(--tk-surface-2);
    color: var(--tk-fg-mut);
}

.tk-badge-attesa {
    background: var(--tk-wait-bg);
    color: var(--tk-wait);
}

/* andamento */
.tk-spark {
    display: block;
}

.tk-spark .ln {
    fill: none;
    stroke-width: 2;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.tk-spark .ln-su { stroke: var(--tk-up); }
.tk-spark .ln-giu { stroke: var(--tk-down); }
.tk-spark .ln-fermo { stroke: var(--tk-fg-mut); }
.tk-spark .pt-su { fill: var(--tk-up); }
.tk-spark .pt-giu { fill: var(--tk-down); }
.tk-spark .pt-fermo { fill: var(--tk-fg-mut); }

.tk-spark .base {
    stroke: var(--tk-border-strong);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

/* ============================================================
   HOME
   Niente foto dei locali (per scelta: le immagini stanno sul catalogo
   centrale e le carica solo l'admin), quindi il colpo d'occhio lo deve
   dare la tipografia. Il rosso pieno del blocco d'apertura è l'unico
   punto della parte pubblica dove il colore prende tutta la larghezza:
   è la firma, e proprio per questo non va ripetuta altrove.
   ============================================================ */

.tk-hero {
    background: var(--tk-red);
    color: var(--tk-white);
    padding: 2.5rem 1rem 2rem;
}

.tk-hero-dentro {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
}

.tk-hero-titolo {
    font-family: var(--tk-display);
    font-size: clamp(2.4rem, 9vw, 4.2rem);
    /* Anton è già molto stretto e compatto: a 0.95 le due righe si
       toccavano quasi. 1.08 le fa respirare senza perdere il blocco. */
    line-height: 1.08;
    letter-spacing: 0.01em;
    margin: 0 0 0.75rem;
    color: var(--tk-white);
    text-wrap: balance;
}

.tk-hero-sotto {
    font-size: 1.02rem;
    line-height: 1.45;
    margin: 0 auto 1.5rem;
    max-width: 34rem;
    opacity: 0.92;
}

.tk-cerca {
    display: flex;
    gap: 0.5rem;
    max-width: 32rem;
    margin: 0 auto;
}

.tk-cerca input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    font-size: 1rem;
    font-family: inherit;
    border: 2px solid transparent;
    border-radius: 8px;
    background: var(--tk-white);
    color: #191512;
}

.tk-cerca input[type="search"]:focus {
    outline: none;
    border-color: #191512;
}

/* Dentro la fascia rossa il pulsante primario sarebbe rosso su rosso, cioè
   invisibile: serve un'inversione. Vale per la ricerca della home e per la
   chiamata all'azione della pagina d'iscrizione.

   **Bianco, non nero** *(27 agosto 2026)*. Era nero, ed era l'unico elemento
   del sito che sembrava incollato da un altro sito: sulla fascia rossa il
   nero non appartiene a nessuna delle due parti. Il bianco sì — è il colore
   del testo dell'eroe e della pastiglia «Accedi» in testata, quindi il
   pulsante si legge come parte della fascia invece che come un ospite.

   Il rosso del testo è quello del marchio, che su bianco è il suo uso
   normale in tutto il resto del sito. */
.tk-hero .tk-btn-primary,
.tk-cerca .tk-btn-primary {
    background: var(--tk-white);
    border-color: var(--tk-white);
    color: var(--tk-red);
    flex: 0 0 auto;
}

.tk-hero .tk-btn-primary:hover,
.tk-cerca .tk-btn-primary:hover {
    background: #f4eae9;
    border-color: #f4eae9;
    color: var(--tk-red-dark);
}

/* ============================================================
   IL BENVENUTO IN FRANCHI (pagina d'iscrizione partner)
   Fascia scura fra il rosso dell'apertura e il bianco delle schede.
   Colori fissi e non da token: è una superficie disegnata scura, come
   il riquadro del QR è disegnato bianco — se seguisse il tema, in tema
   scuro il testo chiaro finirebbe su un fondo chiaro.
   ============================================================ */

.tk-conto {
    background: #191512;
    color: #f2ece7;
    padding: 2rem 1rem;
}

.tk-conto-dentro {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
}

.tk-conto-eti {
    display: block;
    font-family: var(--tk-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #a09589;
    margin-bottom: 0.75rem;
}

.tk-conto-intro {
    font-size: 1.05rem;
    margin: 0 0 1.5rem;
}

.tk-conto-intro strong {
    color: var(--tk-red-acceso);
}

/* Le colonne si impilano da sole sul telefono: i segni × e = restano
   allineati perché sono voci della stessa riga flessibile. */
.tk-conto-riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
}

.tk-conto-blocco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

/* Il bordo trasparente non è decorazione: dà ai numeri la stessa altezza
   di scatola del campo, che sotto ha una riga tratteggiata da 3px. Senza,
   gli elementi grandi resterebbero sfalsati di quei 3 pixel. */
.tk-conto-num {
    font-family: var(--tk-display);
    font-size: clamp(2.2rem, 6vw, 3rem);
    line-height: 1.1;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.tk-conto-sub {
    font-family: var(--tk-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a09589;
}

.tk-conto-segno {
    font-family: var(--tk-display);
    font-size: 1.6rem;
    color: #a09589;
}

/* Il campo è vistosamente un campo: se sembrasse testo nessuno lo
   toccherebbe, e tutta la fascia perderebbe il suo scopo. */
.tk-conto-input {
    width: 5.5rem;
    padding: 0;
    font-family: var(--tk-display);
    font-size: clamp(2.2rem, 6vw, 3rem);
    line-height: 1.1;
    text-align: center;
    color: #f2ece7;
    background: transparent;
    border: 0;
    border-bottom: 3px dashed #a09589;
    border-radius: 0;
    -moz-appearance: textfield;
}

/* Via le freccette su/giù: rubano spazio, spostano il numero dal centro e
   invitano a cliccare invece che a digitare — mentre qui il gesto che
   vogliamo è proprio che scriva il SUO scontrino. La tastiera resta
   numerica sul telefono grazie a inputmode. */
.tk-conto-input::-webkit-outer-spin-button,
.tk-conto-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tk-conto-input:focus {
    outline: none;
    border-bottom-color: var(--tk-red-acceso);
    border-bottom-style: solid;
}

.tk-conto-esito .tk-conto-num {
    color: var(--tk-red-acceso);
}

.tk-conto-chiusa {
    margin: 1.5rem 0 0;
    font-size: 0.9rem;
    color: #cbc0b6;
}

.tk-conto-chiusa strong {
    color: #f2ece7;
}

/* Sul telefono i quattro elementi più i due segni non stanno in riga: a
   capo si spezzerebbero a caso, con i segni orfani. Meglio incolonnarli,
   che si legge come un conto scritto a mano. */
@media (max-width: 30rem) {
    .tk-conto-riga {
        flex-direction: column;
        gap: 0.5rem;
    }

    .tk-conto-segno {
        line-height: 1;
    }
}

.tk-hero-vicino {
    margin: 0.75rem 0 0;
    min-height: 1.4rem;
    font-size: 0.9rem;
}

.tk-link-azione {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--tk-white);
    text-decoration: underline;
    cursor: pointer;
}

.tk-hero-esito {
    display: block;
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: 0.2rem;
}

.tk-hero-numeri {
    font-family: var(--tk-mono);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 1.5rem 0 0;
    opacity: 0.85;
}

/* --- intestazione di sezione: titolo a sinistra, rimando a destra --- */

.tk-sez-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.3rem 1rem;
    margin-bottom: 1rem;
}

.tk-sez-testa h2 {
    margin: 0;
}

.tk-sez-nota {
    font-family: var(--tk-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
}

.tk-mappa {
    height: 360px;
    border-radius: 8px;
    border: 1px solid var(--tk-border);
    margin-bottom: 1.25rem;
}

/* **Il segnaposto delle mappe, nel rosso del sito** (27 agosto 2026).

   Il disegno lo scrive `app/Mappa.php`, che lo riempie con `currentColor`:
   il colore vero sta qui, in un posto solo, e cambia con il resto del sito.

   Resta il rosso anche a tema scuro. Non è una dimenticanza: il segnaposto
   non sta sopra la pagina, sta sopra la cartina, che è chiara in tutti e due
   i temi — schiarirlo per il tema scuro vorrebbe dire schiarirlo sopra uno
   sfondo che non è cambiato.

   L'ombra serve a staccarlo dal disegno sotto, che nei centri abitati è
   fitto: senza, la punta si perde fra gli edifici. */
.tk-segnaposto {
    color: var(--tk-red);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}

/* Il disegno riempie la sua casella: senza, la riga di testo attorno all'SVG
   lo sposterebbe di qualche pixel verso l'alto e la punta non cadrebbe più
   sulle coordinate. */
.tk-segnaposto svg {
    display: block;
}

.tk-lista-locali {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tk-lista-locali li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.2rem 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--tk-border);
}

.tk-lista-locali li:last-child {
    border-bottom: 0;
}

.tk-lista-locali a {
    font-weight: 700;
    text-decoration: none;
}

.tk-lista-locali span {
    font-size: 0.86rem;
    color: var(--tk-fg-mut);
}

.tk-distanza {
    font-style: normal;
    color: var(--tk-fg);
    font-weight: 600;
}

/* --- numeri grandi: quanto costa, detto in tre cifre ---
   A un commerciante interessano prima i soldi e poi tutto il resto. Le
   cifre in Anton fanno il lavoro che altrove farebbe una fotografia. */

.tk-numeroni {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.5rem;
    margin: 1.25rem 0;
}

.tk-numerone {
    display: block;
    font-family: var(--tk-display);
    font-size: clamp(2.6rem, 7vw, 3.6rem);
    line-height: 1;
    color: var(--tk-red);
}

.tk-numerone-eti {
    display: block;
    font-family: var(--tk-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
    margin: 0.35rem 0 0.4rem;
}

.tk-numeroni small {
    display: block;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--tk-fg-mut);
}

.tk-nota-forte {
    border-top: 1px solid var(--tk-border);
    padding-top: 1rem;
    margin-bottom: 0;
}

/* --- passi numerati: il numero è dato dal contatore, non scritto a mano,
   così inserire un passo in mezzo non richiede di rinumerare tutto. --- */

.tk-passi-numerati {
    list-style: none;
    counter-reset: passo;
    padding: 0;
    margin: 1.25rem 0;
}

.tk-passi-numerati li {
    counter-increment: passo;
    position: relative;
    padding: 0 0 1.1rem 3rem;
    line-height: 1.5;
}

.tk-passi-numerati li::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: -0.15rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--tk-red);
    color: var(--tk-white);
    font-family: var(--tk-display);
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tk-passi-numerati li:last-child {
    padding-bottom: 0;
}

/* --- fascia rivolta ai kebabbari --- */

.tk-invito-partner {
    border-left: 4px solid var(--tk-red);
}

.tk-invito-punti {
    font-family: var(--tk-mono);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--tk-fg-mut);
}

/* ============================================================
   CARRELLO E CHECKOUT
   ============================================================ */

/* Il totale non è "un dato fra gli altri": è la cifra su cui la persona
   decide. Prima era un paragrafo qualsiasi. */
.tk-totale {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.3rem 1rem;
    border-top: 2px solid var(--tk-fg);
    margin-top: 1rem;
    padding-top: 0.9rem;
}

.tk-totale-eti {
    font-family: var(--tk-mono);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
}

.tk-totale-cifra {
    font-family: var(--tk-display);
    font-size: clamp(1.8rem, 6vw, 2.4rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tk-totale-riga {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--tk-fg-mut);
    padding: 0.15rem 0;
}

/* Scelte grandi da toccare: ritiro o consegna cambiano prezzo e percorso,
   quindi meritano più di un pallino da 13 pixel. Tutta l'area è
   cliccabile perché l'etichetta avvolge il campo. */
.tk-opzioni {
    display: grid;
    gap: 0.6rem;
    margin: 0.5rem 0 1.25rem;
}

.tk-opzione {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 2px solid var(--tk-border);
    border-radius: var(--tk-radius);
    cursor: pointer;
}

.tk-opzione:hover {
    border-color: var(--tk-border-strong);
}

.tk-opzione input {
    margin: 0.2rem 0 0;
    flex-shrink: 0;
}

.tk-opzione-testo {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tk-opzione-testo strong {
    font-size: 1rem;
}

.tk-opzione-testo small {
    color: var(--tk-fg-mut);
    line-height: 1.4;
}

.tk-opzione:has(input:checked) {
    border-color: var(--tk-red);
    /* Senza ripiego, ora che il token esiste: un `, transparent` avrebbe
       continuato a nascondere un'eventuale cancellazione del token, che è
       esattamente il difetto che questa riga ha avuto per settimane. */
    background: var(--tk-red-bg);
}

.tk-opzione:has(input:checked) .tk-opzione-testo strong {
    color: var(--tk-red);
}

/* Dove sei nel percorso. Il momento di massimo attrito è crearsi
   l'account a metà acquisto: senza sapere quanto manca, si abbandona. */
.tk-fasi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    font-family: var(--tk-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tk-fase {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--tk-fg-mut);
}

.tk-fase::before {
    content: counter(fase);
    counter-increment: fase;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 1px solid var(--tk-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.tk-fasi {
    counter-reset: fase;
}

.tk-fase + .tk-fase {
    margin-left: 0.4rem;
}

.tk-fase.is-corrente {
    color: var(--tk-fg);
    font-weight: 700;
}

.tk-fase.is-corrente::before {
    background: var(--tk-red);
    border-color: var(--tk-red);
    color: var(--tk-white);
}

.tk-fase.is-fatta::before {
    content: "✓";
    background: var(--tk-green);
    border-color: var(--tk-green);
    color: var(--tk-white);
}

/* Il riepilogo è ciò che la persona sta per confermare: va separato dal
   modulo, o si legge come un'altra riga qualsiasi da compilare. */
.tk-riepilogo {
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1.5rem;
    background: var(--tk-bg);
}

.tk-riepilogo-locale {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
}

.tk-riepilogo-dove {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: var(--tk-fg-mut);
    line-height: 1.45;
}

.tk-riepilogo p:last-child {
    margin-bottom: 0;
}

/* CAP e città sulla stessa riga: erano affiancati con stili in linea,
   che nessuno può correggere dal foglio di stile. */
.tk-campi-affiancati {
    display: flex;
    gap: 0.75rem;
}

.tk-campo-stretto {
    flex: 1 1 6rem;
    min-width: 0;
}

.tk-campo-largo {
    flex: 3 1 10rem;
    min-width: 0;
}

/* Riga di ritorno discreta: prima era un pulsante grande che competeva
   con l'azione vera della pagina. */
.tk-indietro {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* ============================================================
   STATO DELL'ORDINE
   In cima va la cosa che serve davvero in mano alla cassa: il
   codice. Non il totale, non lo stato — quelli si leggono dopo.
   ============================================================ */

.tk-ord-codice {
    text-align: center;
    padding: 0.5rem 0 1.25rem;
}

.tk-ord-etichetta {
    font-family: var(--tk-mono);
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
    display: block;
    margin-bottom: 0.25rem;
}

.tk-ord-valore {
    font-family: var(--tk-display);
    font-size: clamp(2.6rem, 13vw, 4rem);
    line-height: 0.95;
    color: var(--tk-red);
    letter-spacing: 0.02em;
    display: block;
}

.tk-ord-nota {
    font-size: 0.86rem;
    color: var(--tk-fg-mut);
    display: block;
    margin-top: 0.3rem;
}

/* Ordine chiuso male: il codice serve ancora a citarlo all'assistenza,
   ma gridarlo in rosso a tutta pagina prometterebbe un ritiro che non
   ci sarà. Stessa struttura, voce più bassa. */
.tk-ord-codice.is-chiuso .tk-ord-valore {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    color: var(--tk-fg-mut);
}

.tk-ord-completo {
    font-family: var(--tk-mono);
    font-size: 0.68rem;
    color: var(--tk-fg-mut);
    display: block;
    margin-top: 0.5rem;
}

/* --- QR di ritiro ---
   Il fondo è bianco fisso anche in tema scuro: un QR chiaro su fondo scuro
   molti lettori non lo leggono, e qui deve funzionare al primo colpo con
   qualcuno che aspetta. */
.tk-ord-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    background: #fff;
    border: 1px solid var(--tk-border);
    border-radius: 12px;
    padding: 1rem;
    margin: 0 auto 1.25rem;
    max-width: 20rem;
}

/* Misura fissa invece di max-width in percentuale: un QR rimpicciolito
   smette di essere letto dai lettori, quindi non deve mai adattarsi al
   contenitore. 180px stanno anche sul telefono più stretto (320px meno i
   padding), e fissare l'ingombro evita che il riquadro salti quando
   l'immagine viene generata dallo script. */
.tk-ord-qr img,
.tk-ord-qr canvas {
    display: block;
    width: 180px;
    height: 180px;
}

/* Istruzione sopra, beneficio sotto: due pesi diversi perché sono due cose
   diverse — una la devi fare, l'altra spiega perché conviene. */
.tk-ord-qr-nota {
    margin: 0;
    line-height: 1.35;
    text-align: center;
    /* Colori espliciti, non ereditati: il riquadro resta bianco anche quando
       la pagina è scura, e i token del tema lì diventerebbero illeggibili. */
    color: #6f655e;
}

.tk-ord-qr-nota strong {
    display: block;
    font-size: 0.95rem;
    color: #191512;
}

.tk-ord-qr-nota span {
    display: block;
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

/* --- passi di avanzamento --- */

.tk-passi {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.tk-passo {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 0 0.85rem;
    position: relative;
    padding-bottom: 1.1rem;
}

.tk-passo:last-child {
    padding-bottom: 0;
}

/* Il filo che unisce i passi parte dal segno e arriva al successivo:
   sull'ultimo non c'è, altrimenti penderebbe nel vuoto. */
.tk-passo:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0.69rem;
    top: 1.5rem;
    bottom: 0.1rem;
    width: 2px;
    background: var(--tk-border-strong);
}

.tk-passo-segno {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid var(--tk-border-strong);
    background: var(--tk-surface);
    position: relative;
    z-index: 1;
}

.tk-passo-titolo {
    font-weight: 700;
    line-height: 1.5rem;
}

.tk-passo-ora {
    display: block;
    font-size: 0.84rem;
    color: var(--tk-fg-mut);
    margin-top: 0.1rem;
}

/* Fatto: pieno, non serve altro.
   In corso: anello rosso spesso, l'unico elemento vuoto ma marcato.
   Futuro: contorno tenue e testo smorzato — c'è, ma non è ancora. */
.tk-passo.is-fatto .tk-passo-segno {
    background: var(--tk-green);
    border-color: var(--tk-green);
}

.tk-passo.is-fatto:not(:last-child)::before {
    background: var(--tk-green);
}

.tk-passo.is-corrente .tk-passo-segno {
    border-color: var(--tk-red);
    border-width: 4px;
}

.tk-passo.is-corrente .tk-passo-titolo {
    color: var(--tk-red);
}

.tk-passo.is-futuro .tk-passo-titolo,
.tk-passo.is-futuro .tk-passo-ora {
    color: var(--tk-fg-mut);
    font-weight: 400;
}

.tk-ord-azioni {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.6rem;
    margin: 1.25rem 0;
}

.tk-ord-azioni .tk-btn {
    width: 100%;
}

/* ============================================================
   SCHEDA DEL LOCALE
   ============================================================ */

.tk-scheda-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

/* Nome e slogan stanno insieme nella colonna di sinistra della riga, con il
   voto a destra. Serve perché la riga è alta quanto l'elemento più alto: da
   fuori, lo slogan sarebbe cominciato sotto il blocco del punteggio invece che
   sotto il nome.

   `flex: 1 1 16rem` e `min-width: 0`: prende lo spazio che avanza, ma può
   anche stringersi e mandare a capo il voto quando lo schermo è stretto —
   senza `min-width: 0` un nome lungo non andrebbe a capo e sfonderebbe la
   riga. */
.tk-scheda-hero-testo {
    flex: 1 1 16rem;
    min-width: 0;
}

/* Lo slogan del locale, subito sotto il nome (27 agosto 2026).

   Più grande del testo normale ma **non** quanto il nome, e in colore
   attenuato: è un sottotitolo, e se pesasse come il titolo la scheda avrebbe
   due nomi. Il tetto di larghezza serve a tenerlo leggibile su schermo largo,
   dove una riga da mille pixel si perde fra una parola e l'altra.

   Nessun margine sotto: a staccarlo da ciò che segue ci pensa la riga stessa,
   e sommandosi farebbero due spazi. */
.tk-scheda-slogan {
    margin: 0.35rem 0 0;
    max-width: 60ch;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--tk-fg-mut);
}

.tk-scheda-nome {
    font-family: var(--tk-display);
    font-size: clamp(2rem, 7vw, 3rem);
    line-height: 0.92;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--tk-fg);
    max-width: 14ch;
}

.tk-scheda-valori {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    text-align: right;
}

.tk-scheda-punt {
    font-family: var(--tk-display);
    font-size: 2.2rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tk-scheda-punt small {
    font-family: var(--tk-body);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--tk-fg-mut);
    margin-left: 0.1em;
}

.tk-scheda-pos {
    font-family: var(--tk-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
}

.tk-scheda-etichette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.tk-etichetta {
    font-family: var(--tk-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
    border: 1px solid var(--tk-border-strong);
    border-radius: 3px;
    padding: 0.18rem 0.5rem;
}

/* ---------- voto sui singoli piatti (facoltativo) ----------
   Chiuso di serie: la recensione di base non deve allungarsi di una riga
   per nessuno, perché ogni domanda in più costa recensioni e le recensioni
   sono ciò che alimenta le classifiche. Si apre solo a chi ha voglia. */

.tk-piatti-stato {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tk-piatti-apri {
    display: block;
    cursor: pointer;
    border: 1px dashed var(--tk-border-strong);
    border-radius: var(--tk-radius-sm);
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.tk-piatti-apri small {
    display: block;
    font-weight: 400;
    color: var(--tk-fg-mut);
    margin-top: 0.2rem;
}

.tk-piatti-apri::before {
    content: "▸ ";
    color: var(--tk-red);
}

.tk-piatti-stato:checked + .tk-piatti-apri::before {
    content: "▾ ";
}

.tk-piatti-stato:not(:checked) + .tk-piatti-apri + .tk-piatti {
    display: none;
}

/* Il fuoco da tastiera deve vedersi: l'interruttore vero è nascosto, quindi
   il contorno va disegnato sull'etichetta, che è ciò che si naviga. */
.tk-piatti-stato:focus-visible + .tk-piatti-apri {
    outline: 2px solid var(--tk-red);
    outline-offset: 2px;
}

.tk-piatti {
    border-left: 3px solid var(--tk-border-strong);
    padding-left: 0.9rem;
    margin-bottom: 1rem;
}

/* Gruppi di scelta della classifica. L'etichetta a sinistra dice quale
   domanda si sta rispondendo: senza, tre file di pastiglie identiche
   sembrano tre file di filtri intercambiabili. */
.tk-clas-gruppo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.7rem;
    margin-bottom: 0.6rem;
}

.tk-clas-gruppo-eti {
    flex: 0 0 7rem;
    font-family: var(--tk-mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
}

.tk-clas-gruppo .tk-chips {
    flex: 1 1 16rem;
    margin: 0;
}

@media (max-width: 45.99rem) {
    /* Su schermo stretto l'etichetta va sopra le sue pastiglie, altrimenti
       si porta via metà della riga utile. */
    .tk-clas-gruppo-eti {
        flex-basis: 100%;
    }
}

/* ---------- consegna sulla scheda pubblica ----------
   Fin dove si arriva, quanto costa, e la risposta secca alla domanda che
   uno si fa prima di ordinare. Prima la scheda diceva solo l'etichetta
   "Consegna a domicilio": tutto il resto si scopriva alla fine del
   checkout, dopo aver composto l'ordine. */

/* **Qui c'erano bordo, angoli, imbottitura e margine propri**, perché fino al
   20 agosto 2026 «Consegna a domicilio» era un blocco riquadrato *dentro* il
   riquadro unico della scheda. Da quando è una `.tk-card` a sé quelle
   dichiarazioni erano diventate una seconda copia peggiore: imbottitura più
   stretta delle altre schede, e un `margin` che nella colonna con `gap` non
   collassa ma si somma — misurato **52px** invece di 32 sotto la riga a due
   colonne, sui locali che hanno la consegna ma non ancora i voti.

   Resta solo l'azzeramento del margine del titolo, che vale per il primo
   `<h2>` della scheda. */
.tk-consegna-info h2 {
    margin-top: 0;
}

.tk-consegna-regole {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.92rem;
    line-height: 1.6;
}

.tk-consegna-fasce {
    margin: 0.3rem 0 0;
    padding-left: 1.1rem;
    list-style: none;
    font-variant-numeric: tabular-nums;
}

.tk-zona-verifica {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tk-border);
}

.tk-zona-titolo {
    margin: 0 0 0.6rem;
    font-weight: 600;
}

/* I due modi di rispondere stanno sulla stessa riga finché ci stanno: sono
   alternative, non passaggi in sequenza. */
.tk-zona-comandi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.tk-zona-comandi input[type="text"] {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--tk-border-strong);
    border-radius: var(--tk-radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--tk-surface);
    color: var(--tk-fg);
}

.tk-zona-oppure {
    font-size: 0.85rem;
    color: var(--tk-fg-mut);
}

.tk-zona-comandi .tk-btn[disabled] {
    opacity: 0.55;
    cursor: default;
}

#tk-zona-esito:empty {
    display: none;
}

#tk-zona-esito .tk-alert {
    margin-bottom: 0;
}

/* Gemella di .tkp-mappa-nota del pannello: la stessa avvertenza serve anche
   qui, perché il cerchio è in linea d'aria e sconfina. */
/* La nota sotto la mappa della scheda pubblica.

   Aveva un margine **negativo** in alto (-0.4rem) e finiva attaccata al bordo
   della mappa, senza un filo d'aria: le tre righe sembravano parte del
   riquadro invece che il suo commento. Tolto il 27 agosto 2026 su
   segnalazione dell'utente — la classe la usa solo questa nota, quindi non
   c'era nient'altro appoggiato a quel valore.

   Ora lo stacco sopra è quello di un paragrafo che segue un'immagine: si vede
   che parla della mappa, senza toccarla. */
.tk-mappa-nota {
    font-size: 0.86rem;
    color: var(--tk-fg-mut);
    line-height: 1.45;
    margin: 0.6rem 0 1.25rem;
}

.tk-etichetta-aperto {
    color: var(--tk-up);
    border-color: var(--tk-up);
}

/* --- barre dei criteri con il trattino della media --- */

.tk-crit-titolo {
    font-family: var(--tk-mono);
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
    margin: 1.5rem 0 0.85rem;
}

.tk-crit {
    margin-bottom: 0.85rem;
}

.tk-crit-testa {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}

.tk-crit-nome {
    font-size: 0.9rem;
}

.tk-crit-val {
    font-family: var(--tk-mono);
    font-size: 0.76rem;
    color: var(--tk-fg-mut);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tk-crit-val b {
    color: var(--tk-fg);
    font-size: 0.88rem;
}

.tk-barra {
    position: relative;
    height: 7px;
    background: var(--tk-surface-2);
    border-radius: 4px;
    border: 1px solid var(--tk-border);
}

.tk-barra i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 3px;
    background: var(--tk-fg-mut);
}

.tk-barra-sopra i { background: var(--tk-up); }
.tk-barra-sotto i { background: var(--tk-down); }

/* Il trattino è la media della piattaforma: sporge sopra e sotto la
   barra perché deve leggersi come un riferimento esterno, non come
   parte del riempimento. */
.tk-barra u {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--tk-fg);
    opacity: 0.7;
}

/* La riga che spiega il prodotto, sotto il titolo (25 agosto 2026).

   Più larga del testo normale ma non quanto la pagina: una riga di prosa
   lunga come una tabella non si legge, si salta. */
.tk-clas-intro {
    max-width: 62ch;
    margin: 0 0 1.4rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--tk-fg-mut);
}

/* Perché una zona non c'è ancora. Sta dentro il gruppo «Dove», sotto le
   pastiglie, e non è un avviso: è la risposta alla domanda che nasce
   guardando un elenco con una voce sola. */
.tk-clas-gruppo-nota {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--tk-fg-mut);
    max-width: 62ch;
}

/* Comandi di pagina della classifica (25 agosto 2026).

   Non riusa la paginazione dei pannelli: quella ha il selettore «per pagina»
   e l'elenco numerato, comandi da strumento di lavoro. Qui la lista è
   ordinata per merito e si scorre, quindi bastano avanti/indietro e il punto
   in cui si è.

   `space-between` invece del `gap`: i due comandi vanno agli estremi e lo
   stato in mezzo, così il pollice li trova sempre nello stesso posto anche
   quando le etichette cambiano lunghezza. */
.tk-clas-pagine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tk-border);
}

.tk-clas-pagine-stato {
    font-size: 0.85rem;
    color: var(--tk-fg-mut);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* Su telefono i tre elementi non ci stanno in fila — misurato a 375px:
   105 + 160 + 101 più i distacchi fanno 385 su 375 disponibili. Andando a
   capo da soli era «Successivi», cioè **il comando più usato**, che finiva
   spaiato sulla riga sotto mentre l'altro restava in alto.

   Qui lo stacco è deliberato: i due comandi tengono la loro riga agli
   estremi, e lo stato scende sotto occupandola tutta. Così i bersagli
   restano dove il pollice li cerca, e a cambiare posizione è solo il testo
   che si legge e non si preme. */
@media (max-width: 560px) {
    .tk-clas-pagine-stato {
        order: 3;
        flex-basis: 100%;
    }
}

/* Il comando che non porta da nessuna parte resta **visibile e spento**, non
   sparisce: se «Precedenti» comparisse solo dalla pagina 2, alla pagina 1 i
   due comandi salterebbero di posto e «Successivi» si troverebbe dove prima
   c'era l'altro. Un bersaglio che si sposta si preme per sbaglio. */
.tk-chip-spento {
    opacity: 0.4;
    cursor: default;
}

.tk-clas-nota {
    margin: 1.25rem 0 0;
    padding: 0.8rem 0.9rem;
    background: var(--tk-surface-2);
    border-radius: var(--tk-radius-sm);
    font-size: 0.8rem;
    color: var(--tk-fg-mut);
    line-height: 1.5;
}

/* su schermo largo l'andamento diventa una colonna sua */
@media (min-width: 46rem) {
    .tk-clas-riga {
        grid-template-columns: 2.4rem minmax(0, 1fr) 6.5rem 5rem 5.2rem;
        align-items: center;
    }

    .tk-clas-destra {
        display: contents;
    }

    .tk-clas-destra .tk-spark {
        justify-self: end;
    }

    .tk-clas-destra .tk-clas-punt {
        justify-self: end;
    }

    .tk-clas-destra .tk-badge {
        justify-self: end;
    }

    .tk-clas-intestazione {
        display: grid;
        grid-template-columns: 2.4rem minmax(0, 1fr) 6.5rem 5rem 5.2rem;
        gap: 0 0.9rem;
        padding: 0.5rem 0;
        border-bottom: 2px solid var(--tk-fg);
        font-family: var(--tk-mono);
        font-size: 0.6rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--tk-fg-mut);
    }

    .tk-clas-intestazione span:nth-child(n+3) {
        text-align: right;
    }
}

@media (max-width: 45.99rem) {
    .tk-clas-intestazione {
        display: none;
    }
}

/* ---------- tessera fedeltà ---------- */

/* Deve somigliare a una tessera vera, non a un riquadro con dentro un
   contatore: è l'unico oggetto del sito che ha il compito di far venire
   voglia di tornare, e un elenco di numeri non lo fa.

   Fondo rosso fisso in entrambi i temi, e non i token di superficie: la
   tessera è un oggetto, non una parte della pagina, e deve staccarsi dallo
   sfondo tanto sul chiaro quanto sullo scuro. */
.tk-tessera {
    background: linear-gradient(140deg, var(--tk-red) 0%, var(--tk-red-dark) 100%);
    color: var(--tk-white);
    border-radius: var(--tk-radius);
    padding: 1rem 1.1rem 1.15rem;
    max-width: 26rem;
}

.tk-tessera-testa {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.tk-tessera-locale {
    font-family: var(--tk-display);
    font-size: 1.25rem;
    letter-spacing: 0.02em;
}

/* Cifre a larghezza fissa: il conto cambia a ogni ordine e senza questo
   il resto della riga si sposterebbe da 9/10 a 10/10. */
.tk-tessera-conto {
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
    font-size: 0.9rem;
}

/* Cinque per riga: due file da cinque si contano a colpo d'occhio, dieci in
   fila no. */
.tk-tessera-timbri {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.tk-tessera-timbro {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tk-tessera-timbro.is-pieno {
    border-style: solid;
    border-color: transparent;
    background: var(--tk-white);
}

.tk-tessera-timbro img {
    width: 62%;
    height: auto;
}

.tk-tessera-timbro span {
    color: var(--tk-red);
    font-size: 1.1rem;
    line-height: 1;
}

.tk-tessera-premio {
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.tk-tessera-nota {
    font-size: 0.87rem;
    opacity: 0.92;
}

.tk-tessera-ferma {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* La tessera piena si annuncia da sola con un bordo chiaro, senza
   animazioni: comparirà mentre il cliente sta facendo altro. */
/* Tessera piena: il bordo bianco pieno c'era ma non si notava — su un
   riquadro già rosso, una cornice in più passa per decorazione.

   Tratteggiato perché il tratteggio è la convenzione del "ritaglia qui" e
   dei buoni sconto: dice da solo che c'è qualcosa da staccare.

   `outline` e non `border`: segue il raggio degli angoli, non entra nel
   calcolo delle dimensioni e quindi non fa muovere il contenuto di un
   pixel quando compare. */
.tk-tessera-completa {
    outline: 3px dashed var(--tk-white);
    outline-offset: 3px;
    animation: tk-tessera-pulsa 0.75s ease-in-out 4;
}

/* Quattro pulsazioni e poi basta. Un elemento che lampeggia per sempre
   diventa rumore che si impara a ignorare, e in una pagina che si tiene
   aperta darebbe fastidio invece che attirare. Il ritmo è lento di
   proposito: sopra le tre pulsazioni al secondo si entra nel territorio
   che può dare problemi a chi soffre di fotosensibilità. */
@keyframes tk-tessera-pulsa {
    0%, 100% { outline-color: var(--tk-white); outline-offset: 3px; }
    50% { outline-color: rgba(255, 255, 255, 0.2); outline-offset: 7px; }
}

/* Chi ha chiesto meno animazioni tiene il bordo tratteggiato fermo: il
   segnale è nel tratteggio, il movimento serviva solo a farlo notare. */
@media (prefers-reduced-motion: reduce) {
    .tk-tessera-completa {
        animation: none;
    }
}

/* L'annuncio del premio, che è la riga per cui esiste tutta la tessera. */
.tk-tessera-evviva {
    display: block;
    font-family: var(--tk-display);
    font-size: 1.35rem;
    letter-spacing: 0.03em;
    margin-bottom: 0.1rem;
}

.tk-tessera-retro {
    max-width: 26rem;
    margin-top: 0.5rem;
    font-size: 0.87rem;
    color: var(--tk-fg-mut);
}

.tk-tessera-retro summary {
    cursor: pointer;
    padding: 0.35rem 0;
}

.tk-tessera-retro ul {
    margin: 0.35rem 0;
    padding-left: 1.1rem;
}

/* Avviso del timbro nel carrello e sull'ordine: una riga, non un riquadro
   che compete col totale. */
.tk-timbro-avviso {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--tk-radius-sm);
    background: var(--tk-surface-2);
    border-left: 3px solid var(--tk-red);
}

.tk-timbro-avviso.is-manca {
    border-left-color: var(--tk-border-strong);
    color: var(--tk-fg-mut);
}

/* Etichetta della tessera fedeltà sulla scheda del partner. Verde come
   «Aperto ora» perché è la stessa specie di informazione: qualcosa che
   questo locale offre adesso. Non esiste la gemella rossa per chi non ce
   l'ha — vedi il commento in partner-pubblico.php. */
.tk-etichetta-tessera {
    color: var(--tk-up);
    border-color: var(--tk-up);
}

/* ---------- interruttore a scorrimento per le caselle di un modulo ----------

   Vive dentro un <form> e si applica al salvataggio, a differenza di quello
   del tema che agisce subito. Da qui due accorgimenti: la casella vera resta
   nel documento (spostata fuori vista ma non `display:none`, o sparirebbe
   anche per la tastiera e per i lettori di schermo), e chi lo usa deve
   dirgli accanto che la modifica va salvata. */
.tk-switch {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.tk-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.tk-switch-cursore {
    position: relative;
    flex: none;
    width: 3.4rem;
    height: 1.85rem;
    border-radius: 999px;
    background: var(--tk-surface-2);
    border: 1px solid var(--tk-border-strong);
    transition: background 0.18s ease, border-color 0.18s ease;
}

.tk-switch-cursore::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.22rem;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: -0.675rem;
    border-radius: 50%;
    background: var(--tk-border-strong);
    transition: transform 0.18s ease, background 0.18s ease;
}

/* Verde e non rosso: qui acceso vuol dire "il servizio è offerto", ed è la
   stessa lingua dell'etichetta sulla scheda pubblica. */
.tk-switch input:checked + .tk-switch-cursore {
    background: var(--tk-up);
    border-color: var(--tk-up);
}

.tk-switch input:checked + .tk-switch-cursore::after {
    transform: translateX(1.5rem);
    background: var(--tk-white);
}

.tk-switch input:focus-visible + .tk-switch-cursore {
    outline: 2px solid var(--tk-red);
    outline-offset: 2px;
}

.tk-switch input:disabled + .tk-switch-cursore {
    opacity: 0.5;
}

/* ---------- Variante acceso/spento a colori ----------

   Il grigio dice "non acceso" ma non dice "spento": in un elenco di venti
   righe da scorrere in fretta, la differenza fra grigio e verde si nota meno
   di quella fra rosso e verde. Serve dove la riga è una delle tante e la
   risposta dev'essere leggibile con la coda dell'occhio.

   Spento è --tk-down e NON --tk-red: il rosso è il colore del marchio, e
   usarlo per dire "disattivato" gli insegnerebbe a significare "sbagliato"
   su un sito che è rosso dappertutto. --tk-down è il rosso-terra già usato
   per le discese in classifica, quindi vuol già dire "verso il basso". */
.tk-switch-stato .tk-switch-cursore {
    background: var(--tk-down);
    border-color: var(--tk-down);
}

.tk-switch-stato .tk-switch-cursore::after {
    background: var(--tk-white);
}

@media (prefers-reduced-motion: reduce) {
    .tk-switch-cursore,
    .tk-switch-cursore::after {
        transition: none;
    }
}

/* ---------- "premimi": scuotimento di un bottone che va premuto ----------

   Serve quando una modifica è stata fatta ma non ancora salvata, e il
   bottone che la registra è l'unica cosa che manca. Si applica da JavaScript
   togliendo e rimettendo la classe, così l'animazione riparte a ogni
   cambiamento invece di girare una volta sola.

   Due giri e basta: un bottone che si agita all'infinito diventa un tic
   nervoso della pagina, e dopo dieci secondi si guarda altrove. La
   rotazione è piccola di proposito — deve farsi notare con la coda
   dell'occhio, non far ballare l'interfaccia. */
@keyframes tk-scuoti {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(-3deg); }
    30% { transform: rotate(3deg); }
    45% { transform: rotate(-2deg); }
    60% { transform: rotate(2deg); }
    75% { transform: rotate(-1deg); }
}

.tk-scuoti {
    animation: tk-scuoti 0.55s ease-in-out 2;
}

/* Chi ha chiesto meno animazioni non perde niente: il messaggio ce l'ha già
   scritto, lo scuotimento serviva solo a farglielo notare. */
@media (prefers-reduced-motion: reduce) {
    .tk-scuoti {
        animation: none;
    }
}

/* L'avviso "hai una modifica non salvata". Rosso perché non è una nota di
   contorno: se non si agisce, quello che si è appena fatto non esiste. */
.tk-da-salvare {
    color: var(--tk-red);
    font-weight: 600;
}

/* **La barra di salvataggio che resta a vista.** *(19 agosto 2026)*

   Compare solo quando ci sono modifiche non salvate **e** nessun «Salva» è
   visibile: serve ai moduli lunghi che non sono divisi in riquadri — una
   tabella di prezzi, l'elenco delle impostazioni — dove il bottone in fondo
   sta fuori schermo per tutto il tempo in cui si lavora.

   In basso e centrata, non in alto: là si guarda per capire *dove si è*,
   qui per fare qualcosa. E staccata dal bordo, così non sembra parte della
   finestra del browser.

   `z-index` alto ma non assurdo: deve stare sopra al contenuto, non sopra a
   un'eventuale finestra di conferma. */
/* Entra scorrendo dal basso: la barra compare mentre si guarda altrove — è
   il suo scopo — e un movimento breve la fa notare senza doverla cercare.
   Chi ha chiesto meno animazioni la vede comparire e basta. */
@keyframes tk-salva-entra {
    from {
        opacity: 0;
        transform: translate(-50%, 0.75rem);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.tk-salva-fisso {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    animation: tk-salva-entra 0.18s ease-out;
    /* **1200 e non 60.** Il primo valore era «alto ma non assurdo», scelto
       pensando al contenuto della pagina. Non bastava: **Leaflet arriva a
       1000** per i propri comandi, e su «Dati attività» la barra cade proprio
       sopra la mappa — il pulsante spariva sotto le tessere mentre il testo,
       che resta a sinistra della mappa, si vedeva benissimo. Un pulsante
       mezzo nascosto è peggio di nessun pulsante, perché fa sembrare rotta
       tutta la barra.

       Da tenere presente per qualunque altro strato: **la mappa è l'elemento
       più “alto” del progetto**, e qualsiasi cosa debba starle sopra parte da
       lì, non dal contenuto normale. */
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: calc(100% - 2rem);
    padding: 0.75rem 1rem;
    background: var(--tk-surface);
    /* **Bordo rosso e ombra profonda: senza, non si nota.**

       La prima versione aveva il bordo neutro, e in tema scuro il fondo della
       barra era quasi quello della pagina: c'era, ma l'utente ha scritto di
       non vederla. Il rosso non è decorazione — è il colore che questo stato
       ha già sull'avviso «hai modifiche non salvate», quindi la barra si
       riconosce per quello che è invece che per dove sta.

       L'ombra la stacca dal contenuto sotto, che è l'altra metà del
       problema: senza, sembrava un riquadro della pagina rimasto lì. */
    border: 2px solid var(--tk-red);
    border-radius: var(--tk-radius);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}

/* `hidden` da solo perderebbe contro `display: flex`: senza questa riga la
   barra resterebbe visibile sempre — è la trappola classica dell'attributo
   `hidden` su un elemento a cui il foglio assegna un `display`. */
.tk-salva-fisso[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .tk-salva-fisso {
        animation: none;
    }
}

.tk-salva-fisso .tk-da-salvare {
    margin: 0;
    font-size: 0.9rem;
}

@media (max-width: 560px) {
    /* Su schermo stretto il testo lungo spingerebbe il bottone fuori: resta
       il bottone, che è la parte che serve. L'avviso c'è comunque accanto al
       campo modificato. */
    .tk-salva-fisso .tk-da-salvare {
        display: none;
    }
}

/* ---------- il menù dentro il carrello ----------

   I prodotti veri elencati sotto il nome del menù: è quello che arriverà, e
   vederlo qui è l'unico modo perché il cliente si accorga ORA di aver scelto
   male invece che a tavola. */
.tk-menu-righe {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0 0 0 0.9rem;
    border-left: 2px solid var(--tk-border-strong);
    font-size: 0.9rem;
}

.tk-menu-righe li {
    padding: 0.15rem 0;
}

/* ---------- comporre un menù ---------- */

.tk-menu-posto {
    margin: 1.25rem 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tk-border);
}

.tk-menu-posto > h2 {
    font-size: 1.05rem;
    margin: 0 0 0.6rem;
}

/* Le scelte di un posto sono alternative fra loro: stanno larghe e
   distanziate, perché sbagliare qui vuol dire ricevere un altro piatto. */
.tk-menu-scelta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    cursor: pointer;
}

/* Il menù dentro il riepilogo di un ordine: la stessa forma del carrello, in
   una tabella. La riga si stacca da quelle sciolte con un filo di aria e un
   fondo appena diverso, o le tre voci del pacchetto sembrano tre articoli. */
.tk-ordine-menu > td {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    background: var(--tk-surface-2);
    vertical-align: top;
}

.tk-ordine-menu .tk-menu-righe {
    margin-top: 0.4rem;
}

/* «Hai risparmiato CHF X con questo menù».

   Verde e non rosso: è una buona notizia, e in questo progetto il verde è
   già il colore di ciò che si aggiunge e di chi sale in classifica. In rosso
   sembrerebbe un avviso, cioè il contrario. */
.tk-menu-risparmio {
    margin-top: 0.4rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--tk-up);
}

/* ---------- arrivo da un'ancora ----------

   Un link con `#` porta il browser al punto giusto, ma **senza dire che è
   successo**: la pagina appare già a metà, e chi arriva non sa se ha
   sbagliato clic o se è dove doveva. Sono due cose distinte da risolvere —
   il movimento racconta il tragitto, il lampo indica l'arrivo — e servono
   tutte e due.

   Nato per «Metti il segnaposto» sul riepilogo del partner: «Dove siete» è
   l'ultimo riquadro di `attivita.php` e comincia a 667px, cioè fuori dallo
   schermo su un portatile. Vale però per qualunque ancora del sito, ed è
   scritto qui e non in `partner.css` per questo. */

/* Lo stacco dal bordo: senza, il riquadro arriva incollato in cima e sembra
   tagliato. Sta su `:target` e non su un id preciso — così ogni ancora
   futura lo eredita senza che nessuno debba ricordarsene. */
:target {
    scroll-margin-top: 1.5rem;
}

/* **Niente `scroll-behavior: smooth`, ed è una scelta misurata.**

   Sembrava l'aggiunta ovvia: il tragitto che scorre racconta da sé perché la
   pagina è a metà. Provato, e no — lo scorrimento morbido è **guidato dai
   fotogrammi**. Misurato il 20 agosto 2026 su una scheda che non stava
   disegnando: con `smooth` perfino un `scrollTo(0, 400)` esplicito lasciava
   `scrollY` a 0; con `auto`, 400 subito.

   Vuol dire che appendere l'arrivo all'ancora a un'animazione lo rende
   **condizionato**: basta una scheda in secondo piano, un caricamento lento o
   un tocco che interrompe lo scorrimento e il partner resta in cima, cioè
   esattamente al difetto che l'ancora doveva chiudere. Senza, il browser
   posiziona il documento sul bersaglio prima di disegnarlo: la pagina si apre
   già al punto giusto, sempre.

   Non si perde niente: oggi nel sito non esiste **nessuna** ancora dentro la
   stessa pagina, che è l'unico caso in cui il morbido si sarebbe visto. Se un
   domani ne nasce una, va acceso lì e non qui — su `html` prenderebbe di
   nuovo anche gli arrivi da fuori. */

/* Il lampo: un anello rosso che si spegne da solo.

   Una sola volta e non un colore che resta: `:target` rimane vero finché non
   si cambia ancora, quindi un fondo colorato sarebbe rimasto lì per tutta la
   visita — e un riquadro perennemente evidenziato smette di voler dire
   qualcosa. `box-shadow` e non `border`: il bordo sposterebbe il contenuto di
   3px al momento dell'arrivo. */
@keyframes tk-ancora-arrivo {
    0% {
        box-shadow: 0 0 0 3px var(--tk-red);
    }

    60% {
        box-shadow: 0 0 0 3px var(--tk-red);
    }

    100% {
        box-shadow: 0 0 0 3px transparent;
    }
}

.tk-card:target {
    animation: tk-ancora-arrivo 2.2s ease-out 1;
}

/* Quando l'ancora è un sottotitolo dentro un riquadro condiviso — «Ritiro e
   consegna» sta nella stessa scheda di «Contatti» — l'anello attorno alla
   scheda intera indicherebbe anche la metà sbagliata. Qui si accende il
   titolo, che è la cosa che si stava cercando. */
@keyframes tk-ancora-titolo {
    0%,
    60% {
        color: var(--tk-red);
    }

    100% {
        color: inherit;
    }
}

.tkp-sotto-sezione:target {
    animation: tk-ancora-titolo 2.2s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
    .tk-card:target,
    .tkp-sotto-sezione:target {
        animation: none;
    }
}

/* ---------- la barra del carrello ----------

   Era scritta come `style="..."` dentro il PHP. Spostata qui quando la barra
   è diventata condivisa fra la scheda pubblica e `menu.php` (20 agosto 2026):
   tre dichiarazioni ripetute in una stringa PHP sono tre cose che si possono
   dimenticare in una delle due copie.

   Resta `display` inline nel PHP, e solo quello: è lo stato — carrello pieno
   o vuoto — e il JavaScript lo riscrive per accendere la barra dopo il primo
   prodotto senza ricaricare la pagina. */
.tk-barra-carrello {
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* ---------- il carrello diviso in sezioni ----------

   20 agosto 2026. Era un riquadro bianco solo, dall'elenco dei prodotti fino
   a «Procedi»: quattro momenti diversi — controllare, aggiungere, guardare il
   totale, scegliere come riceverlo — senza niente che li separasse. Il perché
   completo sta in testa al blocco HTML di `carrello.php`. */

/* La testa vive sul grigio, fuori dai riquadri, quindi non eredita più le
   regole di `.tk-card h1`: il titolo va rivestito qui o tornerebbe al corpo
   enorme predefinito del browser. */
/* **Il titolo di una pagina che vive sul grigio, fuori dai riquadri.**
   *(Generalizzata il 22 agosto 2026.)*

   Nasceva come `.tk-carrello-testa h1`, cioè legata a una pagina sola. Quando
   l'area cliente si è divisa in più pagine è servito lo stesso identico
   titolo, e la scelta era fra una seconda copia e un nome che dicesse la cosa
   invece del posto. Oggi la stessa giornata ha già mostrato dove porta la
   prima strada: i tetti dei campi erano in due copie e avevano preso valori
   diversi senza che nessuno lo decidesse.

   Serve perché `.tk-card h1` non arriva qui: fuori da un riquadro il titolo
   tornerebbe al corpo enorme predefinito del browser. */
.tk-titolo-pagina,
.tk-carrello-testa h1 {
    margin: 0;
    font-size: 1.45rem;
    letter-spacing: -0.02em;
    color: var(--tk-fg);
}

/* **Il riquadro da cui non si torna indietro**, e le larghezze dei campi
   dentro una riga. *(Portate qui dal pannello partner il 22 agosto 2026.)*

   Erano tutte scritte in `partner.css` perché lì sono servite per prime, non
   perché appartengano al partner: chiudere un account e mettere un CAP
   accanto a una città sono cose che fa anche il cliente. Costruendo la sua
   pagina «Il mio account» stavo per inventare `.tk-zona-pericolo`, che è
   `.tk-card-pericolo` con un altro nome — **quarta duplicazione della stessa
   giornata**, dopo i tetti dei campi, lo scorrimento delle tabelle e il
   titolo di pagina.

   I nomi `tkp-` restano nei selettori perché sono usati in ventitré punti del
   pannello: rinominarli sarebbe un secondo cambiamento dentro il primo. La
   **dichiarazione però è una sola**, quindi non possono più divergere — che
   era tutto il problema. */
.tk-card-pericolo {
    border-color: var(--tk-danger);
}

/* Il campo che si prende lo spazio avanzato, quando ce n'è uno solo di
   lunghezza variabile in mezzo a campi fissi: una città accanto a un CAP,
   un motivo accanto a una data. */
.tk-riga-campi .tk-campo-cresce,
.tk-riga-campi .tkp-campo-cresce {
    flex: 1 1 12rem;
}

/* Un CAP, un raggio in chilometri, un importo in franchi: due o tre cifre.
   Stirati per tutta la colonna sembrano campi da riempire con una frase, e
   chi legge l'etichetta di sfuggita ci prova. */
.tk-field.tk-campo-stretto input,
.tk-field.tk-campo-stretto select,
.tk-field.tkp-campo-stretto input,
.tk-field.tkp-campo-stretto select {
    max-width: 9rem;
}

/* Una data, un giorno della settimana: più lunghi di un numero, molto più
   corti di una riga di pagina. */
.tk-field.tk-campo-stretto-medio input,
.tk-field.tk-campo-stretto-medio select,
.tk-field.tkp-campo-medio input,
.tk-field.tkp-campo-medio select {
    max-width: 13rem;
}

/* Titolo a sinistra, azione a destra, e allineati fra loro.

   `flex-wrap` perché su telefono «Il tuo ordine» e «Svuota carrello» non ci
   stanno affiancati: lì il pulsante va sotto invece di stringere il titolo
   fino a spezzarlo. */
.tk-sezione-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.tk-sezione-testa h2 {
    margin: 0;
}

.tk-svuota-modulo {
    margin: 0;
}

/* Un pulsante piccolo, finalmente con un nome.

   Serviva già in tre punti — l'apertura della scheda pubblica dal ticket, i
   comandi delle tabelle admin — e ogni volta era scritto come `style=` dentro
   il PHP, con numeri leggermente diversi. Averlo qui vuol dire che il
   prossimo non ne inventa un quarto paio. */
.tk-btn-piccolo {
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
}

/* «La tua tessera è piena 🎉» dentro «Come lo vuoi».

   È un riquadro dentro un riquadro: finché il carrello era un blocco unico
   bastava `.tk-card` a staccarlo, ma su un fondo ora bianco resterebbe bianco
   su bianco con un filo di bordo. Il verde è quello di chi sale in classifica
   e di ciò che si guadagna — qui il cliente sta per usare un premio, che è
   l'unica buona notizia della pagina. */
.tk-premio-scelta {
    border-color: var(--tk-up);
    background: color-mix(in srgb, var(--tk-up) 8%, var(--tk-surface));
}

/* ---------- la conferma che si vede sempre ----------

   20 agosto 2026, segnalato dall'utente. La conferma «aggiunto al carrello»
   compariva **accanto al prodotto**, e su telefono quello è quasi sempre il
   posto sbagliato: aperto l'elenco delle salse, spuntato e tolto, si preme
   «Aggiungi al carrello» in fondo al riquadro — e a quel punto il nome del
   prodotto è scorso via da un pezzo, sopra il bordo dello schermo. Il
   messaggio c'era, semplicemente **nessuno poteva vederlo**, e l'impressione
   era che il pulsante non funzionasse.

   La cura è lo stesso principio della barra di salvataggio del pannello
   partner: la risposta va **dove sta l'occhio**, non dove sta il dato. In
   basso e non in alto perché è lì che si è appena premuto.

   Tre cose imparate a caro prezzo su `.tk-salva-fisso`, applicate qui subito
   invece che dopo una segnalazione:
   - **z-index 1200**, perché Leaflet arriva a 1000 e questa pagina un domani
     potrebbe avere una mappa;
   - **bordo colorato e ombra**, o in tema scuro il riquadro si confonde con
     la pagina — «c'è ma non si vede» è già successo una volta;
   - **il colore dice l'esito**, verde o rosso, così la conferma si riconosce
     prima di leggerla. */
.tk-conferma-fissa {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: calc(100% - 2rem);
    padding: 0.8rem 1.1rem;
    background: var(--tk-surface);
    color: var(--tk-fg);
    border: 2px solid var(--tk-up);
    border-radius: var(--tk-radius);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
    font-weight: 600;
    animation: tk-conferma-entra 0.18s ease-out;
    /* **Trasparente ai tocchi, tranne dove serve.**

       Comparendo in basso, il riquadro finisce sopra il pulsante appena
       premuto — misurato: si sovrappone. Senza questa riga, per i secondi
       della conferma il «+» non si potrebbe premere di nuovo, e chi vuole due
       kebab toccherebbe due volte a vuoto arrivando alla stessa conclusione
       da cui siamo partiti: «non funziona».

       Il link «→ 🛒» se la riaccende per sé (`pointer-events: auto` più
       sotto). È il modo di avere tutte e due le cose: il riquadro resta un
       velo che lascia passare i tocchi, e l'unico punto che deve riceverli è
       anche l'unico che li riceve. */
    pointer-events: none;
}

/* La scorciatoia al carrello dentro la conferma.

   `pointer-events: auto` è ciò che la rende premibile dentro un riquadro che
   non lo è. **L'area minima è 44px**, non la dimensione del testo: è un
   bersaglio che compare per cinque secondi e va centrato col pollice mentre
   si tiene il telefono con una mano — un link grande quanto due caratteri
   sarebbe un invito a mancarlo.

   Sta a destra e staccata dal testo: dentro un riquadro che si legge, un
   pezzo premibile deve sembrare premibile prima che qualcuno lo provi. */
.tk-conferma-azione {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.75rem;
    margin-left: auto;
    border-radius: var(--tk-radius-sm);
    background: var(--tk-red);
    color: #fff;
    font-size: 1.15rem;
    text-decoration: none;
    white-space: nowrap;
}

/* **Il carrello è un disegno, non l'emoji.**

   L'emoji 🛒 prendeva la dimensione del testo e si portava dietro i propri
   colori: su un fondo rosso restava colorata invece che bianca, e su telefono
   veniva troppo piccola per riconoscerla — segnalato dall'utente, che su
   desktop la vedeva bene e su telefono no.

   Un disegno risolve tutte e due le cose insieme: `1.5em` lo rende grande
   quanto serve indipendentemente dal corpo del testo, e `currentColor` gli fa
   prendere il bianco del pulsante. Nessun file da caricare, nessun carattere
   di icone: sta nella pagina. */
/* **Su telefono la conferma va su due righe, non su tre colonne.**

   Segnalato dall'utente. In larghezza il riquadro sta stretto, e con tutto
   su una riga sola l'unica cosa che poteva stringersi era il testo: il
   risultato era il visto a sinistra, il messaggio impilato su tre righe in
   mezzo, e il carrello a destra — tre colonne alte e magre.

   Sotto i 560px il testo prende tutta la riga insieme al visto, e il
   pulsante scende sotto. `flex-basis: 100%` e non un `<br>`: è ciò che lo
   manda a capo **e** lo allarga per tutto il riquadro, cioè il bersaglio più
   grande possibile proprio dove serve — sul telefono, con il pollice.

   Sopra i 560px resta tutto su una riga: lì lo spazio c'è, e mandare a capo
   un pulsante che ci sta è solo un riquadro più alto per niente. */
@media (max-width: 560px) {
    .tk-conferma-fissa {
        flex-wrap: wrap;
        /* **Larghezza dichiarata, non `max-width`.** Un elemento `fixed` si
           stringe sul contenuto, e dando al testo il permesso di rimpicciolirsi
           (`flex: 1 1 0` qui sotto) si stringeva ancora di più: misurato 181px
           su uno schermo da 380, con il messaggio su quattro righe dentro una
           colonna magra. Il `max-width` non poteva impedirlo — mette un tetto,
           non un pavimento. */
        width: calc(100% - 2rem);
    }

    /* Il messaggio si prende quello che avanza sulla prima riga accanto al
       visto. `min-width: 0` perché un elemento flex non scende sotto la
       larghezza del suo contenuto se non glielo si dice — senza, una parola
       lunga spingerebbe di nuovo il pulsante fuori posto. */
    .tk-conferma-fissa > span {
        flex: 1 1 0;
        min-width: 0;
    }

    .tk-conferma-azione {
        flex-basis: 100%;
        margin-left: 0;
    }
}

.tk-icona-carrello {
    width: 1.5em;
    height: 1.5em;
    /* La ruota del carrello sfiora il bordo inferiore del riquadro di
       disegno: senza questo, accanto alla freccia sembra appoggiata più in
       basso invece che centrata. */
    margin-bottom: -0.1em;
}

.tk-conferma-azione:hover,
.tk-conferma-azione:focus-visible {
    background: var(--tk-red-dark);
    color: #fff;
}

.tk-conferma-fissa.is-errore {
    border-color: var(--tk-red);
}

/* Il segno prima del testo: a colpo d'occhio dice l'esito anche a chi
   distingue male il verde dal rosso, che è la ragione per cui non ci si
   affida al solo bordo. */
.tk-conferma-fissa::before {
    content: "✓";
    font-size: 1.1rem;
    color: var(--tk-up);
}

.tk-conferma-fissa.is-errore::before {
    content: "✕";
    color: var(--tk-red);
}

@keyframes tk-conferma-entra {
    from {
        opacity: 0;
        transform: translate(-50%, 0.75rem);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tk-conferma-fissa {
        animation: none;
    }
}

/* ---------- la scheda pubblica del locale ----------

   20 agosto 2026. Era una colonna sola dentro un riquadro solo, larga 1100px:
   una tabella di orari da «Lunedì 11:00–14:00» e un indirizzo su quella
   larghezza sprecavano due terzi dello spazio, e la mappa finiva due
   schermate sotto l'indirizzo che disegna. Ora sono riquadri affiancati; il
   ragionamento sta nei commenti di `partner-pubblico.php`. */

/* La mappa non ha piu' `style=` scritto nel PHP. Piu' alta di prima (260 →
   300) perche' in mezza pagina e' larga la meta': mantenendo l'altezza di
   quando era larga quanto tutta la pagina sarebbe diventata una feritoia. */
.tk-mappa-scheda {
    height: 300px;
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius-sm);
    margin-top: 0.75rem;
}

/* Il telefono e' un link `tel:`: su telefono chiama, su desktop non da'
   fastidio a nessuno. Su una scheda dove metà dei locali non riceve ordini
   online, chiamare È l'azione principale. */
.tk-scheda-contatti {
    margin-top: 0;
    line-height: 1.7;
}

/* ---------- il conto alla rovescia per recensire ----------

   22 agosto 2026. Le recensioni sono il motore della classifica, e la
   classifica è il prodotto: un'azione che si può fare per sempre non si fa
   mai. Il perché della scadenza sta in `app/FinestraRecensione.php`. */
.tk-recensione-scade {
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
    color: var(--tk-gray);
}

/* L'ultimo giorno cambia colore, non corpo: è il momento in cui la riga deve
   farsi notare, e ingrandirla la farebbe sembrare un avviso di errore. */
.tk-recensione-scade.is-ultimo {
    color: var(--tk-red);
}

.tk-recensione-scade.is-scaduta {
    font-style: italic;
}

/* Una recensione tolta dalla classifica resta visibile a chi l'ha scritta —
   farla sparire farebbe credere che il sito perda i dati — ma va detto che
   non conta più. In sordina e non in rosso: non è un errore di chi legge, e
   un allarme su una decisione già presa non serve a nessuno. */
.tk-recensione-invalidata {
    color: var(--tk-gray);
    font-style: italic;
}

/* ---------- la vetrina dell'area cliente ----------

   22 agosto 2026. Quattro riquadri che dicono un numero e portano a una
   pagina, più l'invito a recensire quando c'è. Il perché sta in testa a
   `utente/index.php`. */

.tk-riquadri {
    display: grid;
    /* Come le mattonelle del menù: `auto-fill` invece delle media query, così
       le colonne calano da sole — due su desktop, una su telefono — e non c'è
       nessuna soglia da tenere allineata al contenuto. */
    /* **24rem, e il numero viene dal risultato che si vuole.** Con 17rem la
       griglia faceva tre colonne, e con quattro riquadri il quarto restava
       orfano su una riga sua — l'utente aveva chiesto simmetria. A 24rem
       (384px) su una colonna da 1068 stanno due riquadri, quindi 2×2 su
       desktop e uno per riga su telefono. Con tre riquadri — quando la
       tessera fedeltà è spenta — diventa 2+1, che è il meglio possibile con
       un numero dispari. */
    /* **`min(100%, …)` e non `24rem` secco**, o su telefono la pagina scorre
       di lato: `minmax` con un minimo più largo dello schermo non lo riduce,
       lo sfonda. Misurato — 384px di minimo contro 356 di schermo — e succede
       solo sotto i 24rem, cioè esattamente dove nessuno guarda mentre
       disegna su un monitor grande. Le mattonelle del menù non ne soffrivano
       perché il loro minimo, 15rem, ci sta comunque. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    gap: var(--tk-gap-blocchi);
    /* I riquadri hanno testi di lunghezza diversa e i pulsanti finirebbero a
       altezze diverse: qui `stretch` è quello che li allinea, ed è il
       contrario della scelta fatta sul menù — là una scheda che si allargava
       trascinava le vicine, qui non si allarga niente. */
    align-items: stretch;
}

.tk-riquadro {
    display: flex;
    flex-direction: column;
}

.tk-riquadro h2 {
    margin-top: 0;
}

/* Il pulsante in fondo, sempre: `margin-top: auto` mangia lo spazio che
   avanza, così i riquadri di una fila hanno i pulsanti sulla stessa linea
   anche con testi di lunghezza diversa. */
.tk-riquadro .tk-btn {
    margin-top: auto;
    align-self: flex-start;
}

/* Il numero è la cosa che si legge da lontano: è per quello che esiste la
   vetrina. Tabular-nums perché due riquadri affiancati con «12» e «7» non
   devono avere le cifre di larghezza diversa. */
.tk-riquadro-numero {
    margin: 0.2rem 0 0;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--tk-red);
    font-variant-numeric: tabular-nums;
}

/* Il riquadro vuoto non mostra uno zero gigante. Un cliente appena iscritto
   vedrebbe quattro zeri, che è una prima impressione peggiore di una frase —
   ed è l'errore che il pannello partner aveva già fatto, scoperto solo
   guardandolo con un account vuoto. */
.tk-riquadro-vuoto {
    margin: 0.2rem 0 0.8rem;
    color: var(--tk-gray);
}

/* Un premio pronto è l'unica notizia lieta della pagina, e si vede. */
.tk-riquadro-premio {
    border-color: var(--tk-up);
}

/* ---------- l'invito a recensire ---------- */

.tk-da-recensire {
    border-color: var(--tk-red);
}

.tk-elenco-recensire {
    list-style: none;
    margin: 0.8rem 0 0;
    padding: 0;
}

.tk-elenco-recensire li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--tk-border);
}

/* Il tempo che resta si colora solo quando è poco: se fosse sempre rosso non
   distinguerebbe «hai due settimane» da «scade oggi», che è tutta la ragione
   per cui il conto alla rovescia esiste. */
.tk-scade-oggi {
    color: var(--tk-red);
    font-weight: 700;
}

/* =========================================================================
   I grafici di app/Grafico.php
   -------------------------------------------------------------------------
   Stanno qui e non in partner.css anche se oggi li usa solo il pannello: la
   classe che li disegna serve anche a «Chi si è mosso» in home e alle
   statistiche admin, e uno stile chiuso in un pannello renderebbe il disegno
   inutilizzabile altrove — è precisamente come `tk-ordini-barra` era rimasta
   inservibile fuori dal pannello partner, e il rimedio è lo stesso: il nome
   dice la funzione, il foglio è quello condiviso.

   L'SVG arriva senza attributi di stile: colori, spessori e dimensioni del
   testo vivono qui, così cambiano col tema come tutto il resto.
   ========================================================================= */

/* La barra divisa in due (`Grafico::barraDivisa`): un rettangolo solo, ogni
   pezzo largo quanto la sua quota. Sta in `site.css` e non nel foglio
   dell'admin perché la disegnano già due pagine e non c'è niente di
   amministrativo in un rapporto fra due numeri. */
.tk-barra-divisa {
    display: flex;
    width: 100%;
    height: 1.6rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--tk-gray-light);
}

.tk-barra-divisa > span {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Senza questo un pezzo strettissimo verrebbe allargato dal suo testo, e
       la larghezza smetterebbe di essere la quota — cioè la barra mentirebbe
       proprio nel caso in cui la differenza è più netta. */
    min-width: 0;
    color: var(--tk-white);
    font-size: 0.78rem;
    line-height: 1;
}

.tk-barra-divisa-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.1rem;
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
}

.tk-barra-divisa-voce i {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    vertical-align: -0.05rem;
}

.tk-barra-divisa-vuota {
    margin: 0;
    color: var(--tk-fg-mut);
}

.tk-grafico-svg {
    display: block;
    width: 100%;
    height: auto;
    /* Il testo dentro l'SVG eredita il carattere della pagina: senza, i
       browser usano il loro serif predefinito e le etichette sembrano di un
       altro sito. */
    font-family: var(--tk-body);
    overflow: visible;
}

.tk-grafico-griglia {
    stroke: var(--tk-border);
    stroke-width: 1;
}

.tk-grafico-linea {
    fill: none;
    stroke: var(--tk-red-fondo);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.tk-grafico-punto {
    fill: var(--tk-red-fondo);
}

.tk-grafico-eti {
    font-size: 11px;
    fill: var(--tk-fg-mut);
    font-variant-numeric: tabular-nums;
}

/* La nota privata al locale, sulla pagina del «grazie» dopo la recensione.
   Staccata dal voto da un filo di bordo: è un'altra cosa dal punteggio, e
   confonderle sarebbe il difetto peggiore — il cliente deve capire a colpo
   d'occhio che quello che scrive qui non è pubblico e non cambia le stelle. */
.tk-nota-privata {
    margin-top: 1.2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--tk-border);
}

.tk-nota-privata > * + * {
    margin-top: 0.6rem;
}

.tk-nota-privata textarea {
    width: 100%;
    min-height: 5.5rem;
    resize: vertical;
}

/* =========================================================================
   La bacheca: livello e medaglie
   -------------------------------------------------------------------------
   Sta in site.css e non in un foglio dell'area cliente perché la stessa
   bacheca serve anche al partner, dentro «Il mio andamento» — e un foglio
   chiuso in un pannello la renderebbe inutilizzabile nell'altro.
   ========================================================================= */

/* La barra del progresso, usata sia per il livello sia per ogni medaglia
   bloccata. È il progresso a tirare: una medaglia mancante disegnata come
   sagoma grigia dice solo «non ce l'hai», questa dice quanto manca. */
.tk-barra-progresso {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--tk-border);
    overflow: hidden;
    margin: 0.4rem 0 0.3rem;
}

.tk-barra-progresso i {
    display: block;
    height: 100%;
    background: var(--tk-red-fondo);
}

.tk-livello-nome {
    font-size: 1.35rem;
    margin-bottom: 0.2rem;
}

/* Lo stato vuoto non si scrive in piccolo: al lancio è la forma normale di
   questa pagina, e per settimane l'unica che qualcuno vedrà. */
.tk-vuoto {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.tk-medaglie {
    list-style: none;
    margin: 0.8rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.8rem;
}

.tk-medaglia {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--tk-border);
    border-radius: 8px;
    background: var(--tk-surface-2);
}

/* Il colore marca l'eccezione: le prese sono poche all'inizio, e sono loro a
   doversi staccare dal resto. */
.tk-medaglia-presa {
    border-color: var(--tk-wait);
    background: var(--tk-wait-bg);
}

.tk-medaglia-disco {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    border: 2px dashed var(--tk-border-strong);
    color: var(--tk-fg-mut);
}

.tk-medaglia-presa .tk-medaglia-disco {
    border: 0;
    background: var(--tk-wait);
    color: var(--tk-white);
}

.tk-medaglia-nome {
    font-weight: 600;
    line-height: 1.2;
}

.tk-medaglia-cond {
    font-size: 0.85rem;
    color: var(--tk-fg-mut);
    line-height: 1.35;
}

.tk-medaglia-progresso {
    font-size: 0.8rem;
    color: var(--tk-fg-mut);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Commenti pubblici sulla scheda di un locale  (4 settembre 2026)

   Nessuna classe di questo genere esisteva: cercando avatar, citazione,
   blockquote in questo foglio non c'era niente da riusare, quindi queste
   nascono qui. Sono in `site.css` e non dentro un pannello perche' la scheda
   pubblica non e' un pannello, ed e' la regola di docs/15 §3.1-bis: una regola
   che serve a chiunque disegni una pagina non vive sotto il selettore di
   un'area.

   La separazione fra un commento e l'altro e' una riga, non un riquadro: sono
   gia' dentro una `tk-card`, e incorniciare ogni commento farebbe una scatola
   dentro una scatola. Vedi la nota su `docs/15`: bordo, sfondo e ombra dicono
   «oggetto separato», e spesi su ogni blocco appiattiscono la gerarchia.
   --------------------------------------------------------------------------- */

.tk-commenti {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Spaziatura per adiacenza, non un margine su ogni voce: un elemento di tipo
   nuovo qui dentro non resta attaccato al precedente. docs/15 §2.2. */
.tk-commenti > li + li {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--tk-border);
}

.tk-commento-capo {
  margin: 0 0 0.35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
  font-size: 0.95rem;
}

.tk-commento-voto {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.tk-commento-quando {
  color: var(--tk-fg-mut);
  font-size: 0.86rem;
}

/* Il testo del cliente e' la ragione per cui questo blocco esiste: prende piu'
   spazio della sua intestazione, non meno. */
.tk-commento-testo {
  margin: 0;
  line-height: 1.55;
}

/* Il «segnala» deve esserci e non deve invitare: chi ha bisogno di segnalare
   lo cerca, tutti gli altri non devono trovarselo davanti a ogni commento.

   ⚠ Sta sotto OGNI commento, e ripetuto sei o dieci volte sembra rumore da
   consolidare in un collegamento solo in fondo alla sezione. Guardato e deciso
   di lasciarlo cosi il 4 settembre 2026: un collegamento unico non puo sapere
   QUALE commento si sta segnalando, e si perderebbe la precompilazione col
   numero della recensione — cioe la cosa che rende utile la segnalazione per
   chi poi la legge. Il rumore si e smorzato col colore e con la dimensione,
   non togliendo la riga. */
.tk-commento-segnala {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
}

.tk-commento-segnala a {
  color: var(--tk-fg-mut);
}

.tk-commento-segnala a:hover,
.tk-commento-segnala a:focus-visible {
  color: var(--tk-red);
}

/* La riga d'intestazione di un commento fa da comando per aprire i cinque voti
   dietro la media. Il triangolino di serie sparisce e al suo posto c'e' una
   parola: un triangolo da solo non dice COSA si apre, e su una scheda piena di
   numeri nessuno lo prova. */
.tk-commento-voti > summary {
  cursor: pointer;
  list-style: none;
}

.tk-commento-voti > summary::-webkit-details-marker {
  display: none;
}

.tk-commento-voti > summary::after {
  content: "vedi i voti";
  font-size: 0.78rem;
  color: var(--tk-fg-mut);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tk-commento-voti[open] > summary::after {
  content: "nascondi i voti";
}

.tk-commento-voti > summary:hover::after,
.tk-commento-voti > summary:focus-visible::after {
  color: var(--tk-red);
}

.tk-commento-dettaglio {
  margin: 0.45rem 0 0.1rem;
  font-size: 0.86rem;
  /* I voti vanno a capo invece di uscire di lato: sono cinque coppie
     etichetta-numero e su un telefono stretto non ci stanno in riga. */
  white-space: normal;
}

/* La riga in fondo ai commenti: il conteggio a sinistra, il comando accanto.
   Va a capo su schermo stretto invece di stringere il pulsante. */
.tk-commenti-ancora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
}

/* ---------------------------------------------------------------------------
   Un campo con un comando accanto  (5 settembre 2026)

   Serve ogni volta che un menu o un campo ha un pulsante di fianco — «Ascolta»
   accanto alla scelta del suono e stato il primo caso, ma e una forma che
   ricorre.

   Nasce da un difetto misurato, non immaginato: mettendo i due elementi dentro
   un `.tk-field`, che e un blocco, il pulsante finiva a ZERO pixel dal menu, e
   la riga usciva a 585px contro i 512 degli altri campi del modulo. Due
   difetti in uno — attaccati e disallineati — e nessuno dei due si vede
   rileggendo il CSS: si vedono misurando, o se li vede l'utente.

   `max-width: 32rem` e la stessa misura che site.css da a input e select
   dentro `.tk-field`: cosi la riga con il comando resta larga quanto le righe
   senza, e la colonna del modulo non si sfalsa.
   --------------------------------------------------------------------------- */

.tk-riga-con-comando {
  display: flex;
  align-items: stretch;   /* il pulsante prende l'altezza del campo, invece di
                             restare piu basso e galleggiare */
  gap: 0.5rem;
  max-width: 32rem;
}

/* `min-width: 0` e non `auto`: dentro un contenitore flex un campo non scende
   mai sotto la larghezza del suo contenuto, e un menu con un'opzione lunga
   spingerebbe fuori il pulsante. E `max-width: none` perche la larghezza qui
   la decide la riga, non il campo. */
.tk-riga-con-comando > select,
.tk-riga-con-comando > input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.tk-riga-con-comando > .tk-btn {
  flex: 0 0 auto;
}