/* Foglio di stile unico della dashboard. Niente framework: la pagina news e'
   una tabella a colonne (scelta dell'utente, invariante 21 di CLAUDE.md).
   Da 48rem in su la tabella resta tabella e, se non ci sta, scorre in
   orizzontale dentro il suo contenitore: il body non scorre mai di lato.
   Sotto le 48rem ogni riga diventa una scheda - in coda al file c'e' la sola
   media query del foglio, e il perche'. */

:root {
  --sfondo: #14161a;
  --scheda: #1d2027;
  --bordo: #2c313b;
  --testo: #e6e8ec;
  --tenue: #9aa1ad;
  --accento: #6ea8fe;
  --comunicati: #4c6ef5;
  --romano: #12b886;
  --dimarzio: #e8590c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: baseline;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--bordo);
}

.marchio {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--testo);
  text-decoration: none;
}

header nav { display: flex; gap: 1rem; }
header nav a { color: var(--tenue); text-decoration: none; }
header nav a:hover { color: var(--accento); }

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

/* La pagina news: sei colonne non stanno in 60rem, e una tabella che scorre in
   orizzontale su uno schermo largo sarebbe un difetto, non una scelta. */
main.larga { max-width: 96rem; }

/* --- filtri --- */

.filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.filtri input,
.filtri select,
.filtri button {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  background: var(--scheda);
  color: var(--testo);
  font: inherit;
}

.filtri input[type="search"] { flex: 1 1 14rem; min-width: 0; }
.filtri button { cursor: pointer; border-color: var(--accento); }
.azzera { color: var(--tenue); font-size: 0.9rem; }

/* Le etichette dei due campi data servono solo su telefono, dove un
   input[type=date] vuoto si presenta come una tendina senza scritte. Altrove
   `display: contents` toglie di mezzo il `label`: gli input restano figli
   diretti di `.filtri` e la riga dei filtri e' identica a prima. */
.campo-data { display: contents; }
.campo-data > span { display: none; }

.conteggio { color: var(--tenue); font-size: 0.9rem; margin: 0 0 1rem; }
.vuoto { color: var(--tenue); }

/* --- elenco delle notizie --- */

/* Il contenitore scorre in orizzontale al posto della pagina: fra le 48rem e
   le ~85rem che la tabella vorrebbe, le colonne restano colonne e il body non
   scorre di lato. Sotto le 48rem non serve piu': sono schede. */
.tabella-scorrevole {
  overflow-x: auto;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--scheda);
}

.notizie {
  width: 100%;
  border-collapse: collapse;
  /* auto e non fixed: le colonne si dimensionano sul contenuto, ed e' quello
     che serve quando titoli e segnali hanno lunghezze molto diverse. */
  table-layout: auto;
  font-size: 0.92rem;
}

.notizie th,
.notizie td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--bordo);
}

/* Niente `position: sticky` sull'intestazione: dentro un contenitore
   `overflow-x: auto` lo scroller e' il contenitore, non la pagina, e l'header
   non si attaccherebbe mai scorrendo. Sarebbe CSS morto che sembra funzionare. */
