/* =========================================================================
   Letter2My — tema "Carta e inchiostro"
   Avorio caldo, inchiostro antracite, accento oro tenue, serif elegante.
   ========================================================================= */

:root {
    --paper:       #faf6ef;  /* sfondo avorio */
    --paper-card:  #fffdf9;  /* carta delle schede */
    --ink:         #2e2a24;  /* testo principale */
    --ink-soft:    #6b6255;  /* testo secondario */
    --ink-faint:   #9a9082;  /* dettagli tenui */
    --gold:        #b08d57;  /* accento oro */
    --gold-deep:   #8a6d3b;  /* oro per il testo dei link (contrasto) */
    --line:        #e7ddcb;  /* bordi/hairline */
    --line-soft:   #efe8db;

    --err-bg:      #f6e9e3;
    --err-line:    #e2c3b4;
    --err-ink:     #8a3f2e;
    --ok-bg:       #f3efe2;
    --ok-line:     #e4d5ad;
    --ok-ink:      #6f5c2c;

    --radius:      14px;
    --radius-sm:   9px;
    --shadow:      0 6px 26px rgba(46, 42, 36, .06);
    --shadow-soft: 0 2px 10px rgba(46, 42, 36, .05);

    /* Grana della carta, condivisa da buste, foglio e biglietti.
       Rumore frattale usato come rilievo e illuminato di sbieco: e' la luce a
       renderlo materia, non il colore. I due numeri che contano sono
       surfaceScale (quanto e' accidentata la superficie) e l'opacita' del
       rect (quanto pesa): a 1.6 e piena sembrava intonaco e spegneva il caldo
       della carta, a 1.2 e 0.3 resta carta. */
    --grana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='4' seed='9' stitchTiles='stitch' result='r'/%3E%3CfeDiffuseLighting in='r' lighting-color='%23ffffff' surfaceScale='1.2' diffuseConstant='1'%3E%3CfeDistantLight azimuth='225' elevation='62'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23c)' opacity='0.3'/%3E%3C/svg%3E");

    --serif: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
    --sans:  "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background-color: var(--paper);
    /* velatura di carta: gradiente appena percettibile */
    background-image:
        radial-gradient(1200px 600px at 50% -10%, rgba(176, 141, 87, .06), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 240px);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* --- Tipografia -------------------------------------------------------- */

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .3px;
    color: var(--ink);
    margin: 0 0 .5em;
}

h1 { font-size: clamp(2rem, 4vw, 2.7rem); }
h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 500; }

p { margin: 0 0 1em; }

a {
    color: var(--gold-deep);
    text-decoration: none;
    border-bottom: 1px solid rgba(176, 141, 87, .35);
    transition: color .18s ease, border-color .18s ease;
}
a:hover { color: var(--gold); border-color: var(--gold); }

small { color: var(--ink-soft); font-size: .82rem; line-height: 1.5; display: inline-block; margin-top: 4px; }

/* Ornamento delicato: una piccola losanga dorata */
.ornament {
    text-align: center;
    color: var(--gold);
    letter-spacing: .5em;
    font-size: .8rem;
    margin: 4px 0 22px;
    opacity: .8;
}
.ornament::before { content: "\2726"; }

/* --- Layout ----------------------------------------------------------- */

/* La pagina occupa l'80% della finestra, fino a un massimo di 2400px.
   Sotto i 560px passa al 100%: l'80% di uno schermo da telefono lascerebbe
   due margini vuoti piu' larghi di quanto serva. */
.container {
    width: 80%;
    max-width: 2400px;
    margin: 0 auto;
    padding: 28px 20px 72px;
}

/* Intestazione su due righe: marchio + strumenti in alto, navigazione sotto.
   Con una riga sola le etichette lunghe (tedesco, francese) si spezzavano a
   meta' e il selettore di lingua veniva schiacciato fino a sparire. */
.site-header {
    width: 80%;
    max-width: 2400px;
    margin: 0 auto;
    padding: 18px 20px 0;
    border-bottom: 1px solid var(--line);
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    flex-wrap: wrap;
}

.header-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.brand {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--ink);
    border: 0;
}
.brand:hover { color: var(--gold-deep); }
.brand .dot { color: var(--gold); }

.site-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-bottom: 4px;
}

