/* Lo strato del portale sopra il design system.

   Qui sta quello che il design system non sa: cosa e' un bando, cosa e' un
   verdetto, come si impagina un catalogo da mille record. Le macro di
   `_ds.html` restano ignoranti del dominio di proposito, e la mappatura fra
   verdetto e trattamento visivo vive nei template piu' queste classi.

   Nasce accanto a `portal.css` e non al posto suo: `portal.css` e `app.css`
   servono ancora le pagine non ancora migrate, e usciranno quando nessun
   template le carichera' piu'. Il nome e' in italiano come il resto del
   progetto; il vecchio e' inglese perche' e' recuperato.

   Vale anche qui la regola di `ds.css`: nessun valore letterale di colore,
   spaziatura, raggio o ombra. */

/* ============================================================
   Il guscio della pagina
   ============================================================ */

.pt-shell{
  max-width:var(--page-max);
  margin:0 auto;
  padding:var(--space-0) var(--page-gutter) var(--space-16);
}

@media (min-width:1024px){
  .pt-shell{padding-left:var(--page-gutter-lg);padding-right:var(--page-gutter-lg)}
}

/* Elenco: colonna dei filtri fissa a sinistra, contenuto a destra.
   Sotto i 1024px la colonna sparisce e i filtri diventano un pannello. */
/* Un respiro sopra le due colonne, cosi' la ricerca e la prima card non partono
   attaccate al sottotitolo, e uno piu' largo fra la colonna e l'elenco. */
.pt-colonne{display:block;padding-top:var(--space-6)}

@media (min-width:1024px){
  .pt-colonne{
    display:grid;
    grid-template-columns:var(--sidebar-w) minmax(0,1fr);
    gap:var(--space-10);
    align-items:start;
  }
}

/* ============================================================
   Testata
   ============================================================ */

.pt-topbar{
  display:flex;align-items:center;justify-content:flex-end;gap:var(--space-4);flex-wrap:wrap;
  padding:var(--space-4) var(--space-0);
  margin-bottom:var(--space-6);
  border-bottom:var(--border-width) solid var(--color-border);
}

.pt-marchio{display:flex;align-items:center;gap:var(--space-2)}
.pt-marchio:hover{text-decoration:none}
/* Il logo a due volte e mezzo la misura di prima, su richiesta del titolare:
   `calc` su un token invece di un numero scritto a mano, cosi' resta agganciato
   alla scala delle spaziature. */
.pt-logo{height:calc(var(--space-6) * 2.5);width:auto;display:block}
.pt-logo-scuro{display:none}
html.light .pt-logo-chiaro{display:none}
html.light .pt-logo-scuro{display:block}
/* La stecca fra il marchio e il nome: un separatore, non un carattere da
   leggere, quindi e' `aria-hidden` nel markup e del colore dei bordi qui. */
.pt-marchio-stecca{color:var(--color-border)}
/* Il nome resta come e' scritto: niente `--type-eyebrow-transform`, che e'
   `uppercase` e mangerebbe le maiuscole scelte a mano. */
.pt-marchio-nome{
  font-family:var(--font-display);
  font-size:var(--text-lg);line-height:var(--lh-lg);
  letter-spacing:var(--type-display-tracking);
}

/* Tutto quello che non e' il marchio sta a destra, in un gruppo solo, e resta a
   destra anche a capo: `justify-content:flex-end` allinea ogni riga della
   testata, mentre un `margin-left:auto` allinea solo la prima. */
.pt-azioni{
  margin-left:auto;
  display:flex;align-items:center;justify-content:flex-end;
  gap:var(--space-2);flex-wrap:wrap;
}

.pt-topnav{display:flex;align-items:center;gap:var(--space-1);flex-wrap:wrap}

/* Il tema chiaro si accende da qui, e la scelta resta nel browser. */
.pt-tema{margin-left:var(--space-2)}

/* L'icona del profilo chiude la riga, dopo il tema. */
.pt-profilo{margin-left:var(--space-1)}

/* ============================================================
   Intestazione di pagina e barra degli strumenti
   ============================================================ */

/* MBF Inno vive in due posti soli, il marchio in testata e l'insegna della
   pagina dell'elenco: e' la faccia del marchio, non una faccia da interfaccia.
   Tutto il resto, titoli dei bandi compresi, sta su Quicksand. */
.pt-titolo{
  font-family:var(--font-sans);
  font-size:var(--text-3xl);line-height:var(--lh-3xl);
  letter-spacing:var(--type-display-tracking);
  margin-bottom:var(--space-2);
}
/* MBF Inno vive solo accanto al logo, in testata: nessun titolo di pagina la
   usa. L'insegna dell'elenco c'era e non c'e' piu', per scelta del titolare. */

.pt-sottotitolo{
  color:var(--color-muted-fg);
  font-size:var(--text-sm);line-height:var(--lh-sm);
  margin-bottom:var(--space-6);
}

.pt-strumenti{
  display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  margin-bottom:var(--space-4);
}

.pt-conteggio{font-size:var(--text-sm);line-height:var(--lh-sm)}
.pt-conteggio strong{font-weight:var(--fw-bold)}
.pt-fioco{color:var(--color-muted-fg)}

.pt-ordina{
  margin-left:auto;
  display:flex;align-items:center;gap:var(--space-2);
  color:var(--color-muted-fg);
  font-size:var(--text-xs);line-height:var(--lh-xs);
}
.pt-ordina .ds-select-guscio,
.pt-ordina .ds-select{width:auto;font-size:var(--text-sm)}

/* Mentre la lista si rifa' resta leggibile ma spenta: un cambio istantaneo
   senza nessun segnale fa dubitare che il clic sia arrivato. */
#pt-risultati[aria-busy="true"],
#pt-scheda-zona[aria-busy="true"]{opacity:0.55;transition:var(--transition-all)}

/* ============================================================
   La griglia delle card
   ============================================================ */

.pt-griglia{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--card-gap);
}

