/* NOTUP — carta, inchiostro e tre colori: matita, timbro, inchiostro di china. Tutto in monospace. */
:root {
  --carta: #f3eee4;
  --carta-2: #ebe4d6;
  --foglio: #fbf8f2;
  --inchiostro: #1f1c17;
  --muto: #857d70;
  --riga: #ddd4c3;
  --pensierino: #5a6b80;
  --appunto: #b4472a;
  --diario: #2f5b46;
  --pericolo: #a3361f;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --carta: #16140f;
    --carta-2: #1f1c16;
    --foglio: #1c1a15;
    --inchiostro: #ece5d8;
    --muto: #8f877a;
    --riga: #36312a;
    --pensierino: #9db0c8;
    --appunto: #e58a6c;
    --diario: #82bb9d;
    --pericolo: #e57a62;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
/* iOS ingrandisce la pagina se un campo ha il testo sotto i 16px: tutti i campi stanno a 16px o più */
input, textarea, select { font-size: max(16px, 1em); }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 16px/1.6 var(--mono);
  min-height: 100dvh;
}
#app { max-width: 640px; margin: 0 auto; padding: 0 16px calc(40px + env(safe-area-inset-bottom)); }
a { color: inherit; }
button { font: inherit; color: inherit; }

.marchio { font: 500 15px/1 var(--mono); letter-spacing: .32em; margin: 0; }
.muto { color: var(--muto); }
.errore { color: var(--pericolo); font: 14px var(--mono); min-height: 1em; }
.vuoto { color: var(--muto); text-align: center; padding: 40px 0; font-style: italic; }
.piccolo-testo { font: 12px var(--mono); }

.link { background: none; border: 0; padding: 8px 0; font: 14px var(--mono); text-decoration: none; cursor: pointer; }
.link.pericolo { color: var(--pericolo); margin-top: 28px; display: block; }
.link.pericolo.conferma { font-weight: 500; }

.primario {
  background: var(--inchiostro); color: var(--carta); border: 0; border-radius: 999px;
  padding: 12px 22px; font: 500 15px var(--mono); cursor: pointer; text-decoration: none;
}
.primario.piccolo { padding: 8px 16px; font-size: 14px; }
.primario:disabled { opacity: .5; }

