/* ═══════════════════════════════════════════════════════════════════════════
   LA CRONOLOGIA
   ═══════════════════════════════════════════════════════════════════════════
   Entra da destra, perché il dito va verso sinistra: quello che si spinge fuori
   dallo schermo lascia entrare quello che c'era di là. Un pannello che arrivasse
   dalla parte opposta del gesto si leggerebbe come un errore. */

.cr-storia{ position:fixed; inset:0; z-index:1400;
  display:flex; justify-content:flex-end;
  background:rgba(12,20,30,.5); -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s ease; }

.cr-storia-su{ opacity:1; visibility:visible; }

.cr-storia-carta{ width:min(86vw, 340px); height:100%; overflow-y:auto;
  background:#eef1f4; box-shadow:-14px 0 40px -20px rgba(12,20,30,.8);
  transform:translateX(12px); transition:transform .2s ease;
  padding-bottom:calc(1rem + env(safe-area-inset-bottom)); }

.cr-storia-su .cr-storia-carta{ transform:translateX(0); }

/* La testa resta in cima scorrendo, ed è dello stesso grigio del corpo: una
   striscia bianca sopra il grigio si legge come un pezzo staccato. */
.cr-storia-testa{ position:sticky; top:0; z-index:1; background:#eef1f4;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:calc(.9rem + env(safe-area-inset-top)) .9rem .7rem;
  border-bottom:1px solid rgba(16,32,48,.08); }
.cr-storia-testa b{ font-size:1rem; color:#1b2733; }

/* L'insegna in corsivo, la parola di servizio no: il Lobster è per i nomi. */
.cr-storia-nome{ display:flex; align-items:baseline; gap:.35rem; font-weight:800; }
.cr-storia-nome span{ font-family:'Lobster', cursive; font-weight:400;
  font-size:1.25rem; color:#8a5a14; }

.cr-storia-x{ width:32px; height:32px; border:0; border-radius:50%;
  background:rgba(16,32,48,.06); color:#3d4a57; font-size:.95rem; cursor:pointer; }

.cr-storia-lista{ display:flex; flex-direction:column; gap:.4rem; padding:.8rem .9rem 0; }

/* Una card per posto: il titolo grosso — è quello che si riconosce — e sotto
   l'indirizzo piccolo, per quando due si chiamano uguale. */
.cr-storia-voce{ display:flex; align-items:center; gap:.6rem;
  padding:.65rem .75rem; border-radius:12px; background:#fff;
  border:1px solid rgba(16,32,48,.07); text-decoration:none; }

.cr-storia-testo{ min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.cr-storia-voce b{ font-size:.9rem; color:#161f27; }
.cr-storia-testo span{ font-size:.72rem; color:#8a94a0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ═══ I TITOLI: IL GIORNO E L'ORA ═══════════════════════════════════════════
   Trenta righe di fila non si leggono. Divise per giorno e per ora diventano
   mucchietti — «Oggi, le 14: ero qui, qui e qui» — che è il modo in cui uno si
   ricorda dov'era. Il giorno pesa, l'ora è un sussurro: sono due livelli, e se
   pesassero uguale non si capirebbe quale contiene quale. */
  .cr-storia-giorno{ margin:.9rem 0 .1rem; font-size:.78rem; font-weight:800;
    color:#161f27; letter-spacing:.01em; }
  .cr-storia-giorno:first-child{ margin-top:.2rem; }

  .cr-storia-ora{ margin:.35rem 0 .05rem; font-size:.66rem; font-weight:700;
    color:#b9c2cc; letter-spacing:.06em; text-transform:uppercase; }

/* L'ora: piccola e in fondo alla riga. «Quando» è metà della domanda che uno si
   fa aprendo una cronologia — «dov'ero prima di pranzo?». */
.cr-storia-quando{ font-style:normal; font-size:.66rem; font-weight:700;
  color:#b9c2cc; letter-spacing:.02em; }

/* ═══ PAGINE E FINESTRE ═════════════════════════════════════════════════════
   Il segno lo dice prima delle parole: un foglio è un posto dove sei andato, un
   riquadro è una cosa che hai aperto SOPRA un posto. Il modal è anche rientrato
   e più chiaro: si legge che sta sotto qualcos'altro. */
.cr-storia-segno{ flex:none; width:26px; height:26px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(16,32,48,.06); color:#5f6b78; font-size:.72rem; }

.cr-storia-modal{ margin-left:1.1rem; background:#fbfaf7;
  border-style:dashed; border-color:rgba(242,167,67,.45); }
.cr-storia-modal .cr-storia-segno{ background:rgba(242,167,67,.18); color:#8a5a14; }

.cr-storia-vuoto{ margin:1.2rem .9rem; font-size:.86rem; line-height:1.5; color:#8a94a0; }
.cr-storia-vuoto[hidden]{ display:none; }

@media (prefers-reduced-motion:reduce){
  .cr-storia, .cr-storia-carta{ transition:none; }
}

/* Il lampo della ricarica: la barra si smorza per un istante, giusto per dire
   «arrivato» prima che la pagina se ne vada. */
.cr-rifaccio{ opacity:.45; transition:opacity .12s ease; }