@media (min-width:768px){
  .pt-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1440px){
  .pt-griglia{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.pt-card{
  display:flex;flex-direction:column;gap:var(--space-3);
  height:100%;
}

/* La riga delle etichette sta SOPRA il collegamento che copre la card (vedi
   `.pt-card-titolo a::after` piu' sotto): senza questo, il mouse non arriva mai
   a un'etichetta, arriva al collegamento steso sopra, e il tooltip degli
   strumenti non si apriva mai. Cliccare un'etichetta non apre piu' la scheda,
   ed e' giusto: quella e' la zona di un tooltip, non del titolo. */
.pt-card-alto{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
}

.pt-card-titolo{
  font-size:var(--text-lg);line-height:var(--lh-lg);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--type-tight-tracking);
}
.pt-card-titolo a:hover{text-decoration:underline}

/* Il collegamento copre tutta la card, cosi' il bersaglio del mouse e' la card
   intera, ma il nodo che prende il focus resta uno solo. */
.pt-card-titolo a::after{content:"";position:absolute;inset:0}
.pt-card{position:relative}

.pt-card-sommario{
  color:var(--color-muted-fg);
  font-size:var(--text-sm);line-height:var(--lh-sm);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

.pt-dati{
  display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);
  margin-top:auto;
  padding-top:var(--space-3);
  border-top:var(--border-width) solid var(--color-border);
  font-size:var(--text-sm);line-height:var(--lh-sm);
}
.pt-dato{display:inline-flex;align-items:center;gap:var(--space-2);min-width:0}
.pt-dato .ds-icon{color:var(--color-muted-fg)}
.pt-dato-etichetta{color:var(--color-muted-fg)}

.pt-fonte{
  display:inline-flex;align-items:center;gap:var(--space-2);
  position:relative;z-index:1;
  color:var(--color-muted-fg);
  font-size:var(--text-xs);line-height:var(--lh-xs);
}
.pt-fonte:hover{color:var(--color-fg)}

/* ============================================================
   I quattro verdetti
   Un colore solo su tutta la pagina, ed e' `eligible`: sono 97 su 977 e sono
   quelli che devi vedere. Gli altri tre si distinguono per peso del testo,
   bordo e opacita'. Se un secondo verdetto prende una tinta, la regola della
   spec 0006 e' rotta.
   Il colore e' `--char-hiroshi`, l'accento verde del design system, e non
   `--color-success`: il candidabile e' l'accento del portale, non il
   messaggio «e' andato tutto bene». Vive solo sulla chip: la card non prende
   piu' un bordo colorato, cosi' il colore compare una volta per record.
   ============================================================ */

.pt-verdetto-eligible{
  background:var(--char-hiroshi);
  color:var(--n-8);
  border-color:transparent;
  font-weight:var(--fw-semibold);
}
.pt-verdetto-uncertain{
  background:transparent;
  border-color:var(--color-border);
  color:var(--color-fg);
  font-weight:var(--fw-regular);
}
.pt-verdetto-excluded{
  background:transparent;
  border-color:var(--color-border);
  color:var(--color-muted-fg);
  opacity:0.6;
}
.pt-verdetto-off_type,
.pt-verdetto-unknown{
  background:transparent;
  border-style:dashed;
  border-color:var(--color-border);
  color:var(--color-muted-fg);
}

/* ============================================================
   La colonna dei filtri
   ============================================================ */

/* La colonna esiste solo da 1024px in su. Sotto, gli stessi filtri stanno nel
   pannello, e il bottone che lo apre compare al posto della colonna. */
.pt-filtri-in-colonna{display:none}

@media (min-width:1024px){
  .pt-filtri-in-colonna{
    display:block;
    position:sticky;
    top:var(--space-4);
    max-height:calc(100vh - var(--space-8));
    overflow-y:auto;
    /* Lo spazio fra le voci e la barra: senza, i conteggi la sfiorano. */
    padding-right:var(--space-4);
  }
}

/* ============================================================
   Le barre di scorrimento del portale
   Quella di sistema su Windows porta un binario chiaro che qui diventa la cosa
   piu' luminosa della pagina, accanto a card scure. Qui il binario e'
   trasparente e resta solo un cursore sottile del colore dei bordi: la barra si
   vede quando serve e non compete con il contenuto. Le due proprieta' standard
   (`scrollbar-width`, `scrollbar-color`) coprono Firefox, le pseudo classi
   `::-webkit-` coprono Chrome ed Edge; una sola delle due non basta ancora.
   ============================================================ */

.pt-filtri-in-colonna,
.pt-json{
  scrollbar-width:thin;
  scrollbar-color:var(--color-border) transparent;
}
.pt-filtri-in-colonna::-webkit-scrollbar,
.pt-json::-webkit-scrollbar{width:6px;height:6px}
.pt-filtri-in-colonna::-webkit-scrollbar-track,
.pt-json::-webkit-scrollbar-track{background:transparent}
.pt-filtri-in-colonna::-webkit-scrollbar-thumb,
.pt-json::-webkit-scrollbar-thumb{
  background:var(--color-border);
  border-radius:var(--radius-pill);
}
.pt-filtri-in-colonna::-webkit-scrollbar-thumb:hover,
.pt-json::-webkit-scrollbar-thumb:hover{background:var(--color-muted-fg)}

/* La colonna sta sottovoce. Gli assi sono righe di testo smorzato finche' non
   li apri, senza righe di separazione e senza una seconda barra di scorrimento
   dentro la prima: quella nidificata era il difetto piu' visibile della
   colonna, e nasceva da un `max-height` su ogni elenco. Adesso scorre la
   colonna e basta, perche' gli assi chiusi occupano cinque righe. */
.pt-filtri .ds-accordion-item{border-bottom:none}
.pt-filtri .ds-accordion-trigger{
  padding:var(--space-2) var(--space-0);
  font-weight:var(--fw-medium);
  color:var(--color-muted-fg);
}
.pt-filtri .ds-accordion-trigger[aria-expanded="true"]{color:var(--color-fg)}
/* La ricerca sta in cima alla colonna, larga quanto lei, con sotto la tendina
   che dice dove cercare. */
.pt-cerca{width:100%;margin-bottom:var(--space-3)}
/* «Opzioni di ricerca avanzata»: una riga piccola che si apre e si chiude. Il
   triangolo di sistema esce di scena e al suo posto c'e' la `chevron-down` dello
   sprite, che gira come quella dei cinque assi: e' lo stesso gesto, quindi tanto
   vale sia lo stesso segno. Un `+` e un meno tipografico li avevo provati, ma
   U+2212 non c'e' nel monospaziato di sistema e il browser disegnava il
   quadratino col codice dentro. */
.pt-avanzate{margin-bottom:var(--space-2)}
.pt-avanzate summary{
  display:flex;align-items:center;gap:var(--space-2);
  list-style:none;cursor:pointer;
  color:var(--color-muted-fg);
  font-size:var(--text-xs);line-height:var(--lh-xs);
}
.pt-avanzate summary::-webkit-details-marker{display:none}
.pt-avanzate summary:hover{color:var(--color-fg)}
/* Chiusa punta a destra, aperta punta in giu': la stessa regola di
   `.ds-accordion-trigger[aria-expanded="false"] .ds-icon`. */
.pt-avanzate-freccia{transition:var(--transition-all)}
.pt-avanzate:not([open]) .pt-avanzate-freccia{transform:rotate(-90deg)}
.pt-avanzate[open] summary{margin-bottom:var(--space-1)}

/* Il gruppo delle voci. `fieldset` e `legend` perche' un gruppo di radio senza
   un nome di gruppo, per chi usa uno screen reader, e' un elenco di opzioni che
   non si sa di cosa: il nome sta nel `summary`, quindi la `legend` e' nascosta
   agli occhi e non ai lettori di schermo. Le tre misure di reset servono solo a
   spegnere bordo e margini che il browser mette da solo. */
.pt-dove{
  border:0;
  margin:0;
  padding:0;
  display:flex;flex-direction:column;
}
.pt-dove legend{
  padding:0;
  margin-bottom:var(--space-1);
  color:var(--color-muted-fg);
  font-size:var(--text-xs);line-height:var(--lh-xs);
}

/* Il radio: la casella del design system, ma tonda e con il punto al centro. */
.pt-radio{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-1) var(--space-0);
  cursor:pointer;
  font-size:var(--text-sm);line-height:var(--lh-sm);
}
.pt-radio input{
  appearance:none;-webkit-appearance:none;
  width:var(--space-4);height:var(--space-4);
  margin:var(--space-0);flex:none;
  position:relative;
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-pill);
  background:var(--color-secondary);
  cursor:pointer;
  transition:var(--transition-colors);
}
.pt-radio input:checked{background:var(--char-hiroshi);border-color:var(--char-hiroshi)}
.pt-radio input:checked::after{
  content:"";position:absolute;left:4px;top:4px;
  width:6px;height:6px;
  border-radius:var(--radius-pill);
  background:var(--n-8);
}

