/* La pagina «Altri blog»: regole spostate da style.css il 5 ottobre 2026.
   Che cosa ci va e che cosa no: dev/fogli.js. */

/* ── Altri blog ────────────────────────────────────────────────────────────
   La pagina /altri-blog. Riusa .tool-card per la scheda: qui sotto c'è solo
   quello che un elenco di siti altrui ha e le altre pagine no, cioè il nome
   col genere e la lingua, e i contrassegni che vede il solo amministratore. */
.blogroll { list-style: none; margin: 0; padding: 0; }

.blogroll .blogroll-voce { margin-bottom: clamp(12px, 1.8vw, 16px); }

.blogroll-testa {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 8px; margin-bottom: 8px;
}

/* Il nome si stacca un poco dai riquadri che lo seguono: sono due cose diverse,
   il sito e cosa è, e attaccati si leggevano come una frase sola. */
.blogroll-nome { margin-right: 4px; }

.blogroll-nome { font-size: 16px; font-weight: 600; color: var(--color-neutral-100); text-decoration: none; }

.blogroll-nome:hover,
.blogroll-nome:focus-visible { color: var(--color-accent); text-decoration: underline; }

/* Una voce ancora da valutare la vede solo l'amministratore: si distingue a
   colpo d'occhio, se no si confonde con quelle gia' online. */
.blogroll-voce--attesa { border: 1px dashed var(--color-neutral-700); box-shadow: none; }

/* Genere e lingua in due riquadri col bordo. Prima erano solo uno sfondo appena
   più scuro della scheda, e a tema scuro «BLOG» quasi spariva. I colori vengono
   dal testo e dall'accento del tema con color-mix, così reggono in chiaro e in
   scuro senza una regola per tema. */
.blogroll-marca {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1; padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  white-space: nowrap;
}

.blogroll-marca--lingua {
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent);
}

.blogroll-marca--avviso { background: transparent; border: 1px dashed var(--color-amber); color: var(--color-amber); }

.blogroll-di { margin: 0 0 4px; font-size: 12.5px; color: var(--color-neutral-500); }

.blogroll-cosa { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--color-neutral-400); max-width: 74ch; }

.blogroll-data {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.04em; color: var(--color-neutral-600);
}

/* Il riquadro di servizio. Tratteggiato perché non è contenuto del sito: è un
   promemoria, e si deve vedere a colpo d'occhio che non lo è. */
.blogroll-admin { border: 1px dashed var(--color-neutral-700); box-shadow: none; }

.blogroll-admin .tool-card-title { margin-bottom: 8px; }

.blogroll-admin .tool-card-desc + .tool-card-desc { margin-top: 8px; }

.blogroll-allarme { color: var(--color-amber); }