.nav-link {
    border: 0;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .93rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink-soft);
    transition: color .18s ease, background-color .18s ease;
}
.nav-link:hover { color: var(--gold-deep); background: rgba(176, 141, 87, .09); }
.nav-link.is-active { color: var(--ink); background: rgba(176, 141, 87, .15); }
.nav-link-quiet { margin-left: auto; font-weight: 400; color: var(--ink-faint); }

/* Scrivere e' l'azione principale del sito: unica voce piena, in oro.
   Il fondo e' --gold-deep e non --gold: con il crema sopra, l'oro chiaro dava
   2.9:1 di contrasto, sotto la soglia leggibile. Cosi' siamo a 4.6:1.
   Le due regole ripetono .nav-link per battere la specificita' di .is-active. */
.nav-link.nav-link-primary {
    color: #fdf9f1;
    background: var(--gold-deep);
    border: 1px solid var(--gold-deep);
    box-shadow: 0 1px 2px rgba(58, 52, 43, .12);
}
.nav-link.nav-link-primary:hover {
    color: #fdf9f1;
    background: #7a5f33;
    border-color: #7a5f33;
}
.nav-link.nav-link-primary.is-active {
    color: #fdf9f1;
    background: #7a5f33;
    border-color: #7a5f33;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18);
}

/* Il "+" sta un filo piu' grande del testo, senza allargare la pastiglia. */
.nav-plus {
    margin-right: 7px;
    font-size: 1.05em;
    line-height: 0;
    vertical-align: -1px;
    opacity: .85;
}

/* Pastiglia dell'account: iniziale + nickname, porta alle impostazioni.
   Sta in alto a destra, all'altezza del marchio. */
.account {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 14px 4px 4px;
    background: var(--paper-card);
    color: var(--ink-soft);
    font-size: .92rem;
    font-weight: 600;
    max-width: 200px;
    transition: border-color .18s ease, color .18s ease;
}
.account:hover { border-color: var(--gold); color: var(--gold-deep); }
.account.is-active { border-color: var(--gold); color: var(--ink); background: rgba(176, 141, 87, .1); }

.account-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}

/* Nickname lungo: puntini invece di allargare l'intestazione. */
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Nome e cognome affiancati finche' c'e' spazio. */
.field-pair { display: flex; gap: 14px; flex-wrap: wrap; }
.field-pair > label { flex: 1 1 180px; min-width: 0; }

/* Saluto: se il nickname e' lungo si accorcia con i puntini invece di
   allargare l'intestazione. */
.who {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    max-width: 240px;
    padding-left: 4px;
    font-size: .86rem;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.who strong { color: var(--ink); font-weight: 600; }

/* --- Selettori di lingua ---------------------------------------------- */

.lang-pick { position: relative; display: inline-flex; align-items: center; }
.lang-pick select {
    width: auto;
    min-width: 0;
    margin-top: 0;
    padding: 7px 30px 7px 33px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-soft);
    background-color: #fffdf9;
    border-radius: 999px;
    background-position: calc(100% - 15px) 55%, calc(100% - 11px) 55%;
    cursor: pointer;
}
.lang-pick select:hover { color: var(--gold-deep); border-color: var(--gold); }
.lang-pick::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    opacity: .65;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.lang-pick-ui::before   { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236b6255%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3.2%209.2h17.6M3.2%2014.8h17.6M12%203c3.2%203.6%203.2%2014.4%200%2018M12%203c-3.2%203.6-3.2%2014.4%200%2018%22%2F%3E%3C%2Fsvg%3E"); }
.lang-pick-read::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236b6255%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.5%2012S6.1%205.8%2012%205.8%2021.5%2012%2021.5%2012%2017.9%2018.2%2012%2018.2%202.5%2012%202.5%2012Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.7%22%2F%3E%3C%2Fsvg%3E"); }

/* Etichette lette solo dagli screen reader. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Schede / lettere -------------------------------------------------- */

.card {
    background: var(--paper-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 34px 34px;
}

.meta {
    color: var(--ink-soft);
    font-size: .82rem;
    letter-spacing: .3px;
}
.meta strong { color: var(--ink); font-weight: 600; }

.letter-body {
    margin-top: 14px;
    color: #423c33;
    line-height: 1.75;
}
.letter-body p { margin: 0 0 .7em; }

/* --- Titoli di pagina -------------------------------------------------- */

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.page-head h1 { margin: 0; }
.subtitle { color: var(--ink-soft); margin: 4px 0 0; font-size: .95rem; }
.page-head .subtitle { font-size: 1rem; }

/* Il filtro sta in alto a destra: etichetta piccola, senza il margine dei
   campi di modulo. */
.filter { min-width: 230px; }
.filter label { margin-top: 0; font-size: .84rem; color: var(--ink-faint); }
.filter select { margin-top: 5px; }

/* --- Form ------------------------------------------------------------- */

label { display: block; margin-top: 18px; font-size: .92rem; color: var(--ink-soft); font-weight: 600; }

input, select, textarea {
    width: 100%;
    margin-top: 7px;
    padding: 11px 13px;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--ink);
    background: #fffefb;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .18s ease, box-shadow .18s ease;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(176, 141, 87, .18);
}
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }

