/*
 * Fase 8, Task 8.1 — **mobile calmo, desktop ricco.**
 *
 * ⚠️ Non e' una preferenza estetica: e' il vincolo di prodotto. Lo spec
 * descrive Jeff come tool-allergic, con «zero lavoro chiesto a Jeff» come
 * principio. Su telefono si vede UNA cosa alla volta e niente altro; sul
 * desktop le due colonne stanno insieme perche' li' c'e' spazio per il
 * contesto senza chiederlo.
 */

/*
 * ⭐ **La tavolozza viene da Undivided Life, non da noi.** Presa dal loro sito
 *    il 17/9: verde di marca `#1a4314`, salvia `#b2d2a4`, EB Garamond.
 *
 * ⛔ **Il verde di marca fa da FONDO, la salvia da INCHIOSTRO** — e non il
 *    contrario. `#1a4314` su un fondo scuro e' illeggibile: usarlo come
 *    inchiostro «perche' e' il colore del logo» e' il modo tipico in cui
 *    un'identita' si rovina portandola al buio.
 *
 * ⚠️ `EB Garamond` non si scarica (nessuna risorsa remota, e comunque non si
 *    chiede a Jeff di aspettare un font): se c'e' sulla macchina si usa,
 *    altrimenti si scende sul serif di sistema. La distinzione che conta
 *    regge comunque: le parole delle PERSONE in un carattere da lettura,
 *    quelle del SISTEMA in quello d'interfaccia.
 */
:root {
  --brand: #1a4314;
  --sage: #b2d2a4;
  --bg: #0c110b;
  --card: #141a13;
  --card-2: #1a221a;
  --line: #263124;
  --ink: #edf2ea;
  --ink-dim: #9dab9c;
  --ink-faint: #6e7c6d;
  --warn: #e8b465;
  --warn-bg: #2a2114;
  --accent: #b2d2a4;
  --accent-bg: #1b2a19;
  --read: "EB Garamond", ui-serif, "New York", Iowan Old Style, Georgia, serif;
  --radius: 12px;
  color-scheme: dark;
}

/*
 * 🔴 **Qui c'era un blocco `prefers-color-scheme: light` che ribaltava tutta
 *    la tavolozza, e il risultato e' che Gary si presentava CHIARO.** Trovato
 *    da Raffa il 17/9, al primo accesso vero di Jeff: il Mac era in tema
 *    chiaro, quindi l'applicazione lo era.
 *
 * ⛔ **Il difetto non era il codice, era il ragionamento.** Rispettare il tema
 *    del sistema operativo e' una buona regola per un sito; per un prodotto
 *    con un aspetto **promesso** e' consegnare a un'impostazione altrui la
 *    cosa che qualcuno ha approvato guardandola. Il mockup era scuro: scuro
 *    deve essere anche sulla macchina di chi ha il tema chiaro.
 *
 * 📌 E si vedeva solo aprendolo **in tema chiaro**. Io l'ho sempre guardato
 *    dalla parte dove era giusto — che e' il modo in cui un difetto
 *    sopravvive a una revisione.
 *
 * ⚠️ Se un giorno serve la scelta, si aggiunge un interruttore in pagina, non
 *    un media query: la preferenza sarebbe DI GARY, non del sistema.
 */

* { box-sizing: border-box; }

/*
 * 🔴 **`hidden` PERDE contro una regola d'autore, e qui perdeva davvero.**
 *
 * L'attributo `hidden` funziona perche' il foglio del browser dice
 * `[hidden] { display: none }` — una regola d'autore con la stessa specificita'
 * la scavalca. `.cards { display: grid }` faceva esattamente questo: la lista
 * *Everything in play* nasceva `hidden`, il bottone diceva «show», **e la lista
 * era aperta**.
 *
 * ⚠️ Non era un dettaglio estetico: rompeva il requisito «mobile calmo» — su un
 * telefono Jeff vedeva tutto insieme, cioe' l'opposto di cio' che la fase
 * promette. Trovato guardando l'anteprima, non leggendo il codice: nessun test
 * sugli invarianti poteva prenderlo.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.top { padding: 1.5rem 0 0.5rem; }
.top h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.01em; }
.sub { margin: 0.15rem 0 0; color: var(--ink-dim); font-size: 0.85rem; }

h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-dim);
  margin: 1.75rem 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* ─── Il banner dei segnali spenti ─────────────────────────────────────────
   Non e' chiudibile e non e' discreto, di proposito. */