.notizie thead th {
  background: #23272f;
  color: var(--tenue);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.notizie tbody tr:last-child td { border-bottom: none; }
.notizie tbody tr:hover { background: #23272f; }

/* Larghezze: il titolo e il testo si prendono lo spazio, le altre colonne
   stanno strette e non vanno a capo. */
.col-quando {
  white-space: nowrap;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

.col-fonte { white-space: nowrap; }
.col-titolo { min-width: 16rem; font-weight: 600; line-height: 1.35; }
.col-testo { min-width: 18rem; color: #c8ccd4; }
.col-segnali { min-width: 7rem; color: var(--tenue); font-style: italic; }
.col-azioni { white-space: nowrap; }

/* Il testo dei post di Romano puo' essere lungo: senza un limite una sola
   riga alta due schermi sfonderebbe la griglia. Tre righe e poi l'ellissi. */
.testo {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fonte {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
}

.fonte-comunicati { background: var(--comunicati); }
.fonte-romano { background: var(--romano); }
.fonte-dimarzio { background: var(--dimarzio); }

/* --- bottoni --- */

.azioni { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.bottone {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  background: transparent;
  color: var(--testo);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
}

.bottone:hover { border-color: var(--accento); color: var(--accento); }

/* --- paginazione --- */

.pagine {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
  color: var(--tenue);
  font-size: 0.9rem;
}

.pagine a { color: var(--accento); text-decoration: none; }

/* L'avviso a database assente, sulla pagina news. La home con i due riquadri
   e' stata eliminata il 2026-08-27: duplicava la barra di navigazione. */

.avviso { color: var(--dimarzio); }

/* --- pagina di accesso --- */

.accesso {
  display: grid;
  gap: 0.5rem;
  max-width: 22rem;
  margin: 4rem auto;
  padding: 1.5rem;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--scheda);
}

.accesso h1 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.accesso label { color: var(--tenue); font-size: 0.85rem; }

.accesso input {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  background: var(--sfondo);
  color: var(--testo);
  font: inherit;
}

.accesso button {
  margin-top: 0.75rem;
  padding: 0.55rem;
  border: 1px solid var(--accento);
  border-radius: 6px;
  background: transparent;
  color: var(--accento);
  font: inherit;
  cursor: pointer;
}

.firma {
  margin: 0.75rem 0 0;
  text-align: center;
  color: var(--tenue);
  font-size: 0.85rem;
}

.firma a { color: var(--tenue); }
.firma a:hover { color: var(--accento); }

.errore {
  margin: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  background: rgba(232, 89, 12, 0.15);
  color: var(--dimarzio);
  font-size: 0.9rem;
}

.uscita { display: inline; margin: 0; }

.uscita button {
  padding: 0;
  border: none;
  background: none;
  color: var(--tenue);
  font: inherit;
  cursor: pointer;
}

.uscita button:hover { color: var(--accento); }

/* --- schermo stretto: la riga diventa una scheda ------------------------ */

/* La tabella a sei colonne vuole ~85rem: su un telefono da 360px se ne vedeva
   un quarto, e per giunta il quarto meno utile - data e fonte in vista, titolo
   tagliato a meta' parola, bottoni fuori campo. Sotto le 48rem ogni riga
   diventa quindi un blocco. Sostituisce la scelta del 2026-08-27 (invariante
   21), presa prima di vedere la pagina su un telefono; sopra la soglia non
   cambia niente e la tabella resta la tabella che scorre nel suo contenitore.
   Il markup non cambia: e' sempre una `<table>`, solo disegnata altrimenti. */
@media (max-width: 48rem) {
  main,
  main.larga { padding: 1rem 0.875rem 3rem; }

  header { padding: 0.875rem 1rem; gap: 0.5rem 1.25rem; }
  header nav { flex-wrap: wrap; gap: 0.25rem 1.25rem; }

  /* Bersagli da centrare col dito: erano alti una riga di testo e basta. */
  header nav a,
  .uscita button,
  .pagine a { padding: 0.35rem 0; }

  /* --- filtri --- */

  /* Ricerca e fonte una per riga, i due campi data affiancati sulla terza. */
  .filtri input[type="search"],
  .filtri select { flex: 1 1 100%; }

  /* Una riga per campo, come la ricerca e la fonte. Affiancandoli si fanno
     stare in mezzo schermo, ma il widget data di Chrome si comprime troncando
     il proprio "gg/mm/aaaa" e sovrapponendogli l'icona del calendario:
     verificato a 390px, ed e' peggio della riga in piu'. */
  .campo-data {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    gap: 0.4rem;
  }

  .campo-data > span { display: inline; color: var(--tenue); font-size: 0.85rem; }
  .campo-data input { flex: 1 1 auto; min-width: 0; }
  .filtri button { padding: 0.55rem 1.1rem; }

  /* --- le righe diventano schede --- */

  /* Non c'e' piu' niente da far scorrere in orizzontale, e la cornice passa
     dal contenitore alle singole schede. */
  .tabella-scorrevole {
    overflow-x: visible;
    border: none;
    border-radius: 0;
    background: none;
  }

  .notizie { display: block; width: 100%; font-size: 1rem; }
  .notizie tbody { display: block; }

  /* L'intestazione di colonna non ha piu' colonne da intestare: dentro la
     scheda ogni campo si riconosce da se'. */
  .notizie thead { display: none; }

  .notizia {
    display: grid;
    /* `minmax(0, 1fr)` e non `1fr`: il minimo implicito di `1fr` e' la
       larghezza min-content del contenuto, e un titolo con dentro un
       `https://t.co/...` allargherebbe la traccia, la scheda e con lei l'intera
       pagina - che tornerebbe a scorrere di lato, cioe' il difetto da cui si
       parte. Verificato: senza questo, a 390px la scheda sfonda a destra. */
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "quando  fonte"
      "titolo  titolo"
      "testo   testo"
      "segnali segnali"
      "azioni  azioni";
    gap: 0.5rem 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.875rem;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    background: var(--scheda);
  }

  /* Il filo sotto la cella separava le righe: fra schede staccate disegnerebbe
     una linea a meta' scheda, e a separarle basta il margine. */
  .notizie td,
  .notizie tbody tr:last-child td { display: block; padding: 0; border-bottom: none; }

  /* Testo e segnali sono spesso vuoti: senza questo la scheda si porterebbe
     dietro una banda vuota alta quanto il gap. */
  .notizia td:empty { display: none; }

  /* Su un touch screen non esiste il passaggio del mouse, ma il tocco lo
     attiva e lascia una scheda evidenziata a caso finche' non se ne tocca
     un'altra. */
  .notizie tbody tr:hover { background: var(--scheda); }

  /* I `min-width` tenevano larghe le colonne: dentro la scheda sono la ragione
     per cui il testo sfonderebbe di lato invece di andare a capo. */
  .col-quando { grid-area: quando; font-size: 0.85rem; }
  .col-fonte { grid-area: fonte; justify-self: end; }
  .col-titolo { grid-area: titolo; }
  .col-testo { grid-area: testo; font-size: 0.9rem; }
  .col-segnali { grid-area: segnali; font-size: 0.85rem; }
  .col-azioni { grid-area: azioni; white-space: normal; }

  /* I `min-width` in rem tenevano larghe le colonne della tabella: dentro la
     scheda sono la ragione per cui il testo sfonderebbe di lato. */
  .col-titolo,
  .col-testo,
  .col-segnali { min-width: 0; }

  /* I titoli di Romano finiscono spesso con un link accorciato: una parola sola
     lunga mezzo schermo, che senza questo non va a capo da nessuna parte. */
  .col-titolo,
  .col-testo { overflow-wrap: anywhere; }

  /* Due righe e non tre: cosi' in una schermata ci stanno abbastanza notizie
     da scorrerle con lo sguardo invece che col pollice. */
  .col-testo .testo { -webkit-line-clamp: 2; }

  /* I tre bottoni si dividono la larghezza: stanno su una riga sola e restano
     abbastanza larghi da centrarli col dito. */
  .azioni { gap: 0.4rem; margin-top: 0.25rem; }

  /* Base in rem e non `auto`: con `auto` la base e' il testo del bottone, i tre
     bottoni non andrebbero mai a capo e "Copia twitter" spingerebbe la scheda
     oltre il bordo dello schermo. */
  .azioni .bottone {
    flex: 1 1 5.5rem;
    min-width: 0;
    padding: 0.55rem 0.5rem;
    text-align: center;
  }

  .pagine { gap: 0.75rem 1.25rem; margin-top: 1rem; }
}