.pt-filtri-elenco{display:flex;flex-direction:column}

/* I due livelli del territorio. Il rientro e' l'unica cosa che dice che le
   regioni stanno sotto l'Italia, quindi vale piu' di un bordo: la riga del
   gruppo prende il peso del testo, i figli restano normali. */
.pt-albero-padre{font-weight:var(--fw-semibold)}
.pt-albero-figli{
  display:flex;flex-direction:column;
  padding-left:var(--space-6);
  border-left:var(--border-width) solid var(--color-border);
  margin-left:var(--space-2);
}

.pt-filtri-azioni{display:flex;gap:var(--space-2);margin-top:var(--space-4)}
.pt-filtri-azioni .ds-button{flex:1}

/* Una voce che con i filtri di adesso non trova niente: resta cliccabile e
   resta in elenco (se sparisse, una casella spuntata potrebbe svanire mentre e'
   attiva), ma si fa da parte. */
.pt-facet-vuota{opacity:0.45}

/* Il numero accanto a una voce: la colonna dei filtri non lo mostra piu', ma
   resta nel contratto della macro `checkbox` del design system. */
.pt-conteggio-facet{
  margin-left:auto;
  color:var(--color-muted-fg);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
}

/* Il bottone che apre i filtri esiste solo dove la colonna non c'e'. */
.pt-apri-filtri{display:inline-flex}
@media (min-width:1024px){
  .pt-apri-filtri{display:none}
  .pt-filtri-in-pannello{display:none}
}

/* ============================================================
   Elenco vuoto e paginazione
   ============================================================ */

.pt-vuoto{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);
  padding:var(--space-12) var(--card-pad-lg);
  text-align:left;
}
.pt-vuoto-titolo{font-size:var(--text-xl);line-height:var(--lh-xl)}
.pt-vuoto p{color:var(--color-muted-fg);font-size:var(--text-sm);line-height:var(--lh-sm)}
.pt-vuoto code{
  font-family:var(--font-mono);font-size:var(--text-xs);
  padding:var(--space-0) var(--space-1);
  border-radius:var(--radius-sm);
  background:var(--color-muted);
}

.pt-pagine{
  display:flex;align-items:center;justify-content:center;gap:var(--space-1);
  flex-wrap:wrap;
  margin-top:var(--space-8);
  color:var(--color-muted-fg);
  font-size:var(--text-sm);line-height:var(--lh-sm);
}

/* Il numero di pagina: un quadrato con lo stesso lato dei bottoni delle frecce,
   cosi' la fila e' una riga sola di bersagli uguali. La pagina corrente prende
   il pieno come la scheda accesa del menu, che e' lo stesso concetto. */
.pt-pagina{
  min-width:var(--space-8);
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-md);
  text-align:center;
  color:var(--color-muted-fg);
  font-variant-numeric:tabular-nums;
  transition:var(--transition-colors);
}
.pt-pagina:hover{background:var(--color-secondary);color:var(--color-fg);text-decoration:none}
.pt-pagina.is-active{
  background:var(--gradient-primary);
  color:var(--color-primary-fg);
  font-weight:var(--fw-semibold);
}
.pt-pagina-salto{min-width:var(--space-6);text-align:center}

/* Nel tema chiaro `--gradient-primary` e' nero, quindi ogni pillola accesa
   diventava un buco scuro nella pagina. Qui e' un grigio chiaro col testo
   normale: si vede che e' accesa senza pesare. Il tema scuro resta bianco, dove
   il contrasto va nell'altro verso. */
html.light .pt-pagina.is-active,
html.light .ds-tab.is-active{
  background:var(--color-secondary-hover);
  color:var(--color-fg);
}
/* Anche il bordo del richiamo all'azione: nel chiaro nero pieno era troppo. */
/* Nel chiaro il testo e' nero, quindi lo stesso 35 per cento pesa di piu': si
   diluisce ancora. */
html.light .pt-cta{border-color:color-mix(in srgb, var(--color-fg) 25%, transparent)}

/* Una freccia che non porta da nessuna parte resta al suo posto e si spegne:
   togliendola, la fila di numeri si sposterebbe di lato al primo clic. */
.pt-pagina-spenta{opacity:0.3;cursor:default}

/* ============================================================
   La scheda di un bando: una colonna sola, che si legge di seguito
   ============================================================ */

/* La scheda e' larga quanto l'elenco, non una colonna di lettura da 72
   caratteri: le righe sono coppie etichetta/valore, e incolonnarle strette le
   spezzava a meta'. La prosa lunga resta l'eccezione, e quella si limita da
   sola qui sotto. */
.pt-scheda{
  display:flex;flex-direction:column;gap:var(--space-4);
  line-height:var(--type-body-line-height);
}
.pt-scheda-corpo{display:flex;flex-direction:column;gap:var(--space-6)}
/* La zona che cambia al clic su una scheda: dentro ci sono le schede stesse,
   perche' cambia anche quale e' accesa. */
#pt-scheda-zona{display:flex;flex-direction:column;gap:var(--space-6)}
/* Sopra il riquadro: il ritorno all'elenco a sinistra, l'esito del record a
   destra. L'id del record non c'e' piu': `atlante-7844` non diceva niente a
   nessuno, e la fonte in fondo alla scheda dice la stessa cosa meglio. */
.pt-scheda-sopra{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);flex-wrap:wrap;
}
.pt-scheda-stato{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}