.blind {
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--ink);
}
.blind strong { color: var(--warn); }

/* ─── Cio' che non gira ancora ─────────────────────────────────────────────
   Compatto ma non nascosto: sono poche righe, e spariranno da sole. */
.gates {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  margin-top: 1rem;
}
.gates h2 { margin: 0 0 0.4rem; }
.gates ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }
.gates li { font-size: 0.83rem; color: var(--ink-dim); }
.gates .match-why { color: var(--warn); white-space: nowrap; }

/* ─── Settled ─────────────────────────────────────────────────────────────── */
.settled { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.settled li {
  font-size: 0.85rem;
  color: var(--ink-dim);
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}
.outcome-label {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.7rem;
  white-space: nowrap;
  color: var(--ink);
}
.settled .when { margin-left: auto; font-size: 0.72rem; opacity: 0.7; white-space: nowrap; }

/* ─── La coda offline ─────────────────────────────────────────────────────── */
.queue {
  margin-top: 0.8rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
}
.queue p { margin: 0.2rem 0; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.queue .refused { color: var(--warn); }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  cursor: pointer;
}
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/*
 * ⭐⭐ **L'AZIONE E' IL TITOLO, la narrazione scende sotto.**
 *
 * 🔴 Fino al 17/9 la scheda diceva due volte la stessa cosa: `what` raccontava
 *    *cosa e' successo* e `next` diceva *cosa fare*, con le stesse parole.
 *    Due righe piene, per 136 item. Raffa l'ha visto al primo accesso vero.
 *
 * 📌 Adesso il titolo e' l'imperativo e il racconto e' un contesto richiudibile.
 *    Il titolo puo' essere corto **proprio perche' il contesto e' a un clic**:
 *    non deve portarselo dietro.
 */
.what { margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.35; }
.ctx { margin: 0.6rem 0 0; }
.ctx summary {
  list-style: none; cursor: pointer; font-size: 0.8rem; color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.ctx summary::-webkit-details-marker { display: none; }
.ctx summary::before { content: "\203A"; color: var(--accent); display: inline-block; transition: transform 0.18s ease; }
.ctx[open] summary::before { transform: rotate(90deg); }
.ctx summary:hover { color: var(--accent); }
/* ⚠️ Si chiama «Context» e NON «What was said»: `what` e' il racconto di Gary,
 *    non una citazione. La frase vera sta in `item_citations`, e chiamarla
 *    «cio' che e' stato detto» sarebbe mettere parole in bocca a qualcuno. */
.ctx .body {
  margin: 0.5rem 0 0; padding: 0.1rem 0 0.1rem 0.75rem;
  border-left: 2px solid var(--accent-bg);
  font-family: var(--read); font-size: 0.97rem; line-height: 1.5; color: var(--ink-dim);
}

.meta {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.75rem;
}

.badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  color: var(--ink-dim);
}
/* ⭐ «Di chi e'» sta NELLA lista, non solo aprendo: un claim che nessuno vede
   previene la doppia azione ma non la diffusione di responsabilita'. */
.badge.claim { border-color: var(--accent); color: var(--accent); }
.badge.reason { border-style: dashed; }

/* ⚠️ Il caveat e' VISIVO, e l'item non porta un'azione: si mostra, non chiede
   niente a nessuno. */
.caveat {
  margin: 0.6rem 0 0;
  padding: 0.45rem 0.6rem;
  background: var(--warn-bg);
  border-left: 3px solid var(--warn);
  border-radius: 0 6px 6px 0;
  font-size: 0.82rem;
  color: var(--ink);
}

.actions-bar {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
/* Nel dettaglio c'e' spazio: i quattro stanno larghi. */
.actions-bar.more { margin-top: 1.1rem; }

.action {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.action:hover { border-color: var(--accent); color: var(--accent); }
.action:disabled { opacity: 0.45; cursor: progress; }
.action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* L'esito di un gesto rifiutato resta li', perche' dice cosa fare. */
.outcome:empty { display: none; }

/* Il campo che sostituisce `prompt()`: dentro la scheda, non sopra. */
.ask {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: flex-end;
}
.ask label {
  flex: 1 1 12rem;
  font-size: 0.78rem;
  color: var(--ink-dim);
  display: grid;
  gap: 0.25rem;
}
.ask input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  padding: 0.35rem 0.55rem;
  font: inherit;
  font-size: 0.85rem;
}
.ask input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.quiet .card { background: transparent; }
.empty { color: var(--ink-dim); font-size: 0.9rem; margin: 0.4rem 0 0; }

.toggle {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font: inherit;
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

/* ─── Il dettaglio ────────────────────────────────────────────────────────── */
dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  max-width: 34rem;
  width: calc(100% - 2rem);
  padding: 1.25rem;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.close {
  float: right;
  background: none;
  border: 0;
  color: var(--ink-dim);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.reads { display: grid; gap: 0.6rem; margin: 1rem 0; }
.read { border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.75rem; }
.read h4 {
  margin: 0 0 0.2rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-dim);
}

/* 🔑 L'ancoraggio: le parole esatte. E' cio' che rende un item difendibile
   invece che plausibile. */
blockquote {
  margin: 0.5rem 0;
  padding: 0.5rem 0.85rem;
  border-left: 3px solid var(--accent);
  background: rgba(110, 168, 254, 0.07);
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
}
blockquote cite { display: block; margin-top: 0.3rem; font-size: 0.75rem; color: var(--ink-dim); font-style: normal; }

/* ─── Desktop ─────────────────────────────────────────────────────────────
   🔄 **Erano DUE COLONNE fino al 16/9, e adesso e' una.** La barra delle
   destinazioni mostra una sezione per volta: due colonne servivano a far
   stare insieme «Needs you» e «Everything in play» in una pagina che le aveva
   entrambe sempre aperte — cioe' a mitigare un problema che adesso non c'e'.
   ⚠️ E quel layout valeva anche per la RUBRICA, che eredita `main`: la casella
   di ricerca finiva a sinistra e i risultati in una colonna a destra, il che
   faceva sembrare quella pagina un'altra applicazione. */
@media (min-width: 900px) {
  body { padding-inline: 2rem; }
  main { max-width: 56rem; }
}

/* ─── I link ──────────────────────────────────────────────────────────────
   🔴 **Non c'era NESSUNA regola sui link fino al 16/9.** Il «← Desk» della
   rubrica usciva col blu di sistema e la sottolineatura del browser: la
   palette era identica al resto, ma bastava quell'unico elemento fuori
   vocabolario a far sembrare quella pagina un'altra applicazione. */
a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
a:hover { text-decoration-color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ─── Dove si va ──────────────────────────────────────────────────────────
   Una riga di destinazioni, col conteggio di cosa c'e' dietro ognuna. Scorre
   in orizzontale sul telefono invece di andare a capo: una barra che diventa
   tre righe non e' piu' una barra. */
.nav {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 0 0.9rem;
  margin: 0 0 0.4rem;
}
.nav::-webkit-scrollbar { display: none; }

.nav-item {
  flex: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-dim);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  text-decoration: none;
  /* Bersaglio da dito: 44px di altezza totale con il padding. */
  min-height: 2.4rem;
  display: inline-flex;
  align-items: center;
}
.nav-item .lb { display: inline-flex; align-items: center; gap: 0.5rem; }
.nav-ic { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
/* ⭐ People non e' una porta della scrivania: e' l'archivio delle persone. */
.nav-split { width: 1px; align-self: stretch; background: var(--line); margin: 0.15rem 0.35rem; flex: none; }
.nav-item:hover { border-color: var(--accent); color: var(--accent); }

/*
 * ⭐ **L'uscita si stacca dalle destinazioni.** `margin-left: auto` la spinge
 *    in fondo alla barra: e' l'unico comando che non porta a una vista, e in
 *    mezzo alle altre si premerebbe per sbaglio.
 * ⚠️ Il bordo sparisce perche' non e' una meta, e' un'azione: le pastiglie
 *    con il bordo dicono *«qui c'e' qualcosa da vedere»*, e questa no.
 */
.nav-signout {
  margin-left: auto;
  border-color: transparent;
  opacity: 0.75;
}
.nav-signout:hover { opacity: 1; }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-item[aria-current='page'] {
  background: var(--card);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}

/* Il titolo di un gruppo dentro «In play»: e' una riga di elenco, non una
   scheda — quindi non ne ha il vestito. */
.group {
  list-style: none;
  margin: 1.1rem 0 0.1rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.group:first-child { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   LA RUBRICA — «chi conosco a Denver?»
   ═══════════════════════════════════════════════════════════════════════════
   Una casella sola, grande, sopra a tutto. Non un filtro, non una lista con le
   faccette: testo libero, come cerca già lui. */

.search { margin: 0 0 1.25rem; }
.search-label { display: block; font-size: .8rem; opacity: .65; margin-bottom: .35rem; }

.search-box {
  width: 100%;
  box-sizing: border-box;
  padding: .8rem .9rem;
  font-size: 1.15rem;
  color: inherit;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
}
.search-box:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-hint { font-size: .78rem; opacity: .5; margin: .4rem 0 0; }

.people { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

.person {
  padding: .85rem .95rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
}
.person-name { margin: 0; font-size: 1.05rem; }
.person-role { margin: .15rem 0 0; font-size: .85rem; opacity: .7; }

/* Perché è uscita da questa domanda. Non è decorazione: una persona trovata
   per una nota e una trovata per il nome non sono la stessa risposta. */
.match-why { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: .55rem 0 0; padding: 0; }
.chip {
  font-size: .7rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: rgba(76, 141, 255, .14);
  border: 1px solid rgba(76, 141, 255, .3);
}

/* La nota di Jeff: verbatim, e con la sua fonte. È l'unica cosa in questa
   scheda che non abbiamo scritto noi. */
.note {
  margin: .65rem 0 0;
  padding: .5rem .7rem;
  border-left: 3px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .02);
}
.note-body { margin: 0; white-space: pre-wrap; }
.note-source { margin: .35rem 0 0; font-size: .7rem; opacity: .5; }

.last-touch { margin: .55rem 0 0; font-size: .8rem; opacity: .75; }
.last-touch-none { opacity: .45; font-style: italic; }

.visibility { margin: .45rem 0 0; font-size: .72rem; }
.shared { opacity: .6; }
.private-to-you { color: #ffce6b; opacity: .85; }

/* ════════════════════════════════════════════════════════════════════════
   La revisione delle voci — UNA SCHEDA PER RIUNIONE
   ════════════════════════════════════════════════════════════════════════
   🔴 Riscritta il 16/9, dopo aver aperto l'app e guardata. Erano cinquanta
   schede identiche con sopra un identificativo esadecimale. Qui la gerarchia
   dice la cosa giusta: la RIUNIONE e' il contenitore, la voce e' una riga
   dentro. Chi legge vede prima quante stanze deve ricordare, non quante
   domande deve subire. */

.meeting .what { font-size: 1.05rem; }

.voice-list {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

/* Le voci di una riunione sono una LISTA, non cinque schede: il filo
   verticale le lega a sinistra, e costa meno inchiostro di cinque bordi. */
.voice {
  padding: 0.6rem 0 0.6rem 0.85rem;
  border-left: 2px solid var(--line);
}
.voice + .voice { border-top: 1px solid var(--line); }
.voice:hover { border-left-color: var(--accent); }

.voice-q { font-weight: 600; font-size: 0.95rem; }

.voice-why {
  color: var(--ink-dim);
  font-size: 0.88rem;
  margin-top: 0.15rem;
}

.voice .actions { margin-top: 0.5rem; }

/* ⭐ Il gesto principale si vede che e' principale. Su un'astensione e'
   «It was…» — dare un nome e' l'unica risposta che sblocca gli impegni di
   quella riunione. */
.voice .actions .action:first-child {
  border-color: var(--accent);
  color: var(--accent);
}

/* ⛔ **«FYI» e' una parola, non una striscia.** Fino al 16/9 ogni scheda non
   azionabile portava un blocco ambra con bordo colorato — l'elemento piu' forte
   della pagina, su quasi tutte le schede. Un accento che marca la regola
   invece dell'eccezione non evidenzia: colora e basta. Il perche' e' passato
   nel dettaglio, dove chi lo vuole lo trova. */
.badge.fyi {
  border-style: dashed;
  color: var(--ink-dim);
}


/* ⭐ Il gesto primario — «Done». Uno solo per scheda: se ce ne fossero due,
   nessuno dei due lo sarebbe. */
.action.primary {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}


/* ⭐ «Looks done» — il reconciler propone, e si vede che e' una proposta.
   Verde sarebbe una conferma; questo e' un suggerimento, e resta discreto. */
.badge.looks-done { border-style: dashed; border-color: var(--accent); color: var(--accent); }
.looks-done-why { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--ink-dim); }


/*
 * ⭐ Il segno di Undivided Life, dal loro file ufficiale, incorporato come
 *    data URI: nessuna risorsa remota, nessuna richiesta in piu' all'avvio.
 * ⚠️ Il filtro lo riversa in chiaro senza toccarne la forma — e' la versione
 *    per fondi scuri, non un logo ridisegnato da noi.
 */
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand .sig { width: 19px; height: 28px; overflow: hidden; position: relative; flex: 0 0 auto; }
.brand .sig img { position: absolute; left: -1px; top: 0; height: 28px; width: auto; max-width: none; filter: brightness(0) invert(1); opacity: 0.92; }
.brand .nm { font-family: var(--read); font-size: 1.15rem; font-weight: 600; line-height: 1.05; }
.brand .nm small { display: block; font-family: inherit; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-top: 1px; font-family: system-ui, sans-serif; }


/* ─────────────────────────────────────────────────────────────────────────
   IL GUSCIO — colonna + palco
   ───────────────────────────────────────────────────────────────────────── */
.shell { display: block; }
.rail { padding: 0; }
.stage { min-width: 0; }

@media (min-width: 900px) {
  .shell {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    align-items: start;
    gap: 0;
    /* 🔴 **Qui c'era `max-width: 1100px; margin: 0 auto`, e su uno schermo
       largo lasciava due terzi di vuoto.** La colonna deve stare AL BORDO: e'
       il telaio della finestra, non un riquadro appoggiato in mezzo. A tenere
       la riga leggibile ci pensa il palco, che cappa il CONTENUTO — non il
       guscio. */
    min-height: 100vh;
  }
  /* ⭐ La colonna resta ferma mentre il palco scorre: e' cio' che la rende
     una colonna e non un'intestazione lunga. */
  .rail {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    align-self: stretch;
    border-right: 1px solid var(--line);
    padding: 1.1rem 0.8rem 1.4rem;
    min-height: 100vh;
  }
  .rail .top { margin: 0 0 1.1rem; padding: 0 0.3rem; }
  .nav { flex-direction: column; align-items: stretch; gap: 0.15rem; overflow: visible; padding: 0; margin: 0; }
  .nav-item { width: 100%; text-align: left; border-color: transparent; border-radius: 9px; }
  .nav-item[aria-current='page'] { background: var(--accent-bg); border-color: transparent; }
  /* ⛔ In colonna la riga che stacca People e' ORIZZONTALE, non verticale:
     la stessa regola girata di 90 gradi insieme alla barra. */
  .nav-split { width: auto; height: 1px; align-self: auto; margin: 0.5rem 0.3rem; }
  .nav-signout { margin-left: 0; margin-top: 0.6rem; }
  .stage { padding: 1.6rem 2.2rem 3rem; }
  /* ⭐ Il tetto sta sul CONTENUTO, non sul guscio: una riga di testo oltre i
     ~75 caratteri si legge peggio, ma il fondo deve arrivare al bordo. */
  .stage > * { max-width: 760px; }
  .stage > .gates, .stage > section { max-width: 820px; }
  .stage > .sub { margin-top: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
   ⭐⭐ I RESOCONTI NON SONO SCHEDE
   Un item che non chiede niente a nessuno non merita una scheda con dei
   bottoni sotto: sono 125 su 203 in produzione, cioe' la meta' della pagina
   spesa per cose su cui non c'e' niente da decidere. Diventano una riga.
   ───────────────────────────────────────────────────────────────────────── */
.fold {
  width: 100%; text-align: left; font: inherit; font-size: 0.9rem; cursor: pointer;
  background: none; border: 1px dashed var(--line); border-radius: 10px;
  color: var(--ink-dim); padding: 0.75rem 0.9rem;
  display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
}
.fold:hover { border-color: var(--accent); color: var(--ink); }
.fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fold b { color: var(--ink); font-weight: 600; }
.fold .arrow { color: var(--ink-faint); font-size: 0.8rem; }

/* Il selettore di chi prende in carico. */
.pick { width: 100%; font: inherit; font-size: 0.9rem; margin-top: 0.3rem;
  background: var(--card-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 0.45rem 0.55rem; }
.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ─────────────────────────────────────────────────────────────────────────
   ⭐⭐ LA SCALA TIPOGRAFICA — presa dal prototipo approvato.
   Il carattere da lettura compare in DUE posti soli, ed e' il punto: la
   frase in alto e le parole delle persone. Tutto il resto e' interfaccia.
   ⛔ Se il serif finisce anche sui bottoni e sulle etichette, la distinzione
      smette di distinguere e diventa una decorazione.
   ───────────────────────────────────────────────────────────────────────── */
.today {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-faint);
}
.lede {
  font-family: var(--read);
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.18;
  color: var(--ink);
  margin: 0.3rem 0 0;
  /* ⛔ Annulla il maiuscoletto grigio degli h2 di sezione: qui e' un titolo,
     non un'etichetta. */
  text-transform: none;
  display: block;
}
/* ⭐ La seconda meta' della frase e' l'accento caldo, e solo quella: se e'
   colorato tutto, non e' colorato niente. */
.lede .calm { color: var(--warn); }
.stage > .sub { margin-top: 0.45rem; color: var(--ink-faint); font-size: 0.78rem; }

/* La scheda: piu' aria, e il titolo con il peso del prototipo. */
.card { padding: 0.85rem 0.9rem 0.75rem; }
.cards { gap: 0.5rem; }
.badge { font-size: 0.72rem; }

/* Il perche' di una riga chiusa: sotto, e piu' quieto del fatto. */
.settled-why { display: block; font-size: 0.78rem; color: var(--ink-faint); margin-top: 0.15rem; }

/*
 * ⭐ Le battute di una voce: nel carattere da LETTURA, perche' sono parole di
 *    una persona. E' la stessa distinzione della scheda — cio' che qualcuno ha
 *    detto contro cio' che il sistema pensa — applicata qui, dove decide se
 *    Jessie riconosce qualcuno o no.
 */
.voice-lines { margin: 0.5rem 0 0; }
.voice-line {
  margin: 0 0 0.35rem;
  padding: 0.1rem 0 0.1rem 0.75rem;
  border-left: 2px solid var(--accent-bg);
  font-family: var(--read);
  font-size: 0.97rem;
  line-height: 1.45;
  color: var(--ink);
}
.voice-line:last-child { margin-bottom: 0; }
/* Il ragionamento scende sotto e si fa piu' quieto: e' un'ipotesi, non un fatto. */
.voice-why { font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.5rem; }

/* ─────────────────────────────────────────────────────────────────────────
   LA GIORNATA — il brief come pagina.
   ⭐ Qui il carattere da lettura fa il lavoro principale: è una cosa che si
      LEGGE, non una lista che si scorre.
   ───────────────────────────────────────────────────────────────────────── */
.giorno-testa {
  font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-faint); margin: 0 0 1rem;
}
ol.giorno { list-style: none; counter-reset: g; margin: 0; padding: 0; }
ol.giorno li {
  counter-increment: g;
  position: relative;
  padding: 0 0 1.15rem 2.1rem;
  margin: 0 0 1.15rem;
  border-bottom: 1px solid var(--line-soft, var(--line));
}
ol.giorno li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
ol.giorno li::before {
  content: counter(g);
  position: absolute; left: 0; top: 0.12rem;
  font-family: var(--read); font-size: 1.05rem; font-weight: 600;
  color: var(--accent); opacity: 0.8;
}
.giorno-cosa {
  font-family: var(--read);
  font-size: 1.2rem; font-weight: 500; line-height: 1.35;
  letter-spacing: -0.01em; margin: 0; color: var(--ink);
}
.giorno-ctx { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--ink-dim); line-height: 1.5; }
.giorno-meta { margin: 0.45rem 0 0; font-size: 0.76rem; color: var(--ink-faint); }
.giorno-meta .chi { color: var(--ink-dim); }
.giorno-vuoto {
  font-family: var(--read); font-size: 1.35rem; line-height: 1.35; margin: 0.5rem 0 0;
}
.giorno-vuoto span { font-size: 0.85rem; font-family: system-ui, sans-serif; color: var(--ink-faint); }