.tag { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.tag.pensierino, .pensierino .tag { color: var(--pensierino); }
.tag.appunto, .appunto .tag { color: var(--appunto); }
.tag.diario, .diario .tag { color: var(--diario); }

/* ---------- login ---------- */
.login { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.login .marchio { font-size: 22px; }
.login form { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
input[type=password], input[type=search] {
  font: 17px var(--mono); padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--riga); background: var(--foglio); color: var(--inchiostro); width: 100%;
  -webkit-appearance: none; appearance: none;
}
input:focus, textarea:focus { outline: 2px solid var(--inchiostro); outline-offset: 1px; }

/* ---------- home ---------- */
.testata { display: flex; justify-content: space-between; align-items: center; padding: calc(18px + env(safe-area-inset-top)) 0 18px; }

.scelta { display: grid; gap: 10px; }
.tipo {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  padding: 18px 20px; border-radius: 16px; background: var(--foglio);
  border: 1px solid var(--riga); border-left: 6px solid var(--c);
  transition: transform .12s;
}
.tipo:active { transform: scale(.985); }
.tipo .nome { font: 600 21px/1.2 var(--mono); color: var(--c); letter-spacing: -.01em; }
.tipo .descr { font-size: 13px; line-height: 1.45; color: var(--muto); }
.tipo.pensierino, .card.pensierino, .scrivi.pensierino { --c: var(--pensierino); }
.tipo.appunto, .card.appunto, .scrivi.appunto { --c: var(--appunto); }
.tipo.diario, .card.diario, .scrivi.diario, .leggi.diario { --c: var(--diario); }

.archivio { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chip {
  border: 1px solid var(--riga); background: transparent; border-radius: 999px;
  padding: 6px 14px; font: 13px var(--mono); white-space: nowrap; cursor: pointer;
}
.chip.on { background: var(--inchiostro); color: var(--carta); border-color: var(--inchiostro); }

#lista { display: flex; flex-direction: column; gap: 10px; }
.card {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  padding: 16px 18px; border-radius: 14px; background: var(--foglio); border: 1px solid var(--riga);
}
.card .testo { white-space: pre-wrap; overflow-wrap: anywhere; }
.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { display: flex; justify-content: space-between; gap: 10px; font: 12px var(--mono); color: var(--muto); }
.card.pensierino .testo { font-style: italic; }
.card .timbro, .card .giorno { font: 12px/1.4 var(--mono); color: var(--c); display: flex; flex-direction: column; }
.card .giorno { font: 600 15px var(--mono); }
.card .timbro .dove { color: var(--muto); }

/* ---------- scrivere / leggere ---------- */
.barra {
  position: sticky; top: 0; z-index: 2; background: var(--carta);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 0 10px; border-bottom: 1px solid var(--riga);
}
.barra > :last-child { justify-self: end; }
.scrivi, .leggi { padding-top: 18px; }

.timbro { font: 13px/1.5 var(--mono); }
.timbro.grande {
  border: 1.5px solid var(--c); color: var(--c); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 16px;
}
.timbro .data { }
.timbro.grande .dove { font-weight: 500; }
.timbro .coord { font-size: 11px; }
.timbro a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.data-piccola { font: 12px var(--mono); margin-bottom: 10px; }

.giorno { font: 600 21px/1.25 var(--mono); color: var(--diario); margin: 0 0 18px; }
.pezzo { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px dashed var(--riga); }
.pezzo .timbro { color: var(--diario); margin-bottom: 4px; }
.pezzo .timbro .dove { color: var(--muto); }
.pezzo .testo { white-space: pre-wrap; overflow-wrap: anywhere; }
.scrivi .timbro#timbro:not(.grande) { color: var(--diario); margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 0 8px; }
.scrivi .timbro#timbro:not(.grande) .coord { display: none; }

textarea {
  width: 100%; border: 0; background: transparent; resize: none; padding: 0;
  font: 17px/1.65 var(--mono); color: var(--inchiostro); min-height: 45dvh;
}
textarea:focus { outline: none; }
.scrivi.pensierino textarea { font-style: italic; }

/* solo la prima lettera maiuscola: "Martedì 27 ottobre" */
.giorno::first-letter, .timbro.grande .data::first-letter, .data-piccola::first-letter { text-transform: uppercase; }
.card .giorno { display: block; }

/* home: l'archivio non si vede subito */
.verso-archivio {
  display: flex; justify-content: space-between; align-items: center; margin-top: 34px;
  padding: 14px 4px; border-top: 1px solid var(--riga); text-decoration: none;
  font-size: 13px; color: var(--muto);
}
.archivio.pagina { margin-top: 18px; }

/* ---------- audio ---------- */
.scrivi { padding-bottom: 90px; }
.registratore {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; justify-content: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--carta) 35%);
}
.rec {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--riga); background: var(--foglio); border-radius: 999px;
  padding: 12px 22px; font: 500 14px var(--mono); cursor: pointer; min-width: 170px; justify-content: center;
}
.rec .pallino { width: 10px; height: 10px; border-radius: 50%; background: var(--appunto); }
.rec.on { background: var(--appunto); border-color: var(--appunto); color: var(--foglio); }
.rec.on .pallino { background: var(--foglio); border-radius: 2px; animation: pulsa 1s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .35; } }

#clip:not(:empty) { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.lettore {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px;
  border: 1px solid var(--riga); border-radius: 12px; background: var(--foglio);
  font: 12px var(--mono); color: var(--muto); margin-bottom: 8px; cursor: pointer;
}
#clip .lettore { margin-bottom: 0; }
.lettore .play {
  width: 36px; height: 36px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--c, var(--inchiostro)); color: var(--foglio); font-size: 12px; line-height: 1;
}
.lettore .traccia { flex: 1; height: 24px; position: relative; display: flex; align-items: center; }
.lettore .traccia::before { content: ''; position: absolute; inset: 11px 0; background: var(--riga); border-radius: 2px; }
.lettore .traccia i { position: relative; height: 2px; width: 0; background: var(--c, var(--inchiostro)); border-radius: 2px; }
.lettore .tempo { flex: none; min-width: 42px; text-align: right; }
.lettore .via { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--muto); padding: 0 2px 0 6px; cursor: pointer; }
.pezzo .lettore { margin: 6px 0 8px; }
.nota-audio { color: var(--c); }
.card .meta .nota-audio { margin: 0 auto 0 4px; }