/* I temi come tag piani: testo smorzato separato da un punto, senza bordo e
   senza fondo. Le pillole in questa pagina vogliono dire «stato».
   Una riga sola e i puntini: le parole chiave sono fino a cinque e lunghe
   (una e' il nome intero di una Camera di Commercio), e a capo diventavano un
   paragrafo che nessuno legge. Chi le vuole tutte passa il mouse: stanno nel
   `title`. */
.pt-tag{
  display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--color-muted-fg);
  font-size:var(--text-xs);line-height:var(--lh-xs);
}
.pt-tag span + span::before{content:" · "}

/* La scadenza e' la cosa che decide se questo bando ti riguarda oggi, quindi
   non sta nella misura minore degli altri dati. */
.pt-scheda-scadenza{
  color:var(--color-fg);
  font-size:var(--text-lg);line-height:var(--lh-lg);
  font-weight:var(--fw-semibold);
}
.pt-scheda-scadenza .ds-icon{color:var(--color-muted-fg)}

/* Il richiamo all'azione: bordo bianco e fondo trasparente. E' `outline` del
   design system con il bordo portato al colore del testo, perche' la variante
   di serie usa il bordo smorzato e qui il bottone deve chiamare. */
/* Il bordo e' il colore del testo diluito, non un grigio scelto a mano: cosi'
   segue il tema (bianco nel buio, nero nel chiaro) e resta un tono di quello,
   non un colore in piu'. `color-mix` e' CSS standard e non aggiunge niente al
   progetto. Il raggio e' la pillola, come le chip: un richiamo all'azione con
   gli angoli quasi quadrati sembrava un bottone di sistema. */
.pt-cta{
  border-color:color-mix(in srgb, var(--color-fg) 35%, transparent);
  border-radius:var(--radius-pill);
}
.pt-cta:hover{
  background:var(--color-secondary);
  border-color:color-mix(in srgb, var(--color-fg) 60%, transparent);
}

/* Il piede: la fonte a sinistra, il richiamo a destra, separati dal contenuto
   da un filo. */
.pt-scheda-piede{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);flex-wrap:wrap;
  padding-top:var(--space-4);
  border-top:var(--border-width) solid var(--color-border);
  color:var(--color-muted-fg);
  font-size:var(--text-sm);line-height:var(--lh-sm);
}
.pt-scheda-piede .pt-cta{margin-left:auto}
.pt-scheda-sommario{max-width:110ch}

/* Le schede della scheda: un filo sotto le separa dal contenuto, come la riga
   di schede dentro una card del design system. */
.pt-scheda-schede{
  border-bottom:var(--border-width) solid var(--color-border);
  padding-bottom:var(--space-2);
}

/* Il numero accanto all'etichetta di una scheda (le voci della checklist, le
   letture della fonte, i dossier aperti nel menu). `ds-sidebar-item-count` nasce
   nella lista laterale, dove `margin-left:auto` lo spinge in fondo alla riga:
   dentro una scheda non c'e' nessuna riga da spingere, e senza questa riga il
   numero resta appiccicato alla parola («Checklist3», «Dossier2»). Vale per ogni
   riga di schede, non solo per quelle del dossier: il menu in alto e' fatto con
   la stessa macro. */
.ds-tabs .ds-sidebar-item-count{margin-left:var(--space-2)}

.pt-scheda-id{
  color:var(--color-muted-fg);
  font-family:var(--font-mono);
  font-size:var(--text-xs);line-height:var(--lh-xs);
}

.pt-sezione{display:flex;flex-direction:column;gap:var(--space-3)}
.pt-sezione-titolo{
  font-size:var(--text-xs);line-height:var(--lh-xs);
  font-weight:var(--fw-semibold);
  color:var(--color-muted-fg);
  text-transform:var(--type-eyebrow-transform);
  letter-spacing:var(--type-eyebrow-tracking);
}

.pt-righe{display:flex;flex-direction:column;gap:var(--space-2)}
.pt-riga{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-1);
  padding-bottom:var(--space-2);
  border-bottom:var(--border-width) solid var(--color-border);
  font-size:var(--text-sm);line-height:var(--lh-sm);
}
@media (min-width:640px){
  .pt-riga{grid-template-columns:minmax(0,var(--sidebar-w)) minmax(0,1fr);gap:var(--space-4)}
}
.pt-riga-etichetta{color:var(--color-muted-fg)}
.pt-riga-valore{word-break:break-word}

/* Un valore che e' un elenco (i documenti richiesti dal bando). Il pallino sta
   dentro il riquadro, non appeso al margine: `list-style-position:inside`
   allinea la prima riga di ogni voce alla colonna del valore, e su un documento
   con il nome lungo la seconda riga non finisce sotto il pallino. */
.pt-riga-elenco{
  list-style:disc inside;
  margin:var(--space-0);padding:var(--space-0);
}
.pt-riga-elenco li{padding-bottom:var(--space-1)}
.pt-riga-elenco li::marker{color:var(--color-muted-fg)}
.pt-riga-vuota{font-size:var(--text-base)}

.pt-prova{
  font-size:var(--text-xs);line-height:var(--lh-xs);
  color:var(--color-muted-fg);
}

/* ============================================================
   La chat, rivestita
   Struttura e JavaScript restano quelli di prima: `chat.js` e' recuperato dalla
   vecchia istanza e detta il suo contratto, quindi qui si vestono le classi che
   scrive lui (`program-chat-*`) invece di rinominarle. Rinominarne una da un
   lato romperebbe la chat in silenzio.
   ============================================================ */

.pt-chat{display:flex;flex-direction:column;gap:var(--space-4)}

/* La zona dei messaggi cresce con la conversazione e non prima: teneva 288px
   riservati anche a chat vuota, e la casella per scrivere finiva sotto il bordo
   dello schermo con in mezzo trecento pixel di niente. Il tetto serve al caso
   opposto, una conversazione lunga: oltre, scorre da sola invece di allungare la
   pagina all'infinito. */
.pt-chat .program-chat-messages{
  min-height:var(--space-16);
  max-height:calc(var(--space-24) * 6);
  overflow-y:auto;
  /* Spazio a destra perche' il testo non tocchi la barra, e sotto perche'
     l'ultima riga non resti incollata alla casella per scrivere. */
  padding-right:var(--space-4);padding-bottom:var(--space-2);
  display:flex;flex-direction:column;gap:var(--space-4);
  line-height:var(--type-body-line-height);
  /* La barra e' quella della colonna dei filtri: sottile, senza fondo, del
     colore dei bordi. Un solo modo di scorrere in tutto il portale. */
  scrollbar-width:thin;
  scrollbar-color:var(--color-border) transparent;
}
.pt-chat .program-chat-messages::-webkit-scrollbar{width:6px;height:6px}
.pt-chat .program-chat-messages::-webkit-scrollbar-track{background:transparent}
.pt-chat .program-chat-messages::-webkit-scrollbar-thumb{
  background:var(--color-border);
  border-radius:var(--radius-pill);
}
.pt-chat .program-chat-messages::-webkit-scrollbar-thumb:hover{background:var(--color-muted-fg)}
/* Vuota non deve nemmeno tenere il suo minimo: il primo messaggio la apre. */
.pt-chat .program-chat-messages:empty{min-height:var(--space-0)}