textarea { min-height: 200px; line-height: 1.7; resize: vertical; }

/* Le caselle di spunta non devono ereditare width:100% dalla regola qui sopra. */
input[type="checkbox"], input[type="radio"] {
    width: auto;
    margin: 0;
    accent-color: var(--gold);
    flex: none;
}

fieldset { border: 0; margin: 26px 0 0; padding: 0; min-width: 0; }
legend { padding: 0; font-size: .92rem; font-weight: 600; color: var(--ink-soft); }
.field-hint { margin: 6px 0 0; font-size: .84rem; color: var(--ink-faint); }

/* Griglia di scelte (lingue di lettura): si adatta al numero di colonne che
   entrano, quindi regge nomi corti come "Italiano" e lunghi come "Português". */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.choice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 11px 14px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink);
    background: #fffefb;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.choice:hover { border-color: var(--gold); }
.choice:has(input:checked) {
    border-color: var(--gold);
    background: #fffdf6;
    box-shadow: 0 0 0 3px rgba(176, 141, 87, .14);
}

/* --- Scelta del destinatario ------------------------------------------ */

.recipient-picker { border: 0; padding: 0; margin: 22px 0 0; }
.recipient-picker > legend {
    padding: 0;
    font-family: var(--serif);
    font-size: 1.25rem;
    color: var(--ink);
}

.recipient-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }

/* Il nome sta nel serif del sito: sono persone, non voci di un menu. */
.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 9px 17px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper-card);
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

/* Il radio resta raggiungibile da tastiera e dai lettori di schermo, ma non si vede. */
.chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.chip:hover { border-color: var(--gold); color: var(--ink); }
.chip:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

.chip:has(input:checked) {
    border-color: var(--gold);
    background: #fffdf6;
    color: var(--ink);
    box-shadow: 0 0 0 3px rgba(176, 141, 87, .14);
}

/* Il segno di spunta compare solo sulla pastiglia scelta, con lo stesso
   carattere ornamentale usato nel resto del sito. */
.chip:has(input:checked)::before {
    content: "\2726";
    color: var(--gold);
    font-size: .8rem;
    line-height: 1;
}

/* "Qualcun altro" e' un'aggiunta, non una persona: bordo tratteggiato. */
.chip-new { border-style: dashed; font-family: var(--sans); font-size: .93rem; font-weight: 600; }

/* Il campo libero serve solo quando non si e' scelta una persona dall'elenco.
   Regola scritta al contrario apposta: se il browser non conosce :has(), il
   campo resta visibile e si torna al comportamento di prima. */
.recipient-new { margin-top: 14px; }
.recipient-picker:has(.chip:not(.chip-new) input:checked) .recipient-new { display: none; }

@media (max-width: 560px) {
    .chip { padding: 8px 14px; font-size: 1rem; }
}

/* --- Bottoni ---------------------------------------------------------- */

