/* Area privata «mio» — carta calda, inchiostro scuro, un solo accento. Pensata prima per il telefono. */
:root {
  --fondo: #f4f1ea; --carta: #fffdf8; --testo: #1d1c1a; --tenue: #6b675f; --linea: #e2ddd2;
  --accento: #1f6f5c; --accento-tenue: #dcece6; --rosso: #b4432b; --rosso-tenue: #f6e1da;
  --raggio: 10px; --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #16181a; --carta: #1e2124; --testo: #ecebe7; --tenue: #9c9a93; --linea: #2e3236;
    --accento: #5fc0a3; --accento-tenue: #1f3530; --rosso: #f08a6e; --rosso-tenue: #3a2620;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--testo); font: 16px/1.45 var(--font); }
a { color: var(--accento); }
main { max-width: 760px; margin: 0 auto; padding: 16px 16px calc(48px + env(safe-area-inset-bottom)); }
h1 { font-size: 26px; margin: 8px 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); margin: 26px 0 8px; }
.conta { font-weight: 400; color: var(--tenue); font-size: .75em; }
.nota { color: var(--tenue); font-size: 14px; margin: 4px 0 14px; }
.vuoto { color: var(--tenue); padding: 24px 0; }

/* barra in alto */
.barra { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px; background: var(--fondo); border-bottom: 1px solid var(--linea); }
.marchio { font-weight: 700; font-size: 20px; text-decoration: none; color: var(--testo); letter-spacing: -0.02em; }
.barra nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.barra nav a { text-decoration: none; color: var(--tenue); padding: 8px 10px; border-radius: 8px; white-space: nowrap; }
.barra nav a[aria-current] { color: var(--testo); background: var(--carta); box-shadow: inset 0 0 0 1px var(--linea); }
.barra form { margin: 0; }

/* controlli */
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { width: 100%; background: var(--carta); border: 1px solid var(--linea); border-radius: 8px;
  padding: 10px 12px; min-height: 44px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }
button { background: var(--carta); border: 1px solid var(--linea); border-radius: 8px; padding: 10px 16px; min-height: 44px; cursor: pointer; }
button.primario { background: var(--accento); border-color: var(--accento); color: var(--carta); font-weight: 600; }
button.link { background: none; border: 0; color: var(--tenue); padding: 8px; min-height: 0; }
label { display: grid; gap: 4px; font-size: 14px; color: var(--tenue); }
label > input, label > select, label > textarea { color: var(--testo); font-size: 16px; }