/* Il messaggio e' una riga flex, e `chat.js` (recuperato) attacca le fonti come
   fratello della bolla, non dentro: in una riga diventavano una colonna accanto
   alla risposta e si stiravano per tutta la sua altezza, larghe duecento pixel e
   alte ottocento. Con l'andata a capo e l'allineamento in alto tornano dove
   devono, cioe' sotto la bolla, e non si stirano piu'. */
.pt-chat .program-chat-message{display:flex;flex-wrap:wrap;align-items:flex-start}
.pt-chat .program-chat-message.is-user{justify-content:flex-end}

.pt-chat .program-chat-bubble{
  max-width:72ch;
  padding:var(--card-pad);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-tile);
  background:var(--color-surface);
  font-size:var(--text-sm);
}
/* Una risposta con la tabella prende tutta la larghezza: le 72 colonne di testo
   sono la misura giusta per leggere della prosa, ma su una tabella a quattro
   colonne spezzavano ogni cella su tre righe. `has-table` la mette `chat.js`
   quando la risposta ne contiene una. */
.pt-chat .program-chat-bubble.has-table{
  max-width:100%;width:100%;
  /* Sedici pixel bastano su una bolla stretta; su una larga quanto la pagina il
     testo sembra appoggiato al bordo. */
  padding:var(--space-6);
}
.pt-chat .program-chat-message.is-user .program-chat-bubble{background:var(--color-muted)}
/* Gli elenchi dentro una risposta. `ds.css` azzera l'imbottitura di `ul` e `ol`
   per tutto il portale, quindi qui va rimessa: senza, i pallini finiscono
   attaccati al bordo della bolla e l'elenco non si distingue dal testo. Il
   rientro e' quello di una citazione, non quello enorme del browser. */
.pt-chat .program-chat-bubble ul,
.pt-chat .program-chat-bubble ol{
  padding-left:var(--space-6);
  margin-bottom:var(--space-3);
}
.pt-chat .program-chat-bubble li{margin-bottom:var(--space-2)}
.pt-chat .program-chat-bubble li:last-child{margin-bottom:var(--space-0)}
.pt-chat .program-chat-bubble li::marker{color:var(--color-muted-fg)}

.pt-chat .program-chat-bubble p{margin-bottom:var(--space-3)}
.pt-chat .program-chat-bubble p:last-child{margin-bottom:var(--space-0)}
.pt-chat .program-chat-bubble a{text-decoration:underline}

.pt-chat .program-chat-welcome{color:var(--color-muted-fg)}

.pt-chat .program-chat-loader{
  display:inline-block;
  width:var(--space-4);height:var(--space-4);
  border-radius:var(--radius-pill);
  background:var(--color-muted-fg);
  animation:ds-pulse var(--duration-slow) ease-in-out infinite alternate;
}
.pt-chat .program-chat-stream-cursor{opacity:0.6}

.pt-chat .program-chat-sources{
  /* Riga intera: e' un fratello della bolla, e senza questo si mette in colonna
     accanto a lei. */
  flex:0 0 100%;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  margin-top:var(--space-3);
}
.pt-chat .program-chat-source{
  padding:var(--space-1) var(--space-3);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-pill);
  color:var(--color-muted-fg);
  font-size:var(--text-xs);line-height:var(--lh-xs);
}
/* Una fonte citata e' un collegamento vero: si apre, e si vede che si apre.
   Resta una pastiglia come il badge accanto, cosi' la riga sotto la risposta
   ha una forma sola (spec 0007, AC-6). */
.pt-chat .program-chat-source-link{
  text-decoration:none;
  max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pt-chat .program-chat-source-link:hover,
.pt-chat .program-chat-source-link:focus-visible{
  color:var(--color-fg);
  border-color:var(--color-fg);
}

/* Una tabella dentro una risposta non deve allargare la pagina: scorre da sola. */
.pt-chat .program-chat-table-wrap{overflow-x:auto;margin-top:var(--space-3)}
.pt-chat .program-chat-table{border-collapse:collapse;width:100%;font-size:var(--text-xs)}
.pt-chat .program-chat-table th,
.pt-chat .program-chat-table td{
  padding:var(--space-2) var(--space-3);
  border-bottom:var(--border-width) solid var(--color-border);
  text-align:left;
}
.pt-chat .program-chat-table th{color:var(--color-muted-fg);font-weight:var(--fw-semibold)}

.pt-chat .program-chat-bottom-stack{display:flex;flex-direction:column;gap:var(--space-3)}
/* Le pastiglie dei suggerimenti erano attaccate all'ultima riga della risposta:
   un respiro le stacca dalla conversazione e le rende quello che sono, cioe'
   comandi e non testo. */
.pt-chat .program-chat-form{
  display:flex;flex-direction:column;gap:var(--space-3);
  padding-top:var(--space-4);
  border-top:var(--border-width) solid var(--color-border);
}
.pt-chat .program-chat-suggestions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
/* A conversazione iniziata i suggerimenti spariscono: sono un avvio, non un
   menu, e sotto una risposta lunga tornavano a proporre cose gia' chieste. La
   classe la mette `dossier.js` appena compare il primo messaggio. */
.pt-chat.ha-conversazione .program-chat-suggestions{display:none}
.pt-chat .program-chat-suggestion{
  padding:var(--space-1) var(--space-3);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-pill);
  background:transparent;color:var(--color-muted-fg);
  font-family:inherit;font-size:var(--text-xs);line-height:var(--lh-xs);
  cursor:pointer;transition:var(--transition-colors);
}
.pt-chat .program-chat-suggestion:hover{background:var(--color-secondary);color:var(--color-fg)}
.pt-chat .program-chat-input-wrap{display:flex;gap:var(--space-2);align-items:flex-end}
.pt-chat .program-chat-textarea{
  flex:1;
  /* `chat.js` ridimensiona la casella da JavaScript, sull'altezza del contenuto.
     Quando il pannello e' nascosto (siamo su un'altra scheda) quel calcolo da'
     zero, lo scrive nello stile in linea, e tornando sulla chat la casella
     arrivava alta zero pixel con il testo tagliato: sembrava rotta. Un
     `min-height` batte l'altezza in linea, quindi qualunque numero calcoli, la
     casella resta scrivibile. */
  min-height:calc(var(--space-10) * 2);
  padding:var(--space-3);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-muted);color:var(--color-fg);
  font-family:inherit;font-size:var(--text-sm);line-height:var(--lh-sm);
  resize:vertical;
}
.pt-chat .program-chat-submit{
  padding:var(--space-2) var(--space-4);
  border:var(--border-width) solid transparent;
  border-radius:var(--radius-md);
  background:var(--gradient-primary);color:var(--color-primary-fg);
  font-family:inherit;font-size:var(--text-sm);line-height:var(--lh-sm);
  font-weight:var(--fw-semibold);cursor:pointer;
}
.pt-chat .program-chat-disclaimer{
  color:var(--color-muted-fg);
  font-size:var(--text-xs);line-height:var(--lh-xs);
}
.pt-chat .program-chat-floating-actions[aria-hidden="true"]{display:none}