button, .btn {
    display: inline-block;
    font-family: var(--sans);
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: .2px;
    color: #fdf9f1;
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 999px;
    padding: 11px 26px;
    margin-top: 22px;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .1s ease;
}
button:hover, .btn:hover { background: #423b30; border-color: #423b30; }
button:active, .btn:active { transform: translateY(1px); }

/* bottoni secondari (toolbar editor) */
.btn-ghost, .wysiwyg-controls button {
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 7px 14px;
    margin-top: 0;
    font-size: .88rem;
    font-weight: 600;
}
.btn-ghost:hover, .wysiwyg-controls button:hover {
    color: var(--gold-deep);
    background: #fffefb;
    border-color: var(--gold);
}

.form-footer { margin-top: 22px; color: var(--ink-soft); font-size: .95rem; }
/* Due piedini di fila (login): il secondo segue il primo da vicino. */
.form-footer-tight { margin-bottom: 0; }
.form-footer-tight + .form-footer { margin-top: 6px; }

/* --- Avvisi ----------------------------------------------------------- */

.alert {
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    margin-bottom: 18px;
    font-size: .95rem;
}
.alert-error  { background: var(--err-bg); border: 1px solid var(--err-line); color: var(--err-ink); }
.alert-notice { background: var(--ok-bg);  border: 1px solid var(--ok-line);  color: var(--ok-ink); }
.alert ul { margin: 0; padding-left: 20px; }
.alert li { margin: 3px 0; }

/* --- Editor lettera ---------------------------------------------------- */

.editor-toolbar { margin: 12px 0 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.editor {
    min-height: 260px;
    background: #fffefb;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    line-height: 1.8;
    font-size: 1.05rem;
}
.editor:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 141, 87, .18); }

/* --- Auth (login / registrazione) ------------------------------------- */

body.auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 32px 18px; }
.auth-card { width: 100%; max-width: 520px; text-align: left; padding: 38px 40px; }
.auth-card .brand-block { text-align: center; margin-bottom: 6px; }
.auth-card .brand-block .brand { font-size: 2rem; }
.auth-card h1 { text-align: center; font-size: 2rem; margin: 0 0 2px; }
.auth-card .tagline { text-align: center; color: var(--ink-soft); font-size: .95rem; margin: 0 0 8px; }
.auth-card button { width: 100%; }
.auth-lang { display: flex; justify-content: center; margin-bottom: 16px; }

.empty-state { text-align: center; color: var(--ink-soft); padding: 40px 0; font-family: var(--serif); font-size: 1.3rem; }

hr.divider { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }

/* --- Elenco a buste ---------------------------------------------------- */

/* Le buste sono schede: su schermo largo si affiancano invece di allungare le
   righe di testo, che a 2000px sarebbero illeggibili. */
.envelopes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 22px;
    margin-top: 8px;
}