.testa { display: grid; gap: 8px; }
.filtri { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.filtri select { width: auto; max-width: 48vw; }
.griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.griglia .largo, .griglia button { grid-column: 1 / -1; }
.scheda { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 14px; margin: 12px 0; }
.veloce { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.veloce input[name=titolo] { flex: 1 1 100%; }
.veloce button { flex: 0 0 auto; }
.veloce input[name=progetto] { flex: 1 1 120px; }
.veloce input[type=date], .veloce input[type=time] { width: auto; flex: 1 1 130px; }
.etichetta { color: var(--tenue); font-size: 14px; }
details.nuova { margin: 14px 0; }
details.nuova > summary, details.storico > summary { cursor: pointer; color: var(--accento); padding: 8px 0; font-weight: 600; }
details.nuova[open] > summary { margin-bottom: 8px; }
details.storico { margin-top: 24px; font-size: 14px; }
details.storico ul { padding-left: 18px; }

/* avvisi */
.avviso { background: var(--accento-tenue); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.avviso.errore { background: var(--rosso-tenue); color: var(--rosso); }

/* liste */
.lista { list-style: none; margin: 0; padding: 0; background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); }
.voce { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.voce:last-child { border-bottom: 0; }
.voce .corpo { flex: 1; min-width: 0; text-decoration: none; color: var(--testo); display: grid; gap: 2px; }
.voce .titolo { overflow-wrap: anywhere; }
.dettagli { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--tenue); align-items: center; }
.estratto { flex-basis: 100%; }
.tag { background: var(--fondo); border-radius: 999px; padding: 1px 8px; }
.tag.tenue { background: none; padding: 0; }
.tag.in-corso { background: var(--accento-tenue); color: var(--accento); }
.p1 .titolo { font-weight: 600; }
.p1 .titolo::after { content: " !"; color: var(--rosso); }
.spunta { margin: 0; }
.spunta button { width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid var(--tenue); background: none; margin-top: 1px; }
.spunta button:hover { border-color: var(--accento); background: var(--accento-tenue); }
.scadute h2 { color: var(--rosso); }
.scadute .data { color: var(--rosso); }
.chiusa .titolo { color: var(--tenue); text-decoration: line-through; }
.segno { width: 26px; text-align: center; color: var(--tenue); }
.indietro { margin: 4px 0; font-size: 14px; }

/* accesso */
.accesso { max-width: 360px; margin: 12vh auto 0; display: grid; gap: 14px; }
.accesso h1 { font-size: 40px; margin: 0; letter-spacing: -0.03em; }
.accesso form { display: grid; gap: 14px; }

@media (min-width: 700px) {
  main { padding-top: 24px; }
  .griglia { grid-template-columns: repeat(4, 1fr); }
  .griglia .largo { grid-column: 1 / -1; }
  .griglia button { grid-column: auto; }
}

/* media */
main:has(.griglia-media) { max-width: 1200px; }
.schede-media { display: flex; gap: 6px; flex-wrap: wrap; }
.schede-media button { min-height: 36px; padding: 6px 12px; border-radius: 999px; font-size: 14px; }
.schede-media button[aria-pressed=true] { background: var(--accento); border-color: var(--accento); color: var(--carta); }
.griglia-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.carta { display: grid; padding: 0; text-align: left; overflow: hidden; border-radius: var(--raggio); background: var(--carta); align-content: start; }
.carta video, .carta img, .carta .audio { width: 100%; aspect-ratio: 9 / 12; object-fit: cover; background: #000; display: block; }
.carta .audio { display: grid; place-items: center; font-size: 40px; color: var(--carta); }
.carta .info { display: grid; gap: 2px; padding: 8px; font-size: 13px; }
.carta .chi { color: var(--accento); font-weight: 600; overflow-wrap: anywhere; }
.carta .estratto { color: var(--tenue); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
dialog#grande { max-width: min(96vw, 900px); max-height: 96vh; border: 0; border-radius: 12px; padding: 10px; background: var(--carta); color: var(--testo); }
dialog#grande::backdrop { background: rgba(0, 0, 0, .8); }
dialog#grande video, dialog#grande img { max-width: 100%; max-height: 72vh; display: block; margin: 8px auto; }
dialog#grande audio { width: 100%; margin: 8px 0; }
dialog#grande .didascalia { display: grid; gap: 6px; font-size: 14px; }
dialog#grande .didascalia p { margin: 0; white-space: pre-wrap; color: var(--tenue); max-height: 20vh; overflow: auto; }
dialog#grande .chiudi { float: right; min-height: 36px; padding: 6px 12px; }

/* liste in vista (18/10): tutte le aree della pagina come bottoni, con quante voci hanno */
.aree { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; margin: 0 -16px; padding-inline: 16px; }
.aree::-webkit-scrollbar { display: none; }
.aree a { flex: none; text-decoration: none; color: var(--testo); background: var(--carta); border: 1px solid var(--linea);
  border-radius: 999px; padding: 7px 12px; font-size: 14px; white-space: nowrap; }
.aree a b { color: var(--tenue); font-weight: 400; margin-left: 2px; }
.aree a[aria-current] { background: var(--accento); border-color: var(--accento); color: var(--carta); }
.aree a[aria-current] b { color: var(--carta); }
.vista { display: inline-flex; border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; background: var(--carta); }
.vista a { text-decoration: none; color: var(--tenue); padding: 10px 12px; font-size: 14px; white-space: nowrap; display: flex; align-items: center; }
.vista a[aria-current] { background: var(--accento-tenue); color: var(--accento); font-weight: 600; }
.filtri.uno { grid-template-columns: 1fr; }
.data.scaduta { color: var(--rosso); font-weight: 600; }
.per-lista h2 { text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--testo); }