/* ============================================================
   La pagina delle stats
   ============================================================ */

.pt-stats{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--card-gap);
  margin-bottom:var(--space-12);
}
@media (min-width:1024px){
  .pt-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Etichetta e numero sulla stessa riga, la barra sotto a tutta larghezza:
   incolonnare i numeri a destra li rende confrontabili senza leggerli. */
.pt-stat-riga{display:grid;grid-template-columns:1fr auto;gap:var(--space-1) var(--space-3)}
.pt-stat-riga .ds-progress{grid-column:1 / -1}
/* Le barre delle stat prendono l'accento maxine del design system, non il pieno
   primario: sono un dato, non un comando, e nel tema chiaro il primario e' nero. */
.pt-stat-riga .ds-progress-fill{background:var(--gradient-maxine)}
.pt-stat-etichetta{font-size:var(--text-sm);line-height:var(--lh-sm)}
.pt-stat-numero{
  font-family:var(--font-mono);
  font-size:var(--text-sm);line-height:var(--lh-sm);
  color:var(--color-muted-fg);
}

/* Il profilo come lo legge il portale, JSON e tutto: e' un documento da
   guardare, non da modificare, quindi scorre dentro il suo riquadro invece di
   allungare la pagina. La pagina di modifica e' la funzionalita' 15. */
.pt-json{
  max-height:calc(var(--space-24) * 4);
  overflow:auto;
  margin:var(--space-0);
  padding:var(--card-pad);
  border-radius:var(--radius-tile);
  background:var(--color-muted);
  color:var(--color-fg);
  font-family:var(--font-mono);
  font-size:var(--text-xs);line-height:var(--lh-sm);
}

/* ============================================================
   La pagina di accesso
   Una colonna stretta al centro: non c'e' niente da fare qui oltre a entrare.
   ============================================================ */

.pt-accesso{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:var(--space-6);
}
.pt-accesso-marchio{display:flex;align-items:center;gap:var(--space-2)}
.pt-accesso-riquadro{width:min(100%, calc(var(--sidebar-w) * 1.5))}
.pt-accesso-modulo{display:flex;flex-direction:column;gap:var(--space-4)}
.pt-accesso-errore{
  color:var(--color-destructive);
  font-size:var(--text-sm);line-height:var(--lh-sm);
}

/* ============================================================
   Il dossier di candidatura
   Una colonna sola di blocchi separati dal filo da 1px: la pagina si legge
   dall'alto come si lavora, e non c'e' niente da scegliere fra due colonne.
   Le righe dei comandi (allegati, proposte, documenti) le disegna
   `static/dossier.js`, quindi le classi stanno qui e non nel template.
   ============================================================ */

.pt-dossier{display:flex;flex-direction:column;gap:var(--space-6)}

/* L'avviso: il bando uscito dal catalogo, il cancello spento, un importo sopra
   il massimale. Non e' un errore del portale, e' una cosa che devi sapere prima
   di fidarti di quello che leggi sotto. */
.pt-avviso{
  padding:var(--space-3) var(--space-4);
  border:var(--border-width) solid var(--color-destructive);
  border-radius:var(--radius-tile);
  color:var(--color-fg);
  font-size:var(--text-sm);line-height:var(--lh-sm);
}
.pt-avviso code{font-family:var(--font-mono);font-size:var(--text-xs)}

/* Nel dossier i titoli di sezione sono titoli, non occhielli. Lo stile a
   maiuscolette spaziate di `.pt-sezione-titolo` nasce per i riquadri di
   `stats.html`, dove l'etichetta e' una parola sola: su «Cosa il catalogo sa
   già», subito sotto la scheda che hai appena scelto, si leggeva come una
   didascalia di servizio invece che come il titolo di quello che stai
   guardando. */
.pt-dossier .pt-sezione-titolo{
  font-size:var(--text-lg);line-height:var(--lh-lg);
  font-weight:var(--fw-semibold);
  color:var(--color-fg);
  text-transform:none;letter-spacing:normal;
}

/* Aria fra la riga delle schede e il titolo della sezione: attaccati sembravano
   una cosa sola, e il titolo pareva l'ultima voce delle schede. La chat non la
   prende: sta fuori dalla zona, quindi lo stacco lo mette gia' la spaziatura
   della card, e sommandoli il suo titolo scendeva ventiquattro pixel piu' in
   basso di tutti gli altri. */
#pt-dossier-zona > .pt-sezione{padding-top:var(--space-5)}
#pt-dossier-chat > .pt-sezione{padding-top:var(--space-0)}

/* Le letture fatte: una riga per fonte, il nome e poi la data in tono minore.
   Prima era una tabella di due colonne con l'indirizzo intero dentro, e su un
   PDF ministeriale l'indirizzo da solo prendeva tre righe. */
.pt-dossier-letture{
  list-style:none;margin:var(--space-0);padding:var(--space-0);
  display:flex;flex-direction:column;gap:var(--space-1);
  font-size:var(--text-sm);line-height:var(--lh-sm);
}
.pt-dossier-letture li{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:baseline}

/* La riga in testa all'elenco degli allegati: quante voci, quante da leggere e
   il comando «leggile tutte». Non e' una voce dell'elenco, quindi non prende il
   riquadro delle altre: con la cornice sembrava il primo allegato. */
.pt-dossier-riga-testa{
  background:transparent;border:none;
  padding-left:var(--space-0);padding-right:var(--space-0);
}

/* La lista delle proposte: una riga per documento, casella a sinistra, icona,
   titolo e sottotitolo. Il sottotitolo (la frase della fonte piu' il nome del
   file) sta su una riga sola con i puntini: con la citazione a capo, quattordici
   proposte facevano una pagina da scorrere e nient'altro. La frase intera resta
   nel titolo del mouse. */
.pt-proposte-comandi{
  display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  padding-bottom:var(--space-2);
}
.pt-proposta-scelta{align-items:center;color:var(--color-muted-fg)}
.pt-proposta-casella{padding:var(--space-0)}
.pt-proposta{
  display:grid;
  /* Casella, icona (dove c'e'), testo, e la coda coi comandi. Le colonne sono
     quattro e le righe che non hanno l'icona lasciano vuota la sua: e' quello
     che tiene i titoli allineati fra una riga e l'altra. */
  grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;gap:var(--space-3);
  padding:var(--space-3);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-tile);
  background:var(--color-surface);
  cursor:pointer;
}
.pt-proposta-senza-icona{grid-template-columns:auto minmax(0,1fr) auto}
.pt-proposta:hover{background:var(--color-card-hover)}
.pt-proposta-icona{color:var(--color-muted-fg)}
.pt-proposta-testo{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.pt-proposta-titolo{font-weight:var(--fw-medium)}
/* I gruppi chiusi sotto l'elenco delle fonti da leggere: «già lette» e «non si
   leggono». Sono memoria e non lavoro da fare, quindi stanno chiusi e non
   occupano la pagina; il titolo dice quante sono. */
.pt-allegati-gruppo{
  border-top:var(--border-width) solid var(--color-border);
  padding-top:var(--space-4);
  margin-top:var(--space-4);
  display:flex;flex-direction:column;gap:var(--space-3);
}
.pt-allegati-gruppo > summary{
  cursor:pointer;
  color:var(--color-muted-fg);
  font-size:var(--text-sm);line-height:var(--lh-sm);
  font-weight:var(--fw-medium);
}
.pt-allegati-gruppo > summary:hover{color:var(--color-fg)}

/* La coda della riga: il segno «letta» e il comando «apri», in colonna unica a
   destra. Le spunte allineate si leggono in un colpo d'occhio, ed e' quello che
   si cerca scorrendo un elenco lungo. */
.pt-proposta-coda{display:inline-flex;align-items:center;gap:var(--space-2)}
/* «Letta» e' una pillola con la parola dentro, non una spunta. La spunta e' gia'
   la casella a sinistra e vuol dire «selezionata»: due segni uguali con due
   significati diversi sulla stessa riga si leggono come uno solo, rotto. Il
   verde e' lo stesso delle pillole della checklist, cosi' «fatto» ha un colore
   solo in tutto il dossier. */
/* Letta ma a vuoto: la pillola c'e' e si spegne. Il verde vuol dire «ne e'
   uscito qualcosa», e usarlo anche su una lettura che non ha prodotto niente
   direbbe il contrario di quello che e' successo. */
.pt-proposta-vuota{
  background:transparent;
  border:var(--border-width) solid var(--color-border);
  color:var(--color-muted-fg);
}

.pt-proposta-letto{
  display:inline-flex;align-items:center;
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-pill);
  background:var(--char-hiroshi);
  color:var(--n-8);
  font-size:var(--text-xs);line-height:var(--lh-xs);
  white-space:nowrap;
}

