/*
 * Come sono disegnati gli arredi della sala.
 *
 * Un foglio solo, caricato da tutti e tre i posti che disegnano una
 * piantina: l'editor, il modulo del cliente e il selettore dei tavoli.
 *
 * Tre copie degli stessi disegni vorrebbero dire che il giorno che si
 * cambia il colore di una pianta lo si cambia in due posti su tre, e
 * la terza schermata mostra una sala diversa senza che nessuno lo
 * dica. E' il difetto ricorrente di questo progetto, e qui non ha
 * dove nascondersi.
 *
 * ## Visti dall'alto, e disegnati
 *
 * La prima versione metteva dentro ogni arredo un'emoji. Sbagliata due
 * volte.
 *
 * **E' il punto di vista sbagliato.** Una piantina si guarda dall'alto,
 * e un germoglio, un calice e un cartello del bagno sono tutti visti di
 * lato: una pianta dall'alto e' una chioma tonda, un bancone e' un
 * piano lungo, una porta e' un varco con l'arco dell'anta.
 *
 * **E non scalava.** Il carattere restava a 17,6 pixel a qualunque
 * zoom: in una cella da 18 la riempiva tutta, in una da 48 diventava un
 * puntino in mezzo. Misurato, non supposto.
 *
 * Qui invece e' tutto disegnato in percentuale, quindi la chioma resta
 * una chioma da 14 pixel come da 60, e resta nitida perche' sono
 * gradienti e non immagini.
 *
 * ## Cosa sta qui e cosa no
 *
 * Qui c'e' **solo l'aspetto**. Dove sta un arredo e quanto e' grande lo
 * decide chi lo disegna: l'editor lavora in pixel, il modulo del
 * cliente in percentuale. Mescolare le due cose e' il modo per rompere
 * una delle due ogni volta che si tocca l'altra.
 */