/* Tutta la busta e' il collegamento: si apre da qualsiasi punto. */
.envelope {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 272px;
    padding: 118px 30px 20px;   /* lo spazio in alto e' il lembo */
    border: 1px solid #e3d8c4;
    border-radius: 3px;         /* le buste hanno angoli quasi vivi */
    color: var(--ink);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;

    /* Appoggiata storta di una frazione di grado: quanto basta perche' due
       buste vicine non sembrino stampate dalla stessa matrice. */
    transform: rotate(var(--env-tilt, 0deg));

    /* Serve al lembo che si solleva: senza prospettiva rotateX schiaccia il
       triangolo invece di inclinarlo, e il movimento non si legge. */
    perspective: 900px;

    /* Stessa grana del foglio che contengono: da vicino si vedono le fibre,
       da lontano e' solo carta calda. */
    background-color: var(--env-paper, #fffdf7);
    background-image: var(--grana);
    background-size: 420px 420px;
    background-blend-mode: multiply;

    /* L'ombra esterna appoggia la busta sulla pagina; quella interna e' il
       bordo del foglio, che prende luce lungo il taglio. */
    box-shadow:
        0 3px 10px rgba(46, 42, 36, .09),
        0 1px 2px rgba(46, 42, 36, .06),
        inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.envelope:hover {
    border-color: #d9c8a8;
    box-shadow:
        0 10px 26px rgba(46, 42, 36, .13),
        0 2px 4px rgba(46, 42, 36, .07),
        inset 0 0 0 1px rgba(255, 255, 255, .7);
    transform: rotate(var(--env-tilt, 0deg)) translateY(-3px);
}
.envelope:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Le pieghe del fondo: i due lembi laterali che si chiudono a V sotto la punta
   di quello superiore. Disegnate in SVG e stirate sulla busta, cosi' la V resta
   agganciata agli angoli qualunque sia la proporzione della scheda; il tratto
   non si ingrossa perche' e' 'non-scaling-stroke'. */
.envelope::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='M0 100 L50 54 L100 100' fill='none' stroke='%23a8895c' stroke-opacity='.3' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* L'interno, sotto il lembo. Stessa sagoma e stessa posizione: a busta chiusa
   e' coperto esattamente, non serve nasconderlo. Quando il lembo si solleva la
   prospettiva lo accorcia e sotto compare questo -- come guardare dentro una
   busta vera, dove la carta e' in ombra. */
.envelope-inside {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 47%;
    z-index: 1;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: linear-gradient(178deg, #d8c9ab 0%, #e6dac0 55%, #efe6d2 100%);
    box-shadow: inset 0 8px 12px -8px rgba(70, 56, 30, .55);
}

/* Il lembo chiuso, ripiegato sopra gli altri. Il triangolo e' ritagliato con
   clip-path, quindi un bordo normale verrebbe tagliato via: la piega e l'ombra
   che getta sul corpo si ottengono con drop-shadow, che segue la sagoma. */
.envelope-flap {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 47%;
    z-index: 2;
    background:
        linear-gradient(178deg, var(--env-flap-a, #fdf8ec) 0%, var(--env-flap-b, #f0e6d0) 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    filter:
        drop-shadow(0 1px 0 rgba(168, 137, 92, .45))
        drop-shadow(0 3px 4px rgba(46, 42, 36, .13));

    /* Cardine sul bordo superiore, dove la carta e' incollata alla busta. */
    transform-origin: top center;
    transition: transform .45s cubic-bezier(.2, .75, .3, 1), filter .3s ease;
}

/* Socchiusa, non spalancata: il cardine resta il bordo alto, quindi il lembo
   non esce mai dalla busta e non copre quelle vicine nella griglia. */
.envelope:hover .envelope-flap {
    transform: rotateX(-24deg);
    filter:
        drop-shadow(0 1px 0 rgba(168, 137, 92, .45))
        drop-shadow(0 10px 12px rgba(46, 42, 36, .26));
}

/* Ceralacca: bordo irregolare, luce da sinistra in alto, un po' storto come
   quando lo si preme a mano. */
.envelope-seal {
    position: absolute;
    top: 47%; left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%) rotate(var(--env-seal-tilt, -7deg));
    transition: transform .45s cubic-bezier(.2, .75, .3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 47% 53% 51% 49% / 51% 47% 53% 49%;
    background: radial-gradient(circle at 33% 27%, #c9a267 0%, #a87f43 46%, #7c5e31 100%);
    color: #fbf3e2;
    font-size: .84rem;
    text-shadow: 0 1px 1px rgba(60, 40, 15, .5);
    box-shadow:
        0 2px 4px rgba(46, 42, 36, .35),
        inset 0 -2px 3px rgba(70, 46, 16, .45),
        inset 0 2px 2px rgba(255, 236, 200, .35);
}

/* La ceralacca sta sul lembo: quando questo si alza, sale con lui e si
   rimpicciolisce un poco, come se si allontanasse. */
.envelope:hover .envelope-seal {
    transform: translate(-50%, -50%) translateY(-11px) scale(.94)
               rotate(calc(var(--env-seal-tilt, -7deg) - 3deg));
}

/* Chi apre il sito da telefono non ha il passaggio del mouse: senza questa
   regola il movimento resterebbe agganciato al primo tocco. */
@media (hover: none) {
    .envelope:hover .envelope-flap { transform: none; }
    .envelope:hover .envelope-seal {
        transform: translate(-50%, -50%) rotate(var(--env-seal-tilt, -7deg));
    }
}

/* Chi ha chiesto al sistema di ridurre le animazioni non deve vedere il lembo
   muoversi a ogni passaggio del mouse. */
@media (prefers-reduced-motion: reduce) {
    .envelope, .envelope-flap, .envelope-seal { transition: none; }
    .envelope:hover .envelope-flap { transform: none; }
    .envelope:hover .envelope-seal {
        transform: translate(-50%, -50%) rotate(var(--env-seal-tilt, -7deg));
    }
}

/* Mittente, come l'indirizzo di ritorno scritto in un angolo. */
.envelope-from {
    position: relative;
    z-index: 4;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #948a7c;   /* piu' scuro di --ink-faint: regge la carta piu' calda */
}

/* Il blocco dell'indirizzo, al centro come su una busta. */
.envelope-address {
    position: relative;
    z-index: 4;
    display: block;
    margin: auto 0;
    padding: 10px 0;
    text-align: center;
}
.envelope-to {
    display: block;
    font-family: var(--serif);
    font-size: 1.45rem;
    line-height: 1.2;
    color: var(--ink);
}
.envelope-title {
    display: block;
    margin-top: 5px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.08rem;
    line-height: 1.35;
    color: #856839;   /* piu' scuro di --gold-deep: regge la carta piu' calda */
}
.envelope:hover .envelope-title { text-decoration: underline; text-underline-offset: 3px; }

.envelope-foot {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
}
.envelope-date { font-size: .82rem; color: #948a7c; }

/* Nomi lunghi (tedesco, o un destinatario scritto per esteso) vanno a capo
   invece di sfondare la busta. */
.envelope-to, .envelope-title, .envelope-from { overflow-wrap: break-word; }

@media (max-width: 560px) {
    .envelopes { grid-template-columns: 1fr; gap: 16px; }
    .envelope { min-height: 214px; padding: 94px 20px 16px; }
    .envelope-to { font-size: 1.3rem; }
}

/* --- Le mie lettere ---------------------------------------------------- */

/* Il nome di chi scrive in grande: qui il protagonista e' lui, non il sito. */
.author-head { margin-bottom: 26px; }
.author-kicker {
    margin: 0;
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.author-name {
    margin: 2px 0 8px;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    line-height: 1.05;
}
.author-summary {
    margin: 0;
    max-width: 62ch;   /* una riga di prosa resta leggibile anche su schermo largo */
    color: var(--ink-soft);
    font-size: 1.05rem;
}

.reply-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    background: #fffdf6;
    color: var(--gold-deep);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* --- Vista singola lettera + commenti --------------------------------- */

.back-link { font-size: .9rem; margin: 0 0 18px; }
.back-link a { border: 0; color: var(--ink-soft); }
.back-link a:hover { color: var(--gold-deep); }

.letter-full h1 { margin-bottom: 6px; }
.letter-full .letter-body { font-size: 1.08rem; margin-top: 6px; }

/* --- Il foglio della lettera ------------------------------------------- */

/* Un foglio tirato fuori da una busta non e' mai perfettamente piano: porta le
   due pieghe di quando era in tre. Sono disegnate come sfondo in percentuale,
   quindi restano a un terzo e due terzi comunque sia lunga la lettera -- che e'
   dove starebbero davvero.
   Ogni piega e' una riga scura seguita da una chiara: l'ombra nell'incavo e la
   luce sul dorso. Al contrario sembrerebbe una riga tirata, non una piega. */
.letter-sheet {
    position: relative;
    background-color: var(--env-paper, #fffdf9);
    background-image:
        /* Le due pieghe. Bande larghe e appena accennate: una riga netta in
           mezzo al testo si legge come una sottolineatura, non come una piega. */
        linear-gradient(180deg,
            transparent calc(33.33% - 30px),
            rgba(120, 95, 50, .055) 33.33%,
            transparent calc(33.33% + 30px)),
        linear-gradient(180deg,
            transparent calc(66.66% - 30px),
            rgba(120, 95, 50, .055) 66.66%,
            transparent calc(66.66% + 30px)),
        /* Rumore frattale, non una trama regolare: due gradienti incrociati
           danno un tessuto meccanico, questo da' fibre. */
        var(--grana);
    background-size: auto, auto, 420px 420px;
    background-blend-mode: normal, normal, multiply;

    /* Angoli quasi vivi: un foglio non ha i bordi stondati di una scheda. */
    border-radius: 2px;
    border-color: #e6dcc8;

    box-shadow:
        0 3px 14px rgba(46, 42, 36, .10),
        /* La luce non e' mai perfettamente piatta su un foglio appoggiato. */
        inset 0 0 70px rgba(138, 109, 59, .05),
        inset 0 0 0 1px rgba(255, 255, 255, .7);
}

/* I due angoli bassi che si sollevano appena dal piano. Sono ombre proiettate
   dietro il foglio: nessun elemento in piu' nel markup, e se il browser non le
   disegna resta semplicemente un foglio piatto. */
.letter-sheet::before,
.letter-sheet::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 14px;
    width: 46%;
    height: 42px;
    box-shadow: 0 16px 12px rgba(46, 42, 36, .22);
}
.letter-sheet::before { left: 12px;  transform: rotate(-2.2deg); }
.letter-sheet::after  { right: 12px; transform: rotate(2.2deg); }


/* La firma: non una didascalia, il gesto di chi ha scritto. Corsivo del serif
   gia' caricato -- un carattere manoscritto in piu' costerebbe una richiesta
   di rete per un solo nome. */
.letter-signature {
    margin: 26px 0 0;
    text-align: right;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.45rem;
    line-height: 1.2;
    color: var(--ink-soft);
}

@media (max-width: 560px) {
    .letter-signature { font-size: 1.3rem; }
}

.comments { margin-top: 22px; }
.comments h2 { margin-bottom: 10px; }
/* Le risposte sono biglietti, non righe di un elenco: staccati dal fondo della
   scheda, senza pieghe -- un biglietto non si piega in tre. Il filo scuro sul
   bordo sinistro e' lo stesso segno che avevano le vecchie schede lettera. */
.comment {
    position: relative;
    margin-top: 12px;
    padding: 14px 18px;
    border: 1px solid var(--line-soft);
    border-left: 3px solid rgba(176, 141, 87, .35);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background-color: #fffdf7;
    background-image: var(--grana);
    background-size: 420px 420px;
    background-blend-mode: multiply;
}
.comment:first-of-type { margin-top: 0; }
.comment .meta { margin-bottom: 5px; }
.comment p { margin: 0; color: #423c33; line-height: 1.7; }

/* --- Pagina di manutenzione (migrate.php, temporanea) ------------------ */

.mig-card { max-width: 860px; margin: 0 auto; }
.mig-lead { color: var(--ink-soft); margin-top: 0; }
.mig-table { width: 100%; border-collapse: collapse; margin: 18px 0 6px; font-size: .95rem; }
.mig-table th { text-align: left; font-weight: 600; color: var(--ink-soft); font-size: .85rem;
    text-transform: uppercase; letter-spacing: .04em; padding: 0 10px 8px 0; border-bottom: 1px solid var(--line); }
.mig-table td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.mig-table td:first-child { width: 1%; white-space: nowrap; }
.mig-badge { display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: .78rem; font-weight: 600; white-space: nowrap; }
.mig-ok      { background: var(--ok-bg);  border: 1px solid var(--ok-line);  color: var(--ok-ink); }
.mig-todo    { background: #fdf3e0; border: 1px solid #e6c78a; color: #8a6216; }
.mig-blocked { background: var(--err-bg); border: 1px solid var(--err-line); color: var(--err-ink); }
.mig-note { display: block; color: var(--ink-soft); font-size: .88rem; margin-top: 3px; }
.mig-detail { color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.mig-done { color: var(--ok-ink); font-weight: 600; }
.mig-actions { margin: 18px 0 0; }
.mig-check { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: .95rem; }
.mig-check input { width: auto; margin: 0; }
.mig-danger { background: var(--err-ink); border-color: var(--err-ink); }

@media (max-width: 560px) {
    .mig-table, .mig-table tbody, .mig-table tr, .mig-table td { display: block; width: 100%; }
    .mig-table thead { display: none; }
    .mig-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
    .mig-table td { border: 0; padding: 2px 0; }
}

/* --- Robustezza multilingua ------------------------------------------- */

/* Il tedesco (e non solo) produce parole molto lunghe: meglio spezzarle che
   far sbordare la scheda. La sillabazione segue l'attributo lang del <html>. */
h1, h2, h3, .nav-link, .choice, .meta { overflow-wrap: break-word; }
.letter-body, .comment p, .empty-state { overflow-wrap: break-word; hyphens: auto; }

@media (max-width: 700px) {
    .page-head { align-items: stretch; }
    .filter { min-width: 0; width: 100%; }
}

@media (max-width: 560px) {
    .card { padding: 26px 22px; }
    .auth-card { padding: 26px 22px; }
    body { font-size: 16px; }
    .site-header { width: 100%; padding: 14px 16px 0; }
    .container { width: 100%; padding: 22px 16px 60px; }
    .header-top { gap: 10px; }
    .brand { font-size: 1.45rem; }
    .who { max-width: 100%; }
    .account { padding: 3px; max-width: none; }
    .account-name { display: none; }
    .site-nav { gap: 0; }
    .nav-link { padding: 8px 11px; font-size: .88rem; }
    .nav-link-quiet { margin-left: auto; }
}