/* La casella che comanda la colonna sta nella colonna: allineata alle altre e
   non in mezzo ai comandi, dove sembrava un'opzione a se'. */
.pt-comandi-allineati{padding-left:var(--space-3)}

/* «Apri» in coda alla riga: un'icona, non un bottone. E' il comando che si usa
   meno, e da bottone competeva con quello che paga. */
.pt-proposta-apri{
  display:inline-flex;align-items:center;
  padding:var(--space-1);
  color:var(--color-muted-fg);
  border-radius:var(--radius-sm);
}
.pt-proposta-apri:hover{color:var(--color-fg);background:var(--color-secondary)}

.pt-proposta-sotto{
  color:var(--color-muted-fg);
  font-size:var(--text-xs);line-height:var(--lh-xs);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* L'elenco dei dossier aperti: righe grandi e cliccabili, una per dossier.
   Non e' una griglia di card come il catalogo, perche' qui gli oggetti sono
   pochi e si guardano in colonna, non si sfogliano. */
.pt-dossieri{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-4)}
.pt-dossiero{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-4);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-tile);
  background:var(--color-surface);
  color:inherit;
}
.pt-dossiero:hover{background:var(--color-card-hover);text-decoration:none}
.pt-dossiero-testa{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.pt-dossiero-titolo{
  font-size:var(--text-lg);line-height:var(--lh-lg);
  font-weight:var(--fw-semibold);
}
.pt-dossiero-dati{
  display:inline-flex;align-items:center;gap:var(--space-2);
  color:var(--color-muted-fg);
  font-size:var(--text-sm);line-height:var(--lh-sm);
}
.pt-dossiero-avanzamento{display:flex;flex-direction:column;gap:var(--space-1)}
/* Il segno sulla card di un bando che ha gia' un dossier. */
.pt-card-dossier{border-color:var(--char-hiroshi);color:var(--char-hiroshi)}

/* L'avviso che segue quello che stai facendo, fisso in basso a destra. Prima i
   messaggi di avanzamento finivano in un riquadro sotto l'elenco: con tredici
   allegati quel riquadro sta fuori schermo, si preme «leggi» in cima e per un
   minuto non succede niente di visibile. */
.pt-toast{
  position:fixed;z-index:50;
  right:var(--space-6);bottom:var(--space-6);
  max-width:min(var(--sidebar-w) * 2, 90vw);
  padding:var(--space-3) var(--space-4);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-tile);
  background:var(--color-surface);
  box-shadow:var(--shadow-lg);
  font-size:var(--text-sm);line-height:var(--lh-sm);
}
.pt-toast[hidden]{display:none}
.pt-toast-errore{border-color:var(--color-destructive);color:var(--color-destructive)}

/* La finestra che mostra un documento scritto dal barone, impaginato. Vive in
   `<dialog>`, quindi il fondo scuro e' `::backdrop` e non un elemento in piu'. */
.pt-lettore{
  width:min(var(--page-max), 92vw);
  max-height:86vh;
  padding:var(--space-0);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius);
  background:var(--color-surface);
  color:var(--color-fg);
  overflow:hidden;
}
.pt-lettore::backdrop{background:rgb(0 0 0 / 0.6)}
.pt-lettore-testa{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4);
  border-bottom:var(--border-width) solid var(--color-border);
}
.pt-lettore-nome{margin-right:auto;font-family:var(--font-mono);font-size:var(--text-sm)}
.pt-lettore-corpo{
  padding:var(--space-6);
  overflow:auto;max-height:calc(86vh - var(--space-16));
  font-size:var(--text-sm);line-height:var(--lh-md);
}
/* Il documento e' Markdown reso dal convertitore della chat: qui si vestono i
   suoi elementi, che nel portale non compaiono da nessun'altra parte. */
