/* Il sistema visivo di LibraReel, condiviso da tutte le viste.
   Tema unico e deliberato: la patina si legge solo su fondo scuro e caldo. */

:root {
  --ground:      #1B1620;
  --ground-lift: #241D2B;
  --chalk:       #EDE7E0;
  --chalk-dim:   #A198A9;
  --ash:         #5A5260;
  --saffron:     #E8A33D;
  --sage:        #7E9B86;
  --line:        rgba(237, 231, 224, 0.10);
  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "Martian Mono", ui-monospace, "Consolas", monospace;
}

* { box-sizing: border-box; }

body {
  background: var(--ground); color: var(--chalk); font-family: var(--body);
  margin: 0; padding: 0 0 64px; -webkit-font-smoothing: antialiased;
}

.colonna { max-width: 460px; margin: 0 auto; padding: 0 22px; }
[hidden] { display: none !important; }

/* ---- navigazione fra le tre collezioni --------------------------------- */

.rotta {
  display: flex; gap: 18px; padding: 22px 0 0;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.rotta a { color: var(--ash); text-decoration: none; padding-bottom: 4px; }
.rotta a[aria-current="page"] { color: var(--chalk); border-bottom: 1px solid var(--saffron); }

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

.occhiello {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin: 0;
}
/* L'avviso diventa toccabile quando le notifiche aspettano un tuo gesto:
   Chrome su Android non mostra la richiesta di permesso senza un tocco. */
.occhiello .da-toccare {
  color: var(--saffron);
  border-bottom: 1px solid var(--saffron);
  cursor: pointer;
  padding-bottom: 2px;
}

.testata { display: flex; flex-direction: column; gap: 14px; padding: 30px 0 28px; }
.titolo {
  font-family: var(--display); font-optical-sizing: auto; font-weight: 700;
  font-size: clamp(38px, 12vw, 50px); line-height: 0.94;
  letter-spacing: -0.03em; text-wrap: balance; margin: 0;
}
.titolo em { font-style: normal; display: block; font-weight: 500; color: var(--chalk-dim); }
.sommario {
  font-family: var(--mono); font-size: 11px; font-weight: 300; line-height: 1.7;
  color: var(--ash); font-variant-numeric: tabular-nums; margin: 0;
}

/* ---- la firma: la patina ------------------------------------------------ */

.elenco { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.voce {
  --patina: color-mix(in oklab, var(--saffron) calc((1 - var(--eta)) * 100%), var(--ash));
  display: grid; grid-template-columns: 3px 1fr auto; gap: 0 14px;
  padding: 20px 0; border-top: 1px solid var(--line); align-items: start;
  scroll-margin-top: 12px;
}
.elenco .voce:first-child { border-top: none; }
.barra { grid-row: 1 / -1; align-self: stretch; background: var(--patina); border-radius: 2px; opacity: 0.85; }
.corpo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cosa {
  font-family: var(--display); font-weight: 500; font-size: 18px; line-height: 1.2;
  letter-spacing: -0.015em; margin: 0; text-wrap: balance;
}
.perche { font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--chalk-dim); margin: 0; }
.meta {
  font-family: var(--mono); font-size: 10px; font-weight: 300; color: var(--ash);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-variant-numeric: tabular-nums; margin: 0;
}
.meta .giorni { color: var(--patina); }
.meta a { color: var(--ash); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.meta a:hover { color: var(--chalk-dim); }
.azioni { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

.distanza {
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--chalk-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 2px;
}

/* ---- controlli ---------------------------------------------------------- */

button {
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--chalk-dim); background: transparent;
  border: 1px solid var(--line); border-radius: 2px; padding: 8px 12px; cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
button:hover { color: var(--sage); border-color: color-mix(in oklab, var(--sage) 40%, transparent); }
button.rifiuta:hover { color: var(--chalk-dim); border-color: rgba(237, 231, 224, 0.24); }
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }

/* ---- tratteggio = il sistema propone, decidi tu ------------------------- */

.conferma { border: 1px dashed rgba(232, 163, 61, 0.30); border-radius: 3px; padding: 16px; }
.conferma .cosa { font-size: 17px; }
.attesa, .guasto {
  font-family: var(--mono); font-size: 11px; font-weight: 300; line-height: 1.7;
  color: var(--ash); border: 1px dashed var(--line); border-radius: 3px;
  padding: 14px 16px; margin: 0;
}
.guasto { color: var(--saffron); border-color: rgba(232, 163, 61, 0.30); }

/* ---- sezioni ------------------------------------------------------------ */

.sezione { margin-top: 40px; display: flex; flex-direction: column; gap: 14px; }
.sezione.confine { padding-top: 22px; border-top: 1px solid var(--line); }

.fine { display: flex; flex-direction: column; gap: 6px; padding: 30px 0 0; border-top: 1px solid var(--line); }
.fine strong { font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--chalk-dim); }
.fine span { font-family: var(--mono); font-size: 10px; font-weight: 300; line-height: 1.7; color: var(--ash); }

.chiuse ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.chiuse li { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: baseline;
             font-size: 15px; font-weight: 300; color: var(--ash); }
.chiuse .segno { color: var(--sage); font-family: var(--mono); font-size: 10px; }
.chiuse .quando { font-family: var(--mono); font-size: 10px; color: color-mix(in oklab, var(--ash) 70%, transparent); }

/* ---- ingresso ----------------------------------------------------------- */

.ingresso { display: flex; flex-direction: column; gap: 14px; padding: 60px 0; }
.ingresso input {
  font-family: var(--mono); font-size: 12px; background: var(--ground-lift);
  color: var(--chalk); border: 1px solid var(--line); border-radius: 2px; padding: 12px;
}