.arredo-pianta,
.arredo-porta,
.arredo-bancone,
.arredo-colonna,
.arredo-bagno,
.arredo-scala,
.arredo-blocco {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

/* ------------------------------------------------------------------ */
/* Pianta: la chioma vista da sopra                                    */
/*                                                                     */
/* Cinque macchie di verdi diversi che si sovrappongono, su un vaso     */
/* chiaro che spunta appena dai bordi. Le macchie non sono simmetriche  */
/* apposta: una chioma regolare sembra un bollo.                        */

.arredo-pianta {
    border-radius: 50%;
    background-color: #dfe9e0;
    background-image:
        radial-gradient(circle at 50% 52%, #35704a 0 15%, transparent 16%),
        radial-gradient(circle at 33% 33%, #6cb07d 0 20%, transparent 21%),
        radial-gradient(circle at 68% 31%, #4e9765 0 18%, transparent 19%),
        radial-gradient(circle at 29% 69%, #559e6a 0 19%, transparent 20%),
        radial-gradient(circle at 71% 68%, #7cbc8b 0 17%, transparent 18%),
        radial-gradient(circle at 50% 50%, #cfe0d2 0 44%, transparent 45%);
    box-shadow: inset 0 0 0 1px rgba(120, 150, 128, .55);
}

/* ------------------------------------------------------------------ */
/* Porta: lo stipite, l'anta e l'arco                                  */
/*                                                                     */
/* Il simbolo che si usa sulle piante vere, e va disegnato preciso o    */
/* non si legge: **il cardine, l'anta e il centro dell'arco devono      */
/* stare nello stesso punto**. La prima versione aveva l'anta lungo     */
/* tutto un lato e l'arco centrato nell'angolo opposto, quindi non era  */
/* il disegno di niente — e infatti non si capiva.                      */
/*                                                                     */
/* Tre segni, dal basso: i due spallette del muro con in mezzo il       */
/* varco, l'anta che esce perpendicolare dal cardine in basso a         */
/* sinistra, e l'arco che quell'anta spazza aprendosi.                  */
/*                                                                     */
/* Nessun contorno attorno alla cella: una porta e' un buco nel muro,   */
/* e un rettangolo chiuso dice il contrario di quello che e'.           */
/* L'arco e' continuo e non tratteggiato: a diciotto pixel un           */
/* tratteggio sono due trattini, cioe' niente.                          */

.arredo-porta {
    background-color: transparent;
    /* Le due spallette del muro, in basso, col varco in mezzo */
    background-image: linear-gradient(
        90deg,
        #55606d 0 20%,
        transparent 20% 80%,
        #55606d 80%
    );
    background-size: 100% 16%;
    background-position: 0 100%;
    background-repeat: no-repeat;
}

/* L'anta aperta: esce dal cardine, perpendicolare al muro */
.arredo-porta::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 16%;
    min-width: 2px;
    height: 100%;
    background: #55606d;
}

/*
 * L'arco, centrato sul cardine in basso a sinistra.
 *
 * Arrotondando del tutto l'angolo in alto a destra, la curva va da un
 * capo all'altro passando per la punta dell'anta: e' il quarto di
 * cerchio che ha il cardine per centro. Si disegnano solo i due lati
 * che la tracciano.
 */
.arredo-porta::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Un pelo piu' spesso dell'osso minimo: a cella grande un filo da
       un pixel sparisce accanto all'anta, che invece cresce in
       percentuale */
    border: 1.5px solid #8b96a3;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 0 100% 0 0;
}

/* ------------------------------------------------------------------ */
/* Bancone: il piano di lavoro                                         */
/*                                                                     */
/* Legno scuro col piano piu' chiaro sul lato di servizio e la fascia   */
/* del ripiano sotto: da sopra un bancone e' questo, non un calice.     */

.arredo-bancone {
    border-radius: 2px;
    background-color: #4b3f33;
    background-image:
        linear-gradient(180deg, rgba(255, 244, 228, .30) 0 26%, transparent 26%),
        linear-gradient(180deg, transparent 0 72%, rgba(0, 0, 0, .22) 72%),
        repeating-linear-gradient(
            90deg,
            rgba(255, 240, 220, .05) 0,
            rgba(255, 240, 220, .05) 1px,
            transparent 1px,
            transparent 7%
        );
    box-shadow: inset 0 0 0 1px #3a2f26;
}

/* ------------------------------------------------------------------ */
/* Colonna                                                             */
/*                                                                     */
/* Un cilindro da sopra e' un cerchio con l'ombra su un lato: e' la     */
/* sola cosa che lo distingue da un tavolo rotondo.                     */

.arredo-colonna {
    border-radius: 50%;
    background-color: #cfd6de;
    background-image:
        radial-gradient(circle at 36% 34%, rgba(255, 255, 255, .95) 0 34%, transparent 60%),
        radial-gradient(circle at 68% 70%, rgba(70, 82, 95, .35) 0 40%, transparent 72%);
    box-shadow: inset 0 0 0 1px #8f9aa6;
}

/* ------------------------------------------------------------------ */
/* Bagno: il sanitario visto dall'alto                                 */
/*                                                                     */
/* La cassetta contro il muro e la tazza davanti. Non un cartello:      */
/* i cartelli si guardano di fronte, e qui siamo sopra.                 */

.arredo-bagno {
    border-radius: 2px;
    background-color: #e8f0fa;
    box-shadow: inset 0 0 0 1px #a8c3e8;
}

/* La cassetta */
.arredo-bagno::before {
    content: "";
    position: absolute;
    left: 28%;
    top: 14%;
    width: 44%;
    height: 16%;
    background: #ffffff;
    border: 1px solid #7e9fc8;
    border-radius: 2px;
}

/* La tazza */
.arredo-bagno::after {
    content: "";
    position: absolute;
    left: 32%;
    top: 30%;
    width: 36%;
    height: 46%;
    background: #ffffff;
    border: 1px solid #7e9fc8;
    border-radius: 42% 42% 50% 50%;
}

/* ------------------------------------------------------------------ */
/* Scala: i gradini                                                    */
/*                                                                     */
/* Le righe sono i gradini e si infittiscono da sole quando la scala    */
/* si allunga, perche' il passo e' una percentuale della sua lunghezza. */

.arredo-scala {
    border-radius: 2px;
    background-color: #e6eaef;
    background-image:
        repeating-linear-gradient(
            90deg,
            #93a0ad 0,
            #93a0ad 1px,
            transparent 1px,
            transparent 12.5%
        ),
        linear-gradient(180deg, rgba(255, 255, 255, .7) 0 40%, transparent 40%);
    box-shadow: inset 0 0 0 1px #8f9aa6;
}

/* ------------------------------------------------------------------ */
/* Blocco: quello che il ristoratore chiama come vuole                 */
/*                                                                     */
/* Tratteggiato apposta: dice "qui c'e' qualcosa" senza far finta di    */
/* sapere cosa. A riconoscerlo e' il nome che gli ha dato lui.          */

.arredo-blocco {
    border-radius: 3px;
    background-color: #f1f5f9;
    box-shadow: inset 0 0 0 1px #94a3b8;
    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(148, 163, 184, .16) 0,
            rgba(148, 163, 184, .16) 2px,
            transparent 2px,
            transparent 6px
        );
}

/* ------------------------------------------------------------------ */
/* Il nome scritto sopra                                               */

.yummyit-fp-arredo-nome,
.yummyit-floorplan-arredo-nome {
    position: relative;
    z-index: 1;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 600;
    color: #334155;
    text-align: center;
    padding: 0 2px;
    /* Un nome lungo si taglia: deborda sopra i tavoli vicini, e a quel
       punto non si capisce piu' di chi sia */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}