.pt-lettore-corpo h1,.pt-lettore-corpo h2,.pt-lettore-corpo h3{
  font-weight:var(--fw-semibold);
  margin-top:var(--space-5);margin-bottom:var(--space-2);
}
.pt-lettore-corpo h1{font-size:var(--text-xl);line-height:var(--lh-xl)}
.pt-lettore-corpo h2{font-size:var(--text-lg);line-height:var(--lh-lg)}
.pt-lettore-corpo p,.pt-lettore-corpo ul,.pt-lettore-corpo ol{margin-bottom:var(--space-3)}
.pt-lettore-corpo ul,.pt-lettore-corpo ol{padding-left:var(--space-5)}
.pt-lettore-corpo li{margin-bottom:var(--space-1)}
.pt-lettore-corpo blockquote{
  padding-left:var(--space-3);
  border-left:var(--space-1) solid var(--color-border);
  color:var(--color-muted-fg);
}
.pt-lettore-corpo table{border-collapse:collapse;width:100%;margin-bottom:var(--space-4)}
.pt-lettore-corpo th,.pt-lettore-corpo td{
  padding:var(--space-2) var(--space-3);
  border:var(--border-width) solid var(--color-border);
  text-align:left;
}
.pt-lettore-corpo th{color:var(--color-muted-fg);font-weight:var(--fw-medium)}
.pt-lettore-corpo code{font-family:var(--font-mono);font-size:var(--text-xs)}

/* Il blocco delle proposte sotto la checklist: staccato da quello che e' gia'
   in checklist, perche' una proposta non e' una voce finche' non la aggiungi. */
.pt-dossier-proposte{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding-top:var(--space-5);
  margin-top:var(--space-2);
  border-top:var(--border-width) solid var(--color-border);
}
.pt-sezione-sotto{
  font-size:var(--text-base);line-height:var(--lh-base);
  font-weight:var(--fw-semibold);
}

.pt-dossier-avanzamento{display:flex;flex-direction:column;gap:var(--space-2)}

/* L'avanzamento prende il verde di hiroshi, lo stesso della pillola del
   verdetto. Con il gradiente primario, che nel tema scuro e' bianco, la parte
   piena e la traccia si distinguevano solo per luminosita': la barra si leggeva
   come un separatore, non come una misura. */
.pt-dossier-avanzamento .ds-progress-fill{background:var(--gradient-hiroshi)}

/* Una voce di checklist e' un blocco che si apre. Chiusa dice quello che serve
   a decidere se aprirla (titolo, chi la fa, se ce l'hai, a che punto sta);
   dentro stanno la descrizione, la frase della fonte e i comandi. Con quattordici
   voci tutte aperte, la citazione a tre righe faceva una pagina da scorrere. */
.pt-dossier-voce > details > summary{
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  padding:var(--space-2) var(--space-3);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-tile);
  background:var(--color-surface);
  cursor:pointer;
  list-style:none;
}
/* Il triangolino nativo se ne va: al suo posto c'e' il fondo che cambia
   all'apertura, e la riga resta allineata alle altre. */
.pt-dossier-voce > details > summary::-webkit-details-marker{display:none}
.pt-dossier-voce > details > summary:hover{background:var(--color-card-hover)}
.pt-dossier-voce > details[open] > summary{
  border-bottom-left-radius:var(--space-0);border-bottom-right-radius:var(--space-0);
}
.pt-voce-titolo{font-weight:var(--fw-medium);min-width:0}
/* Lo stato in coda alla riga: e' l'unica cosa della riga che cambi tu, e sta
   dove finisce l'occhio. E' una pillola e non testo, perche' su quindici righe
   quello che si legge e' il colore, non la parola: verde con la spunta quando e'
   fatto, chiaro e vuoto quando resta da fare. */
.pt-voce-stato{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:var(--space-1) var(--space-3);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-pill);
  color:var(--color-muted-fg);
  font-size:var(--text-xs);line-height:var(--lh-xs);
  white-space:nowrap;
}
.pt-voce-stato .ds-icon{width:var(--space-3);height:var(--space-3)}
/* I tre stati che contano sono pillole piene, ognuna col suo colore: si leggono
   dal colore prima che dalla parola, e su una checklist di nove righe e' quello
   che si guarda scorrendo. Il testo sopra e' sempre lo scuro delle card, perche'
   i tre accenti sono chiari e un testo chiaro su chiaro non si legge.

   Chiesto e' blu maxine e non l'ambra degli avvisi: in questa pagina l'ambra
   vuol dire «guarda che c'e' qualcosa che non va», mentre aspettare un documento
   da un terzo non e' un problema, e' solo un pezzo fuori dalle tue mani. */
.pt-stato-ho,.pt-stato-generato{
  background:var(--char-hiroshi);border-color:var(--char-hiroshi);
  color:var(--n-8);
}
.pt-stato-chiesto{
  background:var(--char-maxine);border-color:var(--char-maxine);
  color:var(--n-8);
}
.pt-stato-da_fare{
  background:var(--char-lucretia);border-color:var(--char-lucretia);
  color:var(--n-8);
}
/* Non serve: resta leggibile ma si spegne, come le voci che non contano. */
.pt-stato-non_serve{opacity:0.6}
.pt-voce-corpo{
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-3);
  border:var(--border-width) solid var(--color-border);
  border-top:none;
  border-bottom-left-radius:var(--radius-tile);border-bottom-right-radius:var(--radius-tile);
}
.pt-voce-desc{font-size:var(--text-sm);line-height:var(--lh-sm)}
.pt-voce-comandi{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}

.pt-dossier-voci{
  list-style:none;margin:var(--space-0);padding:var(--space-0);
  display:flex;flex-direction:column;gap:var(--space-2);
}

/* Nessuna riga di separazione fra una voce e l'altra: da quando ogni voce e' un
   blocco col suo bordo, il tratto sotto era un secondo confine appiccicato al
   primo. Le separa lo spazio. */
.pt-dossier-voce{display:flex;flex-direction:column;gap:var(--space-2)}

.pt-dossier-voce-testa{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.pt-dossier-voce-titolo{font-weight:var(--fw-semibold);font-size:var(--text-sm)}
.pt-dossier-voce-desc{font-size:var(--text-sm);line-height:var(--lh-sm);color:var(--color-muted-fg)}
.pt-dossier-voce-piede{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}

/* La frase della fonte da cui viene una voce. Rientrata e in corpo piccolo
   perche' e' una citazione, non una nostra affermazione: la differenza fra le
   due cose e' tutto il punto della checklist. */
.pt-dossier-evidenza{
  margin:var(--space-0);
  padding-left:var(--space-3);
  border-left:var(--border-width) solid var(--color-border);
  color:var(--color-muted-fg);
  font-size:var(--text-xs);line-height:var(--lh-sm);
}
.pt-dossier-evidenza a{margin-left:var(--space-2);white-space:nowrap}

.pt-dossier-elenco{display:flex;flex-direction:column;gap:var(--space-3)}

.pt-dossier-riga{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  padding:var(--space-2) var(--space-3);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-tile);
  background:var(--color-surface);
}

.pt-dossier-documenti{display:flex;flex-direction:column;gap:var(--space-2)}
.pt-dossier-documento{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  padding-bottom:var(--space-2);
  border-bottom:var(--border-width) solid var(--color-border);
}