/* ══════════════════════════════════════════════════════════════════════════
   Nocturne — design-system tokens and component classes, ported from the
   Rivista design (claude.ai/design). Full token set + component library,
   with page-specific layout rules for PowerLab400 below.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Identità ──────────────────────────────────────────────────────────────
   Il sito parla di una piattaforma che ha un aspetto suo: lo schermo verde del
   5250, la scritta a larghezza fissa, il fondo scuro. Quel segno stava chiuso
   nel pannello admin, dove non lo vedeva nessuno, e fuori il sito assomigliava
   a qualunque altro sito tecnico con l'accento viola.
   Il colore resta il viola del sito, ma il segno del 5250 c'è lo stesso: il cursore
   a blocco, il monospazio come voce di sistema, la trama di scansione sul fondo.
   L'ambra resta per gli avvisi. Il carattere è IBM Plex, che è di IBM: pertinente,
   non un travestimento. */
:root {
  --color-bg: #0e0f18;
  --color-surface: #171826;
  --color-text: #e8e8f0;
  --color-accent: #9184d9;
  --color-divider: color-mix(in srgb, #e8e8f0 15%, transparent);

  /* Ambra: il secondo fosforo dei 5250. Avvisi, badge, evidenziazioni. */
  --color-amber: #e8b339;

  /* Tonal ramps — same lightness scale, so the same step of any role
     matches the others in visual value. */
  --color-neutral-100: #f3f4fc;
  --color-neutral-200: #e2e4f2;
  --color-neutral-300: #cbcede;
  --color-neutral-400: #adb1c6;
  --color-neutral-500: #8d92ab;
  --color-neutral-600: #6f748d;
  --color-neutral-700: #55596e;
  --color-neutral-800: #3a3d4d;
  --color-neutral-900: #262835;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --font-heading: "IBM Plex Sans", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  /* La voce "di sistema": etichette, metadati, codici, schemi. È il carattere
     che dice al lettore "questa è una cosa che il computer direbbe così". */
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  /* Larghezza delle pagine larghe: home, sezioni e pannello. Sta qui, in un posto solo,
     perché è anche la misura su cui l'intestazione resta ferma. */
  --misura-larga: 1600px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* Alone appena accennato in alto a sinistra: dà profondità senza tingere mezza
     pagina di viola. */
  background:
    radial-gradient(90% 45% at 8% -12%, color-mix(in srgb, var(--color-accent-900) 55%, transparent), transparent 65%),
    var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-300); }
img { display: block; max-width: 100%; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
}

/* Una misura sola per tutte le pagine larghe. Prima erano due — 1900 per home e
   pannello, 1600 per le sezioni — e passando dall'una all'altra tutto scivolava di
   lato di centocinquanta pixel, intestazione compresa. */
.container.home,
.container.wide,
.container.tools { max-width: var(--misura-larga); }

/* Rules fade to transparent at both ends instead of stopping cleanly —
   a Nocturne signature. Used for freestanding section dividers. */
.hr-fade {
  height: 1px; border: 0;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent);
}

/* Cursore a blocco davanti al nome: il sito si presenta come un prompt. */
.logo-mark {
  width: 9px;
  height: 18px;
  background: var(--color-accent);
  display: inline-block;
  margin-right: 11px;
  flex: none;
}

/* — header — */
.site-header {
  padding: clamp(24px, 5vw, 44px) 0 0;
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Sfumatura lunga e morbida che continua il colore dell'header invece di finire con uno
   stacco netto: più è alta, più il passaggio verso i contenuti risulta graduale. */
.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -120px;
  height: 120px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--color-bg) 55%, transparent),
    color-mix(in srgb, var(--color-bg) 18%, transparent) 55%,
    transparent);
  pointer-events: none;
}

@keyframes content-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* L'intestazione ha una larghezza sua e non quella del contenuto sotto.
   Prima ereditava il contenitore della pagina, che cambia da sezione a sezione — 1900
   sulla home, 1600 sulle sezioni, 1080 su un articolo con indice, 720 su uno senza — e
   il risultato era un logo che saltava a sinistra e a destra a ogni clic. Il contenuto
   può respirare come vuole; la barra in alto è un punto fermo e deve restare dov'è. */
.site-header-inner {
  max-width: var(--misura-larga);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px) clamp(20px, 4vw, 32px);
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: clamp(16px, 4vw, 40px);
  flex-wrap: wrap;
}

.logo {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(18px, 1.6vw + 12px, 22px);
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  margin-right: auto;
}
.logo:hover { color: var(--color-accent-300); }

/* — layout home: categorie a sinistra + contenuto centrato — */
/* Tre colonne invece di due: la terza resta vuota e ha la stessa larghezza della barra
   laterale. Serve a far cadere gli articoli al centro della PAGINA; con due sole colonne
   il contenuto veniva centrato nello spazio rimasto a destra della barra, e quindi
   appariva spostato verso destra. */
.page-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 200px;
  align-items: start;
  gap: 48px;
}

.sidebar-left {
  flex: none;
  width: 200px;
  position: sticky;
  top: 132px; /* sotto l'header, ora fisso in alto durante lo scroll */
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.categories-nav-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  padding: 10px 14px;
  cursor: pointer;
}

.categories-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.categories-nav-title {
  margin: 0 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.categories-nav a {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}

.categories-nav a:hover {
  color: var(--color-accent-300);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.categories-nav a.is-active {
  color: var(--color-accent-300);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}

/* — riepilogo numeri del sito, sotto le categorie — */
.site-info {
  padding-top: 24px;
  border-top: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-info-title {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.site-info-item { display: flex; flex-direction: column; gap: 2px; }

.site-info-value {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.site-info-label {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.content-center {
  flex: 1;
  min-width: 0;
  max-width: 1080px;
  margin: 0 auto;
}

/* Selettore "main.container" (non solo "main"): la classe .container ha una specificità
   più alta di un semplice tag ed ha già un padding-top/bottom a 0 nel suo shorthand — senza
   il .container qui, quella regola vinceva sempre e questo padding-top risultava 0px, a
   prescindere dal valore scritto qui sotto. */
main.container {
  padding-top: clamp(36px, 5.5vw, 70px);
  padding-bottom: clamp(60px, 10vw, 120px);
  min-height: 60vh;
  animation: content-fade-in 0.5s ease-out;
}

/* — homepage magazine layout — */
.magazine-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 72px;
  align-items: start;
}

/* min-width: 0 necessario perché i grid item, di default, non si restringono oltre la
   larghezza del loro contenuto (min-content) anche se la colonna è minmax(0, ...) */
.hero { min-width: 0; }

.hero-kicker {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Il cursore a blocco del 5250 al posto del trattino: è il segno che su quegli
   schermi dice "qui si scrive", ed è riconoscibile a colpo d'occhio da chi ci lavora. */
.kicker-mark {
  width: 8px;
  height: 15px;
  background: var(--color-accent);
  display: block;
  flex: none;
}

.hero-title { margin: 0 0 20px; font-size: clamp(28px, 4vw + 18px, 46px); line-height: 1.08; letter-spacing: -0.025em; max-width: 22ch; text-wrap: pretty; }
.hero-title a { color: var(--color-text); }
.hero-title a:hover { color: var(--color-accent-300); }

.hero-excerpt {
  margin: 0 0 14px;
  max-width: 58ch;
  font-size: 17px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  text-wrap: pretty;
}

.hero-subtext {
  margin: 0 0 28px;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
  text-wrap: pretty;
}

.hero-cta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.sidebar {
  min-width: 0;
  border-left: 1px solid var(--color-divider);
  padding-left: 28px;
}

.sidebar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-divider);
}

.sidebar-head h2 {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.sidebar-count {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 38%, transparent);
  font-variant-numeric: tabular-nums;
}

.article-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.article-list li { border-bottom: 1px solid var(--color-divider); }

.article-list a {
  display: block;
  padding: 16px 0;
  text-decoration: none;
  color: inherit;
}

.article-list a:hover { color: var(--color-accent-300); }

.article-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text) 42%, transparent);
}

.article-category {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}

.article-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.empty-state { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

/* — single post — */
.single-post h1 { font-size: clamp(26px, 3vw + 16px, 36px); margin-bottom: 4px; }

.single-post time {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 0.9rem;
}

.post-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 16px; }

/* Il <form> attorno al pulsante "Salva" è un blocco senza stile in mezzo a elementi flex:
   così com'è si allineava/dimensionava in modo incoerente rispetto al pulsante "Condividi"
   (che è un figlio diretto). display:contents lo toglie dal box model, lasciando il suo
   pulsante come figlio flex diretto al pari degli altri. */
.post-actions form { display: contents; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 14px;
  background: none;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

/* L'SVG eredita font-size dal pulsante e senza queste regole può ridimensionarsi
   in modo imprevedibile mentre i font si caricano, spostando il testo accanto. */
.icon-btn svg { flex: none; width: 16px; height: 16px; display: block; }
.icon-btn:hover { color: var(--color-accent-300); border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); }
.icon-btn.is-active { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); }

.post-content { margin-top: 30px; }
.post-content img { max-width: 100%; border-radius: var(--radius-md); }

.post-content pre {
  overflow-x: auto;
  max-width: 100%;
  padding: 16px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.post-content code {
  background: var(--color-surface);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 0.9em;
  word-break: break-word;
}
.post-content pre code {
  background: none;
  padding: 0;
  word-break: normal;
  white-space: pre;
}

.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

.back-link {
  display: inline-block;
  margin-top: 40px;
  color: var(--color-accent);
  text-decoration: none;
}

/* — commenti — */
.comments-section {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--color-divider);
}
.comments-section h2 { font-size: 22px; margin-bottom: 20px; }

.comment-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item {
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}

.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}
.comment-author { font-weight: 600; color: color-mix(in srgb, var(--color-text) 85%, transparent); }
.comment-meta time { color: color-mix(in srgb, var(--color-text) 50%, transparent); font-size: 12px; }

.comment-content {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.comment-form { margin-top: 8px; }
.comment-form textarea.input { min-height: 100px; padding-top: 8px; resize: vertical; }

.comment-gate {
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* — newsletter — */
.newsletter {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px) clamp(32px, 6vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 32px 56px;
}

.newsletter-copy h2 { font-size: 22px; margin-bottom: 6px; }
.newsletter-copy p {
  margin: 0;
  max-width: 42ch;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.newsletter-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.newsletter-field { min-width: 240px; margin: 0; }

.newsletter-form .btn { min-height: 36px; }

.newsletter-message {
  grid-column: 1 / -1;
  margin: -8px 0 0;
  font-size: 13px;
}

.newsletter-message--success { color: var(--color-accent-300); }
.newsletter-message--duplicate { color: var(--color-neutral-400); }
.newsletter-message--invalid { color: #e0938a; }
.newsletter-message--email-failed { color: #e0938a; }

@media (max-width: 640px) {
  .newsletter { grid-template-columns: minmax(0, 1fr); }
  .newsletter-form { align-items: stretch; }
  .newsletter-field { min-width: 0; }
  .newsletter-form .btn { width: 100%; }
}

/* — footer — */
.site-footer {
  max-width: 1080px;
  margin: clamp(48px, 10vw, 104px) auto 0;
  padding: 0 clamp(20px, 5vw, 40px);
}

.footer-rule {
  height: 1px; border: 0; margin: 0 0 32px;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: start;
}

.footer-brand {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  display: flex;
  align-items: center;
}

.footer-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  max-width: 34ch;
}

.footer-links { display: flex; flex-direction: column; gap: 8px; }

.footer-links h3 {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

.footer-links a {
  font-size: 13px;
  text-decoration: none;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

.footer-links a:hover { color: var(--color-accent-300); }

.footer-social { display: flex; align-items: center; gap: 8px; }

.footer-copy {
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
  font-size: 0.85rem;
  text-align: center;
  padding: 32px 20px 40px;
  margin: 0;
}

.not-found {
  text-align: center;
  padding: 60px 0;
}

/* — auth nav (header) — */
.auth-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  font-size: 13px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  margin-right: 16px;
  padding: 0 7px;
  border-radius: var(--radius-md);
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.lang-switch:hover {
  opacity: 1;
  transform: scale(1.08);
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.flag-icon {
  display: block;
  border-radius: 3px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-text) 20%, transparent);
}

/* — menu utente a tendina — */
.user-menu { position: relative; }

.user-menu-trigger {
  display: flex; align-items: center; gap: 6px;
  max-width: min(280px, 60vw);
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
  padding: 6px 4px;
}
.user-menu-trigger:hover { color: var(--color-accent-300); }

.user-menu-email {
  max-width: 15ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.user-menu-caret { flex: none; font-size: 10px; opacity: 0.7; }

.user-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 20;
}

.user-menu-dropdown.is-open { display: block; }

.user-menu-dropdown a,
.user-menu-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  background: none; border: 0;
  font: inherit; font-size: 13px; cursor: pointer;
  text-decoration: none;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}

.user-menu-dropdown a:hover,
.user-menu-dropdown button:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent-300);
}

.user-menu-dropdown form { margin: 0; }

/* — login / registrazione — */
.auth-page { max-width: 380px; margin: 0 auto; }
.auth-page h1 { font-size: 26px; margin-bottom: 24px; text-align: center; }

.auth-form { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }

.auth-switch {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* — chi siamo / contatti — */
.about-page { max-width: 640px; margin: 0 auto; }
.about-page h1 { font-size: 32px; margin-bottom: 24px; }

.saved-posts-page { max-width: 640px; }
.saved-posts-page h1 { font-size: 32px; margin-bottom: 24px; }
.saved-posts-page .article-list { margin: 0 0 24px; }

.contact-page { max-width: 480px; }
.contact-intro { margin-bottom: 20px; }
.contact-form textarea.input { min-height: 140px; padding-top: 8px; resize: vertical; }

/* — pannello statistiche — */
.stats-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding: 20px 24px;
  margin: 20px 0 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}

.stats-summary-item { display: flex; flex-direction: column; gap: 2px; }

a.stats-summary-item,
button.stats-summary-item {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
a.stats-summary-item:hover,
button.stats-summary-item:hover { color: var(--color-accent-300); }

.stats-summary-item--link { justify-content: center; }

.stats-section-title { margin: 32px 0 4px; font-size: 18px; }

.chart-card {
  margin-top: 16px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}

/* — pannello admin — */
.admin-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.admin-stats { margin-bottom: 8px; }

.admin-section-title { margin: 40px 0 4px; font-size: 20px; }

.admin-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
}

.admin-search-input { max-width: 220px; }
.admin-category-select { max-width: 200px; }

.admin-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}

.admin-status-tabs .btn.is-active {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: var(--color-accent-300);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 16px;
}

.admin-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.admin-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--color-divider);
}

.admin-table td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 14px;
}

/* NB: il flex va sul div interno, mai sul <td> stesso — display:flex su una cella di tabella
   la fa uscire dal layout a tabella (la cella smette di allinearsi con le altre della riga,
   bordi compresi) invece di limitarsi a disporre i pulsanti al suo interno. */
.admin-table-actions-inner { display: flex; gap: 6px; justify-content: flex-end; }
.admin-table-actions-inner form { display: inline; }

.admin-table-comment {
  max-width: 360px;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-form { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.admin-delete-form { margin-top: 20px; max-width: 720px; }

.categories-rename-form { display: flex; align-items: center; gap: 8px; }
.categories-rename-form .input { min-width: 160px; }
.categories-add-title { margin: 32px 0 16px; font-size: 18px; }

/* — editor articolo — */
.editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  align-items: start;
}

.editor-main .field { margin-bottom: 16px; }

.editor-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 20px;
}

.editor-radio-group { display: flex; flex-direction: column; gap: 6px; }
.editor-radio, .editor-checkbox {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; cursor: pointer;
}

.field-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

/* l'editor EasyMDE sostituisce la textarea, ma finché non è caricato mostra un'altezza ragionevole */
#post-content { min-height: 320px; }

/* — responsive — */
@media (max-width: 860px) {
  .magazine-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .sidebar { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-divider); padding-top: 28px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .page-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sidebar-left { width: 100%; position: static; gap: 16px; }

  .categories-nav-toggle { display: flex; }
  .categories-nav {
    display: none;
    width: 100%;
  }
  .categories-nav.is-open { display: flex; margin-top: 8px; }
  .categories-nav-title { display: none; }
  .content-center { max-width: 100%; }
}

@media (max-width: 640px) {
  .site-header-inner { gap: 12px; }
  .categories-nav a { padding: 8px 12px; font-size: 14px; }
  .hero-cta { gap: 8px; }
  .footer-copy { padding: 24px 20px 32px; }
  .editor-layout { grid-template-columns: minmax(0, 1fr); }
  .admin-page-head .btn { width: 100%; }
}

@media (max-width: 420px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TEMA DEL PANNELLO
   ══════════════════════════════════════════════════════════════════════════
   Il pannello ha un aspetto suo, diverso dal sito pubblico. Non è un vezzo:
   quando si passa da una scheda all'altra tutto il giorno, sapere al primo
   colpo d'occhio se si sta guardando il sito o il retro evita di cercare
   conferme nella barra degli indirizzi.

   Il sito pubblico è viola su nero. Qui la temperatura è opposta: grafite
   freddo e un ciano da strumentazione. Niente righe di scansione e nessuna
   nostalgia: è una superficie di lavoro e deve reggere otto ore senza
   affaticare. L'unico alone è sulla cifra che fa da spia nella sala controllo.

   Ridefinisce le variabili già esistenti, quindi bottoni, tabelle, tag e
   moduli si adeguano da soli senza riscrivere un componente.
   ══════════════════════════════════════════════════════════════════════ */
body.theme-admin {
  --color-bg: #0c0d11;
  --color-surface: #14161d;
  --color-text: #e7e9ee;
  --color-divider: color-mix(in srgb, #e7e9ee 11%, transparent);

  /* Ciano acciaio: si legge come uno strumento di misura, non come un sito. */
  --color-accent: #4cc4e0;
  --color-accent-100: #eafaff;
  --color-accent-200: #c9f1fa;
  --color-accent-300: #9de4f4;
  --color-accent-400: #6fd3ea;
  --color-accent-500: #4cc4e0;
  --color-accent-600: #2f9db8;
  --color-accent-700: #23788d;
  --color-accent-800: #1a5566;
  --color-accent-900: #123642;

  /* Neutri leggermente freddi: su un fondo grafite i grigi neutri sembrano sporchi. */
  --color-neutral-100: #f2f4f8;
  --color-neutral-200: #dfe3ea;
  --color-neutral-300: #c3c9d4;
  --color-neutral-400: #9aa2b1;
  --color-neutral-500: #7b8393;
  --color-neutral-600: #5e6675;
  --color-neutral-700: #454c58;
  --color-neutral-800: #2c313b;
  --color-neutral-900: #1a1d24;

  --color-amber: #f0b849;

  /* Nessuna trama, nessun alone: solo una schiaritura appena percettibile in alto,
     che dà profondità senza colorare la superficie di lavoro. */
  background:
    radial-gradient(120% 50% at 50% -20%, rgba(76, 196, 224, 0.05), transparent 70%),
    var(--color-bg);
}

/* Il sito pubblico ha la trama di scansione sul fondo. Qui no: su una schermata che
   si fissa a lungo diventa rumore. */
body.theme-admin::before { content: none; }

/* Titoli in tondo, non in monospazio: nel pannello si legge, non si contempla.
   Il monospazio resta dov'è utile — numeri, codici, etichette — e lì fa il suo
   lavoro proprio perché non è ovunque. */
body.theme-admin h1,
body.theme-admin h2,
body.theme-admin h3 { text-shadow: none; letter-spacing: -0.02em; }
body.theme-admin h1 { font-size: clamp(26px, 2vw + 18px, 34px); }

body.theme-admin .site-header {
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  border-bottom: 1px solid var(--color-divider);
}
body.theme-admin .site-header::after { content: none; }
body.theme-admin .logo { color: var(--color-text); }
body.theme-admin .logo-mark { background: var(--color-accent); }

/* Superfici: bordo sottile ed elevazione appena accennata. È ciò che distingue un
   pannello moderno da una pagina con dei riquadri — la gerarchia la fa la superficie,
   non la linea. */
body.theme-admin .riquadro,
body.theme-admin .stats-summary,
body.theme-admin .terminal-panel,
body.theme-admin .chart-card,
body.theme-admin .salute-blocco,
body.theme-admin .confronto-cella,
body.theme-admin .inventario-cella {
  background: var(--color-surface);
  border-color: var(--color-divider);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

body.theme-admin .admin-table th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  font-weight: 500;
}
body.theme-admin .admin-table tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }

body.theme-admin .btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #06222b;
  font-weight: 600;
}
body.theme-admin .btn-primary:hover { background: var(--color-accent-400); border-color: var(--color-accent-400); }
body.theme-admin .input:focus { border-color: var(--color-accent); }
body.theme-admin ::selection { background: color-mix(in srgb, var(--color-accent) 28%, transparent); }

/* ══════════════════════════════════════════════════════════════════════════
   FASE 2 — ricerca, griglia articoli, paginazione, lettura articolo
   ══════════════════════════════════════════════════════════════════════ */

/* — barra di ricerca — */
.search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
}

/* L'icona è posizionata rispetto a questo contenitore, non all'intero form: così resta
   dentro al campo anche quando il pulsante va a capo su schermi stretti. */
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.search-field .search-icon {
  position: absolute;
  left: 12px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  pointer-events: none;
}
.search-input { padding-left: 36px; }
.search-input::-webkit-search-cancel-button { filter: invert(0.6); }

.search-summary {
  margin: -16px 0 24px;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

/* — griglia articoli — */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.post-card {
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  background: var(--color-surface);
}

.post-card-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.post-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.post-card-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  color: var(--color-text);
}
.post-card:hover .post-card-title { color: var(--color-accent-300); }

.post-card-excerpt {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

/* — paginazione — */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.pagination-status {
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-variant-numeric: tabular-nums;
}
.btn.is-disabled { opacity: 0.35; pointer-events: none; }

/* — barra di avanzamento lettura — */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(to right, var(--color-accent), var(--color-accent-300));
  z-index: 60;
  transition: width 0.08s linear;
}

/* — riga informazioni sotto il titolo articolo — */
.post-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.post-meta-sep { opacity: 0.5; }

/* — indice dei paragrafi — */
.post-toc {
  margin-top: 28px;
  padding: 16px 20px;
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.post-toc-title {
  margin: 0 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.post-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.post-toc a { font-size: 14px; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.post-toc a:hover { color: var(--color-accent-300); }
.post-toc-l3 { padding-left: 16px; font-size: 13px; }

/* I titoli sono bersaglio dei link dell'indice: lo scroll si ferma sotto l'header fisso */
.post-content h2,
.post-content h3 { scroll-margin-top: 120px; }

/* — articoli correlati — */
.related-posts { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--color-divider); }
.related-posts h2 { font-size: 22px; margin-bottom: 4px; }
.related-posts .post-grid { margin-top: 20px; }

/* Chi preferisce meno animazioni (impostazione di sistema) non le subisce */
@media (prefers-reduced-motion: reduce) {
  .post-card, .reading-progress, main { transition: none; animation: none; }
  .post-card:hover { transform: none; }
}

@media (max-width: 640px) {
  .search-form { flex-wrap: wrap; }
  .search-field { flex: 1 0 100%; }
  .search-form .btn { width: 100%; }
  .post-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE 3 — commenti con risposte, azioni utente, newsletter dall'account
   ══════════════════════════════════════════════════════════════════════ */

.comment-edited {
  font-size: 11px;
  font-style: italic;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

.comment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.comment-actions form { display: contents; }

/* Pulsante che si comporta come un link: per azioni secondarie dentro ai commenti */
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--color-accent);
  cursor: pointer;
}
.link-btn:hover { color: var(--color-accent-300); text-decoration: underline; }
.link-btn--danger { color: #e0938a; }
.link-btn--danger:hover { color: #f0b0a8; }

/* L'attributo hidden nasconde tramite display:none del browser, ma una regola display:flex
   dell'autore ha la meglio: senza questa riga i moduli "rispondi"/"modifica" resterebbero
   sempre aperti invece di comparire al click. */
[hidden] { display: none !important; }

.comment-inline-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.comment-inline-form textarea.input { min-height: 80px; padding-top: 8px; resize: vertical; }

/* Risposte: rientrate e con una linea verticale che le collega al commento padre */
.comment-replies {
  margin: 16px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--color-divider);
}
.comment-reply { background: color-mix(in srgb, var(--color-surface) 55%, transparent); }

/* — newsletter nella pagina account — */
.account-newsletter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.account-newsletter-state { margin: 0; font-size: 14px; }

@media (max-width: 640px) {
  .comment-replies { padding-left: 12px; }
  .account-newsletter { flex-direction: column; align-items: stretch; }
}

/* Stato del salvataggio automatico nell'editor articoli */
.autosave-status { margin-top: 10px; text-align: center; min-height: 1em; }

/* ══════════════════════════════════════════════════════════════════════════
   FASE A — copertine, colore per categoria, tema chiaro
   ══════════════════════════════════════════════════════════════════════ */

/* — tema chiaro —
   Ridefinisce le stesse variabili del tema scuro: tutti i componenti si adattano
   da soli, senza dover riscrivere regola per regola.
   Si attiva se l'utente lo sceglie (data-theme="light") oppure, in assenza di
   scelta, se il sistema operativo è impostato su chiaro. */
:root[data-theme="light"],
:root:not([data-theme]) {
  color-scheme: dark;
}

/* Chi ha il sistema in tema chiaro e non ha ancora scelto niente sul sito.
   Prima qui venivano ridefiniti cinque token su venticinque: fondo e testo
   diventavano chiari, ma le rampe restavano quelle del tema scuro, e i testi
   secondari finivano grigio chiaro su bianco. L'elenco è lo stesso di
   [data-theme="light"] qui sotto, e va tenuto allineato: il CSS non permette
   di condividere un blocco fra dentro e fuori una media query. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg: #f7f7fb;
    --color-surface: #ffffff;
    --color-text: #16171f;
    --color-divider: color-mix(in srgb, #16171f 14%, transparent);
    --color-accent: #5a4bbd;
    --color-amber: #8a5d00;

    --color-accent-100: #2b2455;
    --color-accent-200: #3a3072;
    --color-accent-300: #4a3d94;
    --color-accent-400: #5a4bbd;
    --color-accent-500: #7a6bd6;
    --color-accent-600: #9c90e4;
    --color-accent-700: #c0b8ef;
    --color-accent-800: #ded9f7;
    --color-accent-900: #efecfc;

    --color-neutral-100: #131420;
    --color-neutral-200: #23253a;
    --color-neutral-300: #3a3d4e;
    --color-neutral-400: #5a5e73;
    --color-neutral-500: #7c8096;
    --color-neutral-600: #a0a4b6;
    --color-neutral-700: #c4c7d4;
    --color-neutral-800: #e2e4ec;
    --color-neutral-900: #f1f2f7;

    --shadow-sm: 0 0 0 1px #e2e4ec;
    --shadow-md: 0 0 0 1px #d6d8e2, 0 6px 18px rgba(22,23,31,0.10);
    --shadow-lg: 0 0 0 1px #c4c7d4, 0 16px 40px rgba(22,23,31,0.16);
    color-scheme: light;
  }
}

/* Tema chiaro: il viola acceso su fondo bianco perde leggibilità, quindi l'accento
   scende di luminosità. È lo stesso colore in senso cromatico, non un secondo tema:
   cambia solo quanta luce serve. */
:root[data-theme="light"] {
  --color-bg: #f7f7fb;
  --color-surface: #ffffff;
  --color-text: #16171f;
  --color-divider: color-mix(in srgb, #16171f 14%, transparent);
  --color-accent: #5a4bbd;
  --color-amber: #8a5d00;

  --color-accent-100: #2b2455;
  --color-accent-200: #3a3072;
  --color-accent-300: #4a3d94;
  --color-accent-400: #5a4bbd;
  --color-accent-500: #7a6bd6;
  --color-accent-600: #9c90e4;
  --color-accent-700: #c0b8ef;
  --color-accent-800: #ded9f7;
  --color-accent-900: #efecfc;

  --color-neutral-100: #131420;
  --color-neutral-200: #23253a;
  --color-neutral-300: #3a3d4e;
  --color-neutral-400: #5a5e73;
  --color-neutral-500: #7c8096;
  --color-neutral-600: #a0a4b6;
  --color-neutral-700: #c4c7d4;
  --color-neutral-800: #e2e4ec;
  --color-neutral-900: #f1f2f7;

  --shadow-sm: 0 0 0 1px #e2e4ec;
  --shadow-md: 0 0 0 1px #d6d8e2, 0 6px 18px rgba(22,23,31,0.10);
  --shadow-lg: 0 0 0 1px #c4c7d4, 0 16px 40px rgba(22,23,31,0.16);
  color-scheme: light;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(120% 60% at 12% -10%, #ece9fb, transparent 60%),
    var(--color-bg);
}
:root[data-theme="light"] .site-header { background: color-mix(in srgb, var(--color-bg) 88%, transparent); }
:root[data-theme="light"] .post-content pre,
:root[data-theme="light"] .post-content code { background: #f0f1f6; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body {
    background:
      radial-gradient(120% 60% at 12% -10%, #ece9fb, transparent 60%),
      var(--color-bg);
  }
}

/* — interruttore tema — */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover { color: var(--color-accent-300); border-color: color-mix(in srgb, var(--color-accent) 50%, transparent); }

/* Si mostra l'icona dell'azione che il click produrrà: luna se sei al chiaro, sole se sei allo scuro */
.theme-icon { display: none; }
:root[data-theme="light"] .theme-icon--moon { display: block; }
:root[data-theme="dark"] .theme-icon--sun { display: block; }
:root:not([data-theme]) .theme-icon--sun { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-icon--sun { display: none; }
  :root:not([data-theme]) .theme-icon--moon { display: block; }
}

/* — badge categoria colorato — */
.cat-badge {
  /* Colori dalle variabili e non da uno stile in linea: così il tema chiaro può
     sostituirli. Con il colore scritto in linea nell'HTML nessuna regola del foglio
     di stile riusciva a intervenire. */
  color: var(--cat-text, var(--color-accent-300));
  border-color: var(--cat-border, var(--color-divider));
  background: var(--cat-bg, transparent);
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid;
  border-radius: 999px;
  white-space: nowrap;
}

/* — copertine nelle schede — */
.post-card { border-color: var(--cat-border, var(--color-divider)); }
.post-card-link { padding: 0; gap: 0; }

.post-card-cover {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--color-divider);
}

.post-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
}

/* — hero in stile rivista — */
.hero--magazine {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--color-divider);
  min-height: 340px;
  display: flex;
  align-items: flex-end;
}

/* Velo scuro sotto al testo: rende leggibile il titolo su qualunque immagine */
.hero--magazine::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 14, 0.92) 0%, rgba(8, 8, 14, 0.72) 42%, rgba(8, 8, 14, 0.25) 100%);
}

.hero-overlay {
  position: relative;
  padding: clamp(24px, 4vw, 40px);
  width: 100%;
}
.hero--magazine .hero-kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #d8d9e4; }
.hero--magazine .hero-title { margin: 10px 0 12px; }
.hero--magazine .hero-title a { color: #fff; }
.hero--magazine .hero-title a:hover { color: var(--color-accent-300); }
.hero--magazine .hero-excerpt { color: #c9cad6; max-width: 60ch; }

/* — selettore copertina nell'editor — */
.cover-picker { display: flex; flex-direction: column; gap: 8px; }
.cover-preview {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
}
.cover-picker-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cover-upload-btn { cursor: pointer; }

@media (max-width: 640px) {
  .hero--magazine { min-height: 260px; }
}

/* — categorie colorate nella barra laterale —
   Ogni voce ha un pallino del colore della sua categoria; quando è attiva, testo,
   sfondo e bordo assumono quel colore. Coerente coi badge nelle schede. */
.cat-link {
  display: flex;
  align-items: center;
  gap: 9px;
}

.cat-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cat-text, var(--color-accent));
  box-shadow: 0 0 0 3px var(--cat-bg, transparent);
  transition: transform 0.15s ease;
}
.cat-dot--all {
  background: none;
  border: 2px solid color-mix(in srgb, var(--color-text) 40%, transparent);
}
.cat-link:hover .cat-dot { transform: scale(1.25); }

/* Sovrascrivono le regole generiche di .categories-nav a, che usano il viola di sistema */
.categories-nav a.cat-link:hover {
  color: var(--cat-text, var(--color-accent-300));
  background: var(--cat-bg, color-mix(in srgb, var(--color-accent) 12%, transparent));
}
.categories-nav a.cat-link.is-active {
  color: var(--cat-text, var(--color-accent-300));
  background: var(--cat-bg, color-mix(in srgb, var(--color-accent) 14%, transparent));
  border-color: var(--cat-border, color-mix(in srgb, var(--color-accent) 55%, transparent));
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE B — codice, indice laterale, riquadri, box autore, tag
   ══════════════════════════════════════════════════════════════════════ */

/* — blocchi di codice con barra: linguaggio + pulsante copia — */
.post-content pre.has-code-bar { position: relative; padding-top: 42px; }

.code-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.code-lang {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.code-copy {
  margin-left: auto;
  background: none;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font: inherit;
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
}
.code-copy:hover { color: var(--color-accent-300); border-color: color-mix(in srgb, var(--color-accent) 50%, transparent); }
.code-copy.is-done { color: #7ddc9a; border-color: #7ddc9a80; }

/* highlight.js porta il proprio sfondo: lo neutralizziamo per restare coerenti col tema */
.post-content pre code.hljs { background: none; padding: 0; }

/* — riquadri nota / attenzione / suggerimento — */
.callout {
  display: flex;
  gap: 14px;
  margin: 24px 0;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid;
  border-left-width: 3px;
}
.callout-body { flex: 1; min-width: 0; }
.callout-body > p:last-child { margin-bottom: 0; }
.callout-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.callout-icon {
  flex: none;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

.callout--note      { border-color: #5aa9e680; background: #5aa9e614; }
.callout--note .callout-label,
.callout--note .callout-icon { color: #8ec6f0; }
.callout--note .callout-icon { background: #5aa9e626; }

.callout--warning   { border-color: #e0938a80; background: #e0938a14; }
.callout--warning .callout-label,
.callout--warning .callout-icon { color: #eaa79f; }
.callout--warning .callout-icon { background: #e0938a26; }

.callout--tip       { border-color: #7ddc9a80; background: #7ddc9a14; }
.callout--tip .callout-label,
.callout--tip .callout-icon { color: #9ae6b2; }
.callout--tip .callout-icon { background: #7ddc9a26; }

.callout--important { border-color: #d9a45b80; background: #d9a45b14; }
.callout--important .callout-label,
.callout--important .callout-icon { color: #e6bd82; }
.callout--important .callout-icon { background: #d9a45b26; }

/* — indice laterale che segue lo scroll (solo su schermi larghi) — */
.post-layout { display: block; }

@media (min-width: 1100px) {
  .post-layout--with-toc {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  .post-layout--with-toc .post-toc {
    position: sticky;
    top: 130px;
    margin-top: 30px;
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    background: none;
    border: 0;
    border-left: 2px solid var(--color-divider);
    border-radius: 0;
    padding: 0 0 0 16px;
  }
  .post-layout--with-toc .post-content { margin-top: 30px; }
}

/* Voce corrispondente alla sezione che si sta leggendo */
.post-toc a.is-current {
  color: var(--color-accent-300);
  font-weight: 600;
}
.post-layout--with-toc .post-toc a { display: block; padding-left: 10px; margin-left: -18px; border-left: 2px solid transparent; }
.post-layout--with-toc .post-toc a.is-current { border-left-color: var(--color-accent); }

/* — tag cliccabili — */
a.tag.tag-outline { text-decoration: none; transition: background 0.15s ease, color 0.15s ease; }
a.tag.tag-outline:hover { background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent-300); }

/* — box autore in fondo all'articolo — */
.author-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 40px;
  padding: 20px;
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
.author-avatar {
  flex: none;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.author-avatar .logo-mark { margin: 0; }
.author-name { margin: 0 0 4px; font-family: var(--font-heading); font-weight: 600; font-size: 15px; }
.author-bio { margin: 0 0 8px; font-size: 13px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.author-links { margin: 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

@media (max-width: 640px) {
  .author-box { flex-direction: column; }
}

/* Pagina articolo con indice laterale: il contenitore si allarga solo quando l'indice
   è davvero affiancato (>=1100px), così la colonna di testo resta comoda da leggere.
   Sotto quella soglia l'indice torna sopra al testo e vale la larghezza normale. */
@media (min-width: 1100px) {
  .container.reading { max-width: 1080px; }
}

/* — colori dei token del codice —
   Tonalità scelte per restare leggibili sia sul tema scuro sia su quello chiaro. */
.tok-com { color: #7f8496; font-style: italic; }
.tok-str { color: #9ae6b2; }
.tok-num { color: #e6bd82; }
.tok-kw  { color: #b5abfc; font-weight: 600; }

:root[data-theme="light"] .tok-com { color: #6b7280; }
:root[data-theme="light"] .tok-str { color: #067d4e; }
:root[data-theme="light"] .tok-num { color: #a15c00; }
:root[data-theme="light"] .tok-kw  { color: #5a4bbd; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tok-com { color: #6b7280; }
  :root:not([data-theme="dark"]) .tok-str { color: #067d4e; }
  :root:not([data-theme="dark"]) .tok-num { color: #a15c00; }
  :root:not([data-theme="dark"]) .tok-kw  { color: #5a4bbd; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE C — schede variabili, più letti, intestazione categoria
   ══════════════════════════════════════════════════════════════════════ */

/* — prima scheda più grande, per creare gerarchia —
   Si applica solo quando non c'è già un articolo in evidenza sopra alla griglia. */
@media (min-width: 900px) {
  .post-grid--lead > .post-card:first-child { grid-column: span 2; }
  .post-grid--lead > .post-card:first-child .post-card-cover { aspect-ratio: 3 / 1; }
  .post-grid--lead > .post-card:first-child .post-card-title { font-size: 24px; }
  .post-grid--lead > .post-card:first-child .post-card-excerpt { font-size: 14px; }
}

/* — articoli più letti (colonna laterale) — */
.most-read {
  padding-top: 24px;
  border-top: 1px solid var(--color-divider);
}
.most-read-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: mostread;
}
.most-read-list li { display: flex; gap: 10px; align-items: baseline; }
.most-read-rank {
  flex: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-accent) 70%, transparent);
  font-variant-numeric: tabular-nums;
  min-width: 14px;
}
.most-read-list a {
  font-size: 13px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}
.most-read-list a:hover { color: var(--color-accent-300); }

/* — intestazione della pagina categoria — */
.category-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
  padding: 20px 22px;
  background: var(--cat-bg, color-mix(in srgb, var(--color-surface) 70%, transparent));
  border: 1px solid var(--cat-border, var(--color-divider));
  border-radius: var(--radius-lg);
}
.category-icon {
  flex: none;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cat-text, var(--color-accent));
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--radius-md);
}
.category-icon svg { width: 26px; height: 26px; }
.category-title { margin: 0; font-size: 26px; color: var(--cat-text, var(--color-text)); }
.category-desc {
  margin: 4px 0 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

@media (max-width: 640px) {
  .category-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE D — tipografia editoriale, comparsa allo scroll, errori, footer
   ══════════════════════════════════════════════════════════════════════ */

/* — tipografia editoriale —
   Titoli più decisi e testo dell'articolo più arioso: la lettura di contenuti
   tecnici lunghi ne beneficia più di qualsiasi altro accorgimento grafico. */
.single-post h1 {
  font-size: clamp(30px, 3.4vw + 16px, 44px);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.post-content {
  font-size: 16.5px;
  line-height: 1.72;
  max-width: 72ch; /* oltre questa larghezza l'occhio fatica a tornare a capo */
}
.post-content p { margin-bottom: 1.15em; }

.post-content h2 {
  font-size: 27px;
  margin-top: 2em;
  margin-bottom: 0.5em;
  letter-spacing: -0.02em;
}
.post-content h3 {
  font-size: 20px;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}

.post-content blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  font-style: italic;
}
.post-content ul, .post-content ol { padding-left: 1.3em; margin-bottom: 1.15em; }
.post-content li { margin-bottom: 0.4em; }
.post-content a { text-decoration: underline; text-decoration-thickness: 1px; }

/* — comparsa allo scroll — */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* — pagine di errore in stile terminale — */
.error-page { max-width: 620px; margin: 0 auto; text-align: center; }
.error-page h1 { font-size: 28px; margin-top: 32px; }
.error-page > p { color: color-mix(in srgb, var(--color-text) 65%, transparent); }

.error-screen {
  position: relative;
  text-align: left;
  padding: 16px 20px 20px;
  background: #04150a;
  border: 1px solid #33ff3355;
  border-radius: var(--radius-md);
  color: #33ff33;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  box-shadow: inset 0 0 60px #33ff3312;
  overflow: hidden;
}
/* righe di scansione, come su un monitor a fosfori */
.error-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(51,255,51,0.06) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.error-screen--alert { border-color: #ff555555; color: #ff8a7a; background: #170606; }
.error-screen--alert .error-screen-code { color: #ff8a7a; }

.error-screen-title {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  border-bottom: 1px solid currentColor;
  padding-bottom: 8px;
}
.error-screen-body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  background: none;
  padding: 0;
  color: inherit;
}
.error-screen-code {
  margin: 14px 0 0;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: right;
  opacity: 0.5;
  color: #33ff33;
}

.error-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* — stato vuoto più curato — */
.empty-state {
  text-align: center;
  padding: 44px 24px;
  border: 1px dashed var(--color-divider);
  border-radius: var(--radius-lg);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* — newsletter come riquadro dedicato — */
.newsletter--card {
  padding: 28px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-accent) 14%, transparent),
    color-mix(in srgb, var(--color-surface) 80%, transparent));
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: var(--radius-lg);
}
.newsletter-icon {
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  margin-bottom: 10px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  color: var(--color-accent-300);
}
.newsletter-icon svg { width: 22px; height: 22px; }

/* — footer a quattro colonne — */
.footer-grid--wide {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.footer-brand-col .footer-social { margin-top: 14px; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--color-divider);
}
.footer-bottom .footer-copy { margin: 0; padding: 0; }
.footer-madewith {
  margin: 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

@media (max-width: 860px) {
  .footer-grid--wide { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .footer-grid--wide { grid-template-columns: 1fr; }
}

/* — articoli riservati agli amministratori — */
.tag-private,
.badge-private {
  background: #d9a45b26;
  border-color: #d9a45b80;
  color: #e6bd82;
}

/* Avviso in cima all'articolo quando non è visibile a tutti: deve saltare all'occhio,
   altrimenti si rischia di lasciare un articolo in questo stato senza accorgersene. */
.visibility-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: #d9a45b14;
  border: 1px solid #d9a45b66;
  border-left-width: 3px;
  border-radius: var(--radius-md);
}
.visibility-banner-icon { font-size: 20px; line-height: 1; flex: none; }
.visibility-banner strong { display: block; font-size: 14px; color: #e6bd82; }
.visibility-banner p {
  margin: 3px 0 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.visibility-banner .btn { flex: none; margin-left: auto; }

@media (max-width: 640px) {
  .visibility-banner { flex-wrap: wrap; }
  .visibility-banner .btn { margin-left: 0; width: 100%; }
}

/* Altezza del grafico statistiche decisa qui invece che dalla proporzione del canvas:
   con maintainAspectRatio:false Chart.js riempie questo contenitore, così su mobile
   l'area del grafico resta leggibile invece di schiacciarsi in una striscia. */
.chart-holder {
  position: relative;
  height: 320px;
  width: 100%;
}

@media (max-width: 700px) {
  .chart-holder { height: 260px; }
  .chart-card { padding: 14px 10px; }
}

/* ==========================================================================
   NAVIGAZIONE PRINCIPALE
   Il sito non ne aveva una: si navigava solo dalla colonna delle categorie, cioè
   lo stesso schema di un blog WordPress. Con la barra in alto le sezioni del sito
   (articoli, strumenti) diventano pari fra loro, e la colonna laterale torna a fare
   solo il filtro per argomento che è.
   ========================================================================== */
.main-nav {
  display: flex;
  align-items: center;
  /* Sette voci: il respiro fra una e l'altra scende, altrimenti la riga sfora e va a
     capo proprio sui portatili, dove lo spazio in larghezza è meno di quanto sembri. */
  gap: clamp(11px, 1vw, 16px);
  font-size: 13.5px;
}
/* Il logo ha margin-right:auto per spingere a destra i comandi quando la navigazione
   non c'è (pannello admin). Con la navigazione presente quel margine va tolto, altrimenti
   si somma al gap e nelle pagine con contenitore stretto la riga sfora e va a capo.
   Se il browser non supporta :has, i menu restano leggibili, solo disposti diversamente. */
.site-header-inner:has(.main-nav) .logo { margin-right: 0; }
.site-header-inner:has(.main-nav) { gap: clamp(14px, 1.6vw, 22px); }

.main-nav a {
  position: relative;
  color: var(--color-neutral-500);
  text-decoration: none;
  padding: 4px 0;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.main-nav a:hover { color: var(--color-text); }
.main-nav a.is-active { color: var(--color-text); }
/* Sottolineatura solo sulla sezione corrente, disegnata sotto la linea di base */
.main-nav a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
}

@media (max-width: 620px) {
  .main-nav { width: 100%; order: 3; gap: 20px; font-size: 13px; }
  .site-header-inner:has(.main-nav) .logo { margin-right: auto; }
}

/* ==========================================================================
   PAGINA STRUMENTI
   ========================================================================== */
.tools-page { max-width: none; }

.tools-hero { margin-bottom: clamp(28px, 4vw, 40px); }
.tools-kicker {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-400);
  margin: 0 0 14px;
}
.tools-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw + 12px, 44px);
  line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.tools-lead {
  font-size: clamp(15px, 0.6vw + 14px, 18px);
  line-height: 1.6;
  color: var(--color-neutral-400);
  margin: 0 0 12px;
  max-width: 62ch;
}
.tools-privacy {
  font-size: 13px;
  color: var(--color-neutral-500);
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--color-accent-700);
  max-width: 62ch;
}

.tool-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(18px, 2.5vw, 28px);
  margin-bottom: clamp(18px, 2.5vw, 26px);
  scroll-margin-top: 100px;
}

.tool-card-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.tool-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent-400);
}
.tool-card-title {
  font-family: var(--font-heading);
  font-size: clamp(18px, 1vw + 15px, 22px);
  margin: 0 0 4px; line-height: 1.25;
}
.tool-card-desc { margin: 0; font-size: 14px; color: var(--color-neutral-400); line-height: 1.5; }

.tool-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.tool-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tool-field--grow { flex: 1 1 240px; }
.tool-field--narrow { flex: 0 0 96px; }
/* Etichette dei campi in monospazio: su un 5250 i nomi dei campi stanno a
   larghezza fissa, ed è il segno che distingue un modulo da un testo. */
.tool-field label {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-neutral-500);
}
.tool-field .input { width: 100%; }

.tool-note { margin: 14px 0 0; font-size: 13px; color: var(--color-neutral-500); min-height: 1em; }
.tool-note--error { color: #e88b8b; }

/* Risultati: etichetta a sinistra, valore copiabile a destra. Su schermo stretto
   il valore va a capo sotto l'etichetta invece di essere compresso. */
.tool-output { margin-top: 16px; display: flex; flex-direction: column; }
.tool-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--color-divider);
}
.tool-row:first-child { border-top: 0; }
.tool-row-label {
  font-size: 13px;
  color: var(--color-neutral-500);
  font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
}
.tool-row-value {
  justify-self: start;
  font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  font-size: 15px;
  color: var(--color-text);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 3px 7px;
  margin-left: -7px;
  cursor: pointer;
  text-align: left;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  position: relative;
}
.tool-row-value:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.tool-row-value--mono { letter-spacing: 0.04em; }
/* Conferma della copia mostrata al posto del suggerimento, senza spostare nulla */
.tool-row-value.is-copied::after {
  content: attr(data-copiato);
  position: absolute;
  right: -8px; top: 50%;
  transform: translate(100%, -50%);
  font-size: 11px;
  color: var(--color-accent-400);
  white-space: nowrap;
}
.tool-row-note { font-size: 12px; color: var(--color-neutral-600); white-space: nowrap; }

@media (max-width: 560px) {
  .tool-row { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .tool-row-label { grid-column: 1 / -1; }
  .tool-row-value { font-size: 14px; }
}

.tool-explain {
  margin-top: 18px;
  border-top: 1px solid var(--color-divider);
  padding-top: 14px;
}
.tool-explain summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--color-accent-400);
  list-style: none;
}
.tool-explain summary::-webkit-details-marker { display: none; }
.tool-explain summary::before { content: '+ '; }
.tool-explain[open] summary::before { content: '– '; }
.tool-explain p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-neutral-400);
  max-width: 68ch;
}
.tool-explain code {
  font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  font-size: 0.92em;
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  border-radius: 4px;
  padding: 1px 5px;
}
.tool-explain strong { color: var(--color-text); font-weight: 600; }

/* — prontuario comandi CL — */
.cl-list { margin-top: 18px; }
.cl-group + .cl-group { margin-top: 26px; }
.cl-group-title {
  font-family: var(--font-heading);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-neutral-500);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-divider);
}
.cl-item { padding: 10px 0; }
.cl-item + .cl-item { border-top: 1px solid color-mix(in srgb, var(--color-divider) 55%, transparent); }
.cl-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cl-name {
  font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent-300);
  background: none;
  padding: 0;
}
.cl-expansion { font-size: 12px; color: var(--color-neutral-600); font-style: italic; }
.cl-desc { margin: 5px 0 0; font-size: 14px; line-height: 1.55; color: var(--color-neutral-300); }

.tools-suggest {
  text-align: center;
  font-size: 14px;
  color: var(--color-neutral-500);
  margin: 30px 0 0;
}
.tools-suggest a { color: var(--color-accent-400); }

/* ==========================================================================
   HOME
   La home non è più "colonna categorie + lista cronologica" (lo schema del blog
   WordPress): apre con cosa è questo sito, mette subito gli strumenti, e solo
   dopo gli articoli. La colonna laterale resta dov'è utile davvero, cioè nelle
   pagine di categoria, ricerca e tag.
   ========================================================================== */
.lab-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(8px, 2vw, 24px) 0 clamp(28px, 4vw, 48px);
  max-width: 1180px;
  margin: 0 auto;
}

.lab-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4.4vw + 12px, 58px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}
.lab-hero-lead {
  font-size: clamp(15px, 0.5vw + 14px, 19px);
  line-height: 1.6;
  color: var(--color-neutral-400);
  margin: 0 0 26px;
  max-width: 46ch;
}
.lab-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Riquadro con del codice reale: dice cos'è questo sito senza bisogno di spiegarlo,
   e sostituisce la foto di repertorio che userebbe qualunque altro sito del settore. */
.lab-hero-panel {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.lab-panel-bar {
  display: flex; gap: 7px; align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-divider);
}
.lab-panel-bar span {
  width: 10px; height: 10px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-text) 22%, transparent);
}
.lab-panel-code {
  margin: 0;
  padding: 18px;
  font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  font-size: clamp(11.5px, 0.4vw + 10px, 13.5px);
  line-height: 1.75;
  color: var(--color-accent-300);
  white-space: pre;
  overflow-x: auto;
}

@media (max-width: 860px) {
  .lab-hero { grid-template-columns: 1fr; gap: 26px; }
  /* Il riquadro di codice resta SOTTO il titolo: su schermo stretto la prima cosa
     visibile deve dire cos'è il sito, non mostrare del codice senza contesto. */
}

/* — sezioni della home — */
.home-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 38px) 0;
  border-top: 1px solid var(--color-divider);
}
.home-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(16px, 2vw, 24px);
}
/* Titolo di sezione con il cursore a blocco davanti: sulle schermate 5250 le sezioni
   si aprono così, con un segno che dice "da qui comincia un'altra cosa". Costa una riga
   di CSS e dà al sito una cadenza che nessun concorrente ha. */
.home-section-title {
  font-family: var(--font-heading);
  font-size: clamp(17px, 0.8vw + 14px, 22px);
  margin: 0;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 11px;
}
.home-section-title::before {
  content: '';
  width: 8px;
  height: 0.95em;
  background: var(--color-accent);
  flex: none;
}
.home-section-link {
  font-size: 14px;
  color: var(--color-accent-400);
  text-decoration: none;
  white-space: nowrap;
}
.home-section-link:hover { color: var(--color-accent-300); }

.search-form--inline { margin: 0; flex: 0 1 320px; }
.search-form--inline .search-field { width: 100%; }

/* — anteprime degli strumenti — */
.tool-teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(12px, 1.5vw, 18px);
}
.tool-teaser {
  display: block;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.tool-teaser:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tool-teaser .tool-icon { margin-bottom: 14px; }
.tool-teaser h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  margin: 0 0 7px;
  line-height: 1.3;
}
.tool-teaser p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  /* neutral-500 sul tema chiaro dava 3.9 di contrasto, sotto il minimo leggibile */
  color: var(--color-neutral-400);
}

/* — pastiglie degli argomenti — */
.topic-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 11px;
  border-radius: 999px;
  border: 1px solid var(--cat-border, var(--color-divider));
  background: var(--cat-bg, transparent);
  color: var(--cat-text, var(--color-text));
  text-decoration: none;
  font-size: 14px;
  transition: transform 0.14s ease;
}
.topic-chip:hover { transform: translateY(-1px); }
/* I colori delle categorie nascono chiari, per il fondo scuro: sul tema chiaro
   vanno sostituiti con la stessa tonalità in versione scura, altrimenti la
   pastiglia diventa testo chiaro su fondo chiaro. */
:root[data-theme="light"] .topic-chip { color: var(--cat-text-light, var(--color-text)); }
.topic-chip-icon { display: inline-flex; width: 18px; height: 18px; }
.topic-chip-icon svg { width: 100%; height: 100%; }

/* — i più letti, in riga invece che in colonna — */
.most-read-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 24px;
}
.most-read-row li { display: flex; gap: 11px; align-items: baseline; font-size: 14px; }
.most-read-row a { color: var(--color-neutral-300); text-decoration: none; }
.most-read-row a:hover { color: var(--color-text); }

/* — numeri del sito (solo admin) — */
.stat-row { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px); }
.stat-cell { display: flex; flex-direction: column; gap: 2px; }

/* Colori delle categorie sul tema chiaro.
   I colori sono generati chiari (luminosità 78%) perché nascono per il fondo scuro:
   sul tema chiaro davano ciano pallido su fondo pallido, sotto ogni soglia di
   leggibilità. Qui vengono sostituiti con la stessa tonalità in versione scura.
   L'articolo in evidenza è escluso di proposito: la sua etichetta sta sopra
   un'immagine scura in entrambi i temi, e scurirla la renderebbe invisibile. */
:root[data-theme="light"] .cat-dot:not(.cat-dot--all) {
  background: var(--cat-text-light, var(--color-accent));
}
:root[data-theme="light"] .categories-nav a.cat-link,
:root[data-theme="light"] .categories-nav a.cat-link:hover,
:root[data-theme="light"] .categories-nav a.cat-link.is-active,
:root[data-theme="light"] .category-title,
:root[data-theme="light"] .category-icon,
:root[data-theme="light"] .post-card .cat-badge {
  color: var(--cat-text-light, var(--color-text));
}

/* — copia dei risultati —
   Prima il valore era esso stesso un pulsante: non si capiva che si potesse cliccare
   per copiare, e per giunta il testo dentro un <button> non si riesce a selezionare
   col mouse. Ora il valore è testo normale (selezionabile) e la copia ha un pulsante
   suo, con icona e descrizione. */
.tool-row {
  grid-template-columns: 150px minmax(0, 1fr) auto auto;
}
.tool-row-value {
  justify-self: start;
  font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  font-size: 15px;
  color: var(--color-text);
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  padding: 3px 0;
  user-select: all;   /* un clic solo seleziona tutto il valore */
}

.tool-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-neutral-500);
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.tool-copy:hover {
  color: var(--color-accent-300);
  border-color: var(--color-divider);
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}
.tool-copy:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* Conferma "Copiato" accanto al pulsante, senza spostare la riga */
.tool-copy-esito {
  position: absolute;
  right: calc(100% + 6px);
  font-size: 11px;
  white-space: nowrap;
  color: var(--color-accent-400);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}
.tool-copy.is-copied { color: var(--color-accent-400); }
.tool-copy.is-copied .tool-copy-esito { opacity: 1; }

@media (max-width: 560px) {
  .tool-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .tool-row-label { grid-column: 1 / -1; }
}

/* — scelta della direzione di conversione — */
.tool-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}
.tool-tab {
  border: 0;
  background: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13.5px;
  color: var(--color-neutral-400);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease;
}
.tool-tab:hover { color: var(--color-text); }
.tool-tab.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.tool-hint {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-neutral-500);
  max-width: 68ch;
}

/* — prompt dei comandi CL (il pulsante F4) — */
.cl-f4 {
  margin-left: auto;
  flex: none;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-neutral-500);
  font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.cl-f4:hover, .cl-f4.is-open {
  color: var(--color-accent-300);
  border-color: var(--color-accent-700);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.cl-prompt {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
  border-left: 2px solid var(--color-accent-700);
}
.cl-prompt-title {
  margin: 0 0 10px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}
/* Parametro a sinistra, spiegazione a destra; su schermo stretto vanno in colonna */
.cl-prompt-list {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
  gap: 7px 18px;
  margin: 0;
}
.cl-prompt-list dt {
  font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  font-size: 12.5px;
  color: var(--color-accent-300);
}
.cl-prompt-list dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-neutral-300);
}
.cl-prompt-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-neutral-500);
}

@media (max-width: 520px) {
  .cl-prompt-list { grid-template-columns: 1fr; gap: 2px; }
  .cl-prompt-list dd { margin-bottom: 8px; }
}

/* — aree di testo e tabelle degli strumenti nuovi — */
.tool-textarea {
  font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  font-size: 13.5px;
  line-height: 1.6;
  resize: vertical;
  white-space: pre;
  overflow-x: auto;
}

.tool-table-scroll { overflow-x: auto; margin-top: 16px; }
.tool-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.tool-table th {
  text-align: left;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}
.tool-table td {
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-divider) 55%, transparent);
  color: var(--color-neutral-300);
  white-space: nowrap;
}
.tool-table tr:last-child td { border-bottom: 0; }
.tool-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.tool-table .mono {
  font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  color: var(--color-text);
}
.tool-muted { color: var(--color-neutral-600); font-style: italic; }

/* Nel lettore di record l'esadecimale di un campo lungo occuperebbe tutta la riga e
   spingerebbe fuori schermo il valore decodificato, che è ciò che si vuole leggere.
   Il valore resta compatto, l'esadecimale va a capo. */
.tool-table td.valore { white-space: nowrap; }
.tool-table td.hex {
  white-space: normal;
  word-break: break-all;
  color: var(--color-neutral-500);
  font-size: 12.5px;
  min-width: 14ch;
}

/* ==========================================================================
   GRIGLIA DEGLI STRUMENTI
   Gli strumenti sono indipendenti fra loro: incolonnarli uno sotto l'altro
   sprecava metà schermo e obbligava a scorrere molto per arrivare in fondo.
   Da 1080px in su vanno a due colonne; sotto restano incolonnati, perché ogni
   scheda ha campi e tabelle che sotto i ~500px diventerebbero illeggibili.
   ========================================================================== */
.tools-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  /* Ogni scheda tiene la propria altezza invece di allungarsi fino a quella
     più alta della riga: allineate in alto restano leggibili. */
  align-items: start;
}
.tools-grid .tool-card { margin-bottom: 0; }

@media (min-width: 1080px) {
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Il prontuario CL è un elenco lungo, non un modulo: sta meglio a tutta larghezza */
  .tool-card--wide { grid-column: 1 / -1; }
}

/* L'apertura della pagina resta a misura di lettura anche se il contenitore è largo */
.tools-hero { max-width: 70ch; }

/* ==========================================================================
   PAGINE LEGALI (informativa privacy)
   Testo lungo da leggere: colonna stretta e interlinea generosa, come per gli
   articoli, invece della larghezza piena usata dagli strumenti.
   ========================================================================== */
.legal-page { max-width: 72ch; margin: 0 auto; }

.legal-section .table-scroll {
  overflow-x: auto;
  margin: 14px 0 16px;
}
@media (min-width: 1180px) {
  /* Le tabelle sfondano la colonna del testo di 120px per lato: le celle sono
     paragrafi interi e in 72ch diventerebbero una colonna di parole singole. */
  .legal-section .table-scroll { margin-inline: -120px; }
  .legal-section .table-scroll .legal-table { min-width: 100%; }
}

.legal-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw + 14px, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.legal-updated {
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--color-neutral-500);
}
.legal-intro {
  font-size: clamp(15px, 0.4vw + 14px, 17px);
  line-height: 1.65;
  color: var(--color-neutral-300);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-divider);
  margin: 0 0 8px;
}

.legal-section { margin-top: 34px; }
.legal-section h2 {
  font-family: var(--font-heading);
  font-size: clamp(17px, 0.8vw + 14px, 21px);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.legal-section p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-neutral-300);
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section a { color: var(--color-accent-400); }
.legal-section strong { color: var(--color-text); font-weight: 600; }
.legal-section code {
  font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  font-size: 0.9em;
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  border-radius: 4px;
  padding: 1px 5px;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 12px;
  font-size: 14px;
}
.legal-table th {
  text-align: left;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  padding: 0 14px 8px 0;
  border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}
.legal-table td {
  padding: 11px 16px 11px 0;
  min-width: 12ch;
  border-bottom: 1px solid color-mix(in srgb, var(--color-divider) 55%, transparent);
  color: var(--color-neutral-300);
  line-height: 1.55;
  vertical-align: top;
}
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table td:last-child, .legal-table th:last-child { padding-right: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Strumenti aggiunti dopo il primo gruppo, e gestione della loro visibilità
   ══════════════════════════════════════════════════════════════════════ */

/* Etichetta sugli strumenti non ancora pubblici: la vede solo l'admin */
.tool-private-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #e6bd82;
  background: color-mix(in srgb, #e6bd82 14%, transparent);
  border: 1px solid color-mix(in srgb, #e6bd82 32%, transparent);
  vertical-align: middle;
}

/* Blocchi di testo preformattato prodotti dagli strumenti (SQL, comandi, record) */
.tool-pre {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-bg) 60%, #000);
  border: 1px solid var(--color-divider);
  overflow-x: auto;
}
.tool-pre code {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
  color: var(--color-neutral-200);
}
.tool-output-label {
  margin: 16px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}
.tool-sublabel { margin-top: 10px; }
.tool-checkline { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* Prontuario IBM i Services: esempi SQL */
.svc-example { margin: 0 0 10px; overflow-x: auto; }
.svc-example code {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre;
  color: var(--color-accent-300);
}

/* Messaggi CPF/SQL: la spiegazione sotto la descrizione */
.msg-cause {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-neutral-400);
}
.msg-cause strong { color: var(--color-neutral-300); }

/* Autorizzazioni */
.auth-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin-top: 12px; }
.auth-check { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.auth-check code { font-size: 12.5px; }
.auth-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 10px; }
.auth-cols h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-neutral-500); }
.auth-cols p { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.auth-level { margin: 6px 0 0; font-size: 18px; font-weight: 600; }
.auth-level code { font-size: 18px; color: var(--color-accent-300); }

/* Schedulazione */
.sched-readable { margin: 6px 0 0; font-size: 15px; color: var(--color-neutral-200); }

/* Tabella EBCDIC */
.eb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 5px; margin-top: 14px; }
.eb-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 4px;
  border-radius: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
}
.eb-cell--ctl { opacity: 0.45; }
.eb-hex {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--color-neutral-500);
}
.eb-char { font-size: 17px; line-height: 1.2; color: var(--color-neutral-100); }

/* Convertitore RPG: elenco delle righe da rivedere */
.rpg-review { margin: 8px 0 0; padding-left: 20px; }
.rpg-review li { font-size: 13.5px; line-height: 1.65; color: var(--color-neutral-400); margin-bottom: 4px; }

/* Pagina admin degli strumenti */
.tools-table-name { font-weight: 500; }
.tools-table-id {
  margin-left: 8px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--color-neutral-600);
}
.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.status-published { color: #8fd39a; background: color-mix(in srgb, #8fd39a 14%, transparent); }
.status-private { color: #e6bd82; background: color-mix(in srgb, #e6bd82 14%, transparent); }
.admin-summary { display: flex; gap: 18px; margin: 0 0 16px; font-size: 14px; color: var(--color-neutral-400); }
.admin-note { margin-top: 16px; font-size: 13px; color: var(--color-neutral-500); }
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.admin-sub { margin: 6px 0 0; max-width: 62ch; font-size: 14px; line-height: 1.65; color: var(--color-neutral-400); }

@media (max-width: 640px) {
  .auth-cols { grid-template-columns: 1fr; }
  .admin-head { flex-direction: column; }
  .eb-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Editor: anteprima nei risultati, controllo qualità, indirizzo, prova email
   ══════════════════════════════════════════════════════════════════════ */

.slug-field { display: flex; align-items: center; gap: 0; }
.slug-prefix {
  padding: 0 2px 0 10px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--color-neutral-600);
  white-space: nowrap;
}
.slug-field .input { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Riquadro che imita il risultato di ricerca, per giudicare titolo ed estratto a colpo d'occhio */
.seo-preview {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
}
.seo-preview-url { margin: 0; font-size: 12px; color: var(--color-neutral-500); }
.seo-preview-title {
  margin: 3px 0 2px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-accent-300);
  overflow-wrap: anywhere;
}
.seo-preview-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-neutral-400);
  overflow-wrap: anywhere;
}

.quality-list { margin: 0; padding: 0; list-style: none; }
.quality-list li {
  position: relative;
  padding: 4px 0 4px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-neutral-400);
}
.quality-list li::before { position: absolute; left: 0; top: 4px; }
.quality-errore::before { content: "●"; color: #e88b8b; }
.quality-attenzione::before { content: "●"; color: #e6bd82; }
.quality-nota::before { content: "○"; color: var(--color-neutral-600); }
.quality-ok::before { content: "●"; color: #8fd39a; }

.test-newsletter { display: flex; gap: 8px; }
.test-newsletter .input { flex: 1; min-width: 0; }

/* Commenti in attesa di approvazione nel pannello */
.row-pending { background: color-mix(in srgb, #e6bd82 7%, transparent); }
.admin-section-title {
  margin: 28px 0 12px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-neutral-500);
}

/* ==========================================================================
   GUIDE
   ==========================================================================
   Le guide non sono articoli: non hanno una data che conta, hanno capitoli e una
   revisione. La grafica lo dice — niente copertine né griglia a schede, un elenco
   verticale che si legge come un indice. */
.guides-hero { margin-bottom: clamp(28px, 4vw, 40px); max-width: 70ch; }

.guide-list { display: flex; flex-direction: column; gap: 14px; }

.guide-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-accent-600);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.5vw, 26px);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.guide-card:hover {
  border-left-color: var(--color-accent-400);
  transform: translateX(2px);
}
.guide-card-link { display: block; text-decoration: none; color: inherit; }
.guide-card-title {
  font-family: var(--font-heading);
  font-size: clamp(19px, 1.2vw + 15px, 24px);
  line-height: 1.25;
  margin: 0 0 8px;
}
.guide-card:hover .guide-card-title { color: var(--color-accent-300); }
.guide-card-excerpt {
  margin: 0;
  color: var(--color-neutral-400);
  line-height: 1.6;
  max-width: 68ch;
}
.guide-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 14px 0 0;
}

/* Etichetta neutra per revisione, rilascio e numero di capitoli */
.guide-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-divider);
  color: var(--color-neutral-400);
  white-space: nowrap;
}

/* Riga "rivista il … · verificata su …" in cima a guide e capitoli */
.post-freshness {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 20px;
}

/* Indice dei capitoli, dentro la pagina della guida */
.guide-index { margin: clamp(32px, 5vw, 48px) 0 0; }
.guide-index h2 {
  font-family: var(--font-heading);
  font-size: 20px;
  margin: 0 0 16px;
}
.guide-chapters {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: capitolo;
}
.guide-chapter {
  counter-increment: capitolo;
  display: flex; align-items: baseline; gap: 10px;
  border-top: 1px solid var(--color-divider);
}
.guide-chapter:last-child { border-bottom: 1px solid var(--color-divider); }
.guide-chapter > a {
  flex: 1;
  display: grid;
  gap: 3px;
  padding: 14px 0 14px 34px;
  position: relative;
  text-decoration: none;
  color: inherit;
}
/* Il numero viene dal contatore, non dal markup: rinumerare i capitoli non richiede
   di toccare il testo. */
.guide-chapter > a::before {
  content: counter(capitolo) ".";
  position: absolute; left: 0; top: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-500);
}
.guide-chapter > a:hover .guide-chapter-title { color: var(--color-accent-300); }
.guide-chapter-title { font-weight: 500; }
.guide-chapter-excerpt {
  font-size: 14px;
  color: var(--color-neutral-500);
  line-height: 1.5;
}

/* "Fa parte della guida X · Capitolo 3 di 8", sopra al titolo del capitolo */
.chapter-breadcrumb {
  font-size: 14px;
  color: var(--color-neutral-500);
  margin: 0 0 8px;
}
.chapter-breadcrumb a { color: var(--color-accent-400); }

/* Precedente / successivo, in fondo al capitolo */
.chapter-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: clamp(32px, 5vw, 44px) 0 12px;
}
.chapter-nav-link {
  display: grid; gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}
.chapter-nav-link:hover { border-color: var(--color-accent-600); }
.chapter-nav-next { text-align: right; }
.chapter-nav-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}
.chapter-nav-title { font-weight: 500; line-height: 1.35; }
.chapter-back { margin: 0 0 8px; font-size: 14px; }

@media (max-width: 600px) {
  .chapter-nav { grid-template-columns: 1fr; }
  .chapter-nav-next { text-align: left; }
}

/* Capitolo nell'elenco del pannello: rientrato sotto la sua guida */
.admin-cell-chapter {
  padding-left: 28px !important;
  position: relative;
}
.admin-cell-chapter::before {
  content: "└";
  position: absolute;
  left: 10px;
  color: var(--color-neutral-600);
}

/* ==========================================================================
   STRUMENTI DENTRO GLI ARTICOLI
   ==========================================================================
   Lo strumento incorporato è lo stesso della pagina /strumenti, ma qui vive dentro
   una colonna di testo: esce dai margini per respirare, senza sfondare la pagina. */
.tool-embed {
  margin: clamp(28px, 4vw, 40px) 0;
}
.tool-embed .tool-card {
  /* Nel testo l'ombra e il bordo pieno pesano troppo: basta l'accento a sinistra
     per dire "questa è una cosa con cui si interagisce, non da leggere". */
  border-left: 3px solid var(--color-accent-600);
}
.tool-embed .tool-card-desc { margin-bottom: 0; }

/* Riferimenti riconosciuti nel testo (CPF9801, WRKACTJOB, QSYS2.ACTIVE_JOB_INFO).
   Sottolineatura tratteggiata invece del colore pieno: sono aiuti, non il filo del
   discorso, e una pagina piena di link accesi diventa illeggibile. */
.auto-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.auto-link:hover {
  color: var(--color-accent-300);
  border-bottom-style: solid;
}
code .auto-link { border-bottom-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }

/* Avviso di manutenzione nel pannello: compare solo quando c'è qualcosa da fare */
.admin-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, #e6bd82 40%, transparent);
  border-left: 3px solid #e6bd82;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, #e6bd82 7%, transparent);
}
.admin-notice > div { flex: 1; min-width: 260px; }
.admin-notice p { margin: 6px 0 0; font-size: 14px; color: var(--color-neutral-400); }
.admin-notice-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  display: grid;
  gap: 4px;
}
.titolo-prima { color: var(--color-neutral-500); text-decoration: line-through; }
.titolo-dopo { color: var(--color-text); }

/* ══════════════════════════════════════════════════════════════════════════
   Anteprima schematica degli strumenti
   ══════════════════════════════════════════════════════════════════════════
   "1260727 → 2026-07-27": due valori veri dicono cosa fa lo strumento più in
   fretta di due righe di testo. Monospazio perché sono dati, non parole, e
   incolonnati come li mostrerebbe il sistema. */
.tool-schema {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}
.tool-schema-da,
.tool-schema-a {
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--color-divider);
  white-space: nowrap;
}
.tool-schema-da { color: var(--color-neutral-400); }
/* Il risultato è la parte che interessa: prende il colore del sistema */
.tool-schema-a {
  color: var(--color-accent-300);
  border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.tool-schema-freccia { color: var(--color-neutral-600); flex: none; }

/* Nelle schede della home lo schema è l'ultima riga: si stacca dal testo sopra */
.tool-teaser .tool-schema { margin-top: auto; padding-top: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════════════
   Prima l'intestazione si affidava solo a flex-wrap: logo, quattro voci di
   navigazione, tema, lingua e "Accedi" andavano a capo dove capitava, e su un
   telefono la testata occupava mezzo schermo prima di arrivare al contenuto.
   Qui la riga viene divisa di proposito: sopra il nome del sito e i comandi,
   sotto la navigazione su una fascia sua.

   Niente menu a panino: con quattro voci un pannello a scomparsa aggiunge un
   tocco e nasconde le sezioni, e le sezioni sono il modo in cui questo sito si
   spiega. Se non ci stanno, la fascia scorre di lato. */
@media (max-width: 760px) {
  .site-header { padding-top: 16px; }

  .site-header-inner,
  .site-header-inner:has(.main-nav) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 10px;
    padding-bottom: 12px;
    align-items: center;
  }

  /* Dimensione fissa invece che legata alla larghezza della finestra: sui telefoni
     stretti il nome cresceva quanto bastava a spingere fuori i comandi a destra. */
  .logo {
    grid-row: 1; grid-column: 1;
    margin-right: 0;
    font-size: 18px;
    min-width: 0;
  }
  .auth-nav { grid-row: 1; grid-column: 2; margin-left: 0; gap: 10px; flex: none; }

  .main-nav {
    grid-row: 2;
    grid-column: 1 / -1;
    /* Scorrimento laterale invece di andare a capo: la navigazione resta alta
       una riga sola, qualunque cosa ci si aggiunga in futuro. */
    overflow-x: auto;
    scrollbar-width: none;
    gap: 20px;
    padding-bottom: 2px;
    /* Il bordo dice dove finisce la testata, ora che non c'è più la sfumatura lunga */
    border-top: 1px solid var(--color-divider);
    padding-top: 10px;
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { padding: 6px 0; font-size: 15px; }

  /* La sfumatura sotto l'intestazione era pensata per una testata alta: su un
     telefono coprirebbe il primo paragrafo. */
  .site-header::after { height: 40px; bottom: -40px; }

  .lang-switch { margin-right: 0; }

  /* Aree di tocco: sotto i 44px il dito sbaglia. Vale per i comandi piccoli
     dell'intestazione, che sono i più usati e i più stretti. */
  .theme-toggle,
  .lang-switch { min-width: 40px; height: 40px; }
  .auth-nav .btn { padding: 9px 14px; }
}

@media (max-width: 640px) {
  /* 15px va bene su un monitor a mezzo metro, non su un telefono in mano.
     Il testo degli articoli è la ragione per cui la gente arriva qui. */
  body { font-size: 16px; line-height: 1.6; }

  h1 { font-size: clamp(27px, 7vw, 34px); }
  h2 { font-size: clamp(22px, 5.5vw, 27px); }
  h3 { font-size: 20px; }

  /* Blocchi di codice: su IBM i le righe sono lunghe per natura (tracciati,
     comandi CL con parametri). Devono scorrere loro, non tutta la pagina. */
  .post-content pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .post-content pre code { white-space: pre; }

  /* Elenco dei capitoli e navigazione fra capitoli: una colonna sola */
  .guide-card-meta { gap: 6px; }
  .tool-schema { font-size: 11.5px; }

  /* Bottoni a tutta larghezza dove sono l'azione principale della schermata */
  .comment-form .btn,
  .newsletter-form .btn { width: 100%; }
}

/* Chi punta con il dito e non col mouse: gli stati :hover restano attaccati dopo
   il tocco e sembrano un elemento selezionato che non si deseleziona più. */
@media (hover: none) {
  .post-card:hover { transform: none; }
  .guide-card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════════════════════

   IMPIANTO 2026

   Il sito era composto per sezioni impilate, tutte dello stesso peso, con
   un'apertura che mostrava la figura di un terminale. Corretto e dimenticabile.

   Qui l'impianto cambia idea su tre cose:

   1. L'apertura non racconta gli strumenti, ne fa funzionare uno. Chi arriva
      converte una data prima di aver scorso.
   2. La home non è una pila ma una griglia composta, dove la dimensione della
      tessera è il giudizio su cosa conta.
   3. La scrittura diventa grande davvero. Su un sito tecnico il titolo non è
      decorazione: è l'unica cosa che si legge prima di decidere se restare.

   ══════════════════════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Transizioni fra pagine ────────────────────────────────────────────────────
   Il sito è generato dal server, pagina per pagina, e deve restare così: è il
   motivo per cui funziona senza JavaScript ed è indicizzabile. Questa riga gli dà
   comunque il passaggio morbido delle applicazioni a pagina singola, senza
   scriverne una. Dove il browser non la conosce, semplicemente non succede
   niente: la pagina cambia di netto come ha sempre fatto. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: dissolvi-via 0.18s ease both; }
::view-transition-new(root) { animation: dissolvi-dentro 0.28s ease both; }
@keyframes dissolvi-via { to { opacity: 0; } }
@keyframes dissolvi-dentro { from { opacity: 0; transform: translateY(6px); } }

/* L'impianto fisso del pannello resta fermo durante il passaggio fra le schermate.
   Senza questo, colonna, testata e striscia dei tasti fanno parte dell'istantanea
   della radice e si prendono anche loro la dissolvenza e lo scostamento di sei
   pixel: a ogni clic sulla colonna la si vedeva sussultare per un istante.

   Dare un nome a un elemento lo tira fuori dal gruppo della radice e lo fa passare
   dalla sua posizione vecchia alla nuova. Qui le due coincidono, quindi il passaggio
   non si vede: la colonna sta ferma e cambia solo il contenuto, che è il modo in cui
   si comporta un'applicazione vera. */
body.theme-admin .rail { view-transition-name: pannello-colonna; }
body.theme-admin .site-header { view-transition-name: pannello-testata; }
body.theme-admin .tasti { view-transition-name: pannello-tasti; }

/* ── Trama del fondo ───────────────────────────────────────────────────────────
   Righe orizzontali quasi invisibili, come la scansione di un tubo catodico, e
   una griglia di punti. Non si notano guardando: si notano se si tolgono, perché
   senza il fondo torna una tinta piatta. Restano dietro a tutto e non
   intercettano il mouse. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg,
      color-mix(in srgb, var(--color-accent) 3.5%, transparent) 0 1px,
      transparent 1px 4px),
    radial-gradient(circle at center,
      color-mix(in srgb, var(--color-text) 7%, transparent) 0.7px, transparent 0.7px);
  background-size: auto, 26px 26px;
  opacity: 0.55;
}
:root[data-theme="light"] body::before { opacity: 0.35; }
/* I contenuti stanno sopra la trama. L'intestazione NON va toccata qui: è
   position:sticky con z-index 40, e riscriverle la posizione a relative la
   staccherebbe dall'alto della finestra facendola scorrere via con la pagina.
   Le basta stare sopra, e lo è già. */
main, .site-footer { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════════════════════
   APERTURA
   ══════════════════════════════════════════════════════════════════════════════ */
.apertura {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  /* In alto e non centrate: il convertitore, una volta acceso, produce tredici righe
     di formati, e centrando le due colonne il titolo scivolava sotto la piega. Il
     titolo è la prima cosa da leggere, quindi parte da dove parte la pagina. */
  align-items: start;
  padding: clamp(28px, 6vw, 76px) 0 clamp(32px, 5vw, 60px);
}

.apertura-etichetta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(18px, 2.5vw, 28px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}
.apertura-sep { color: var(--color-neutral-700); }
.apertura-lingua { color: var(--color-neutral-500); }

/* Il titolo grande davvero. -0.045em di crenatura: alle dimensioni display le
   lettere di Plex Sans stanno larghe, e senza stringerle il titolo si sfilaccia. */
.apertura-titolo {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-size: clamp(40px, 7.2vw, 100px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-weight: 600;
  text-wrap: balance;
  /* A questa dimensione una parola lunga è più larga della colonna e finisce sopra il
     riquadro a fianco. Con queste due righe il titolo si adatta invece di sfondare,
     qualunque cosa ci si scriva dentro in futuro. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.apertura-occhiello {
  margin: 0 0 clamp(24px, 3vw, 34px);
  max-width: 46ch;
  font-size: clamp(16px, 0.5vw + 15px, 19px);
  line-height: 1.55;
  color: var(--color-neutral-400);
  text-wrap: pretty;
}

.apertura-azioni { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Lo strumento vivo nell'apertura ──────────────────────────────────────────
   È il partial vero del convertitore, non una copia: quindi qui si toglie solo
   ciò che nell'apertura è di troppo — l'intestazione della scheda (il titolo lo
   dà già la colonna a fianco) e il riquadro di approfondimento, che è una lettura
   e non un'azione. Tutto il resto, compreso il funzionamento, è quello. */
.apertura-strumento {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
  backdrop-filter: blur(8px);
  padding: clamp(18px, 2.2vw, 26px);
}
.apertura-strumento-titolo {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-400);
}
/* Pallino che pulsa: dice "questo è acceso", che è esattamente il punto. */
.pallino-vivo {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 70%, transparent);
  animation: battito 2.4s ease-out infinite;
  flex: none;
}
@keyframes battito {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 9px transparent; }
}

.apertura-strumento .tool-card {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.apertura-strumento .tool-card-head,
.apertura-strumento .tool-explain { display: none; }

/* Tredici formati sono tanti per un'apertura, ma nasconderne qualcuno sarebbe una
   dimostrazione a metà. Restano tutti e scorrono qui dentro: l'altezza dell'apertura
   non dipende da quante righe produce il calcolo. La sfumatura in basso dice che
   sotto continua, senza dover mostrare una barra di scorrimento. */
.apertura-strumento .tool-output {
  margin-top: 14px;
  max-height: 252px;
  overflow-y: auto;
  scrollbar-width: thin;
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
}
.apertura-strumento .tool-output:empty { display: none; }

.apertura-strumento-nota {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-divider);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-neutral-500);
}

/* ══════════════════════════════════════════════════════════════════════════════
   FASCIA DEI COMANDI
   ══════════════════════════════════════════════════════════════════════════════
   Scorre lentamente sotto l'apertura. Il contenuto viene dal prontuario vero, non
   è riempitivo: in tre secondi dice di che sito si tratta meglio di un paragrafo. */
.fascia {
  overflow: hidden;
  border-block: 1px solid var(--color-divider);
  padding: 13px 0;
  margin-bottom: clamp(36px, 6vw, 72px);
  /* Sfuma ai due lati invece di tagliare di netto: il taglio netto fa capire che
     è un riquadro che scorre, la sfumatura fa capire che continua. */
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.fascia-scorre {
  display: flex;
  width: max-content;
  animation: scorri 46s linear infinite;
}
.fascia-gruppo { display: flex; gap: 44px; padding-right: 44px; }
.fascia-voce {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  white-space: nowrap;
}
.fascia-voce b { color: var(--color-accent-300); font-weight: 500; }
.fascia-voce i { color: var(--color-neutral-600); font-style: normal; }
/* Due copie identiche scorrono in fila: quando la prima è uscita del tutto,
   l'animazione riparte da zero e la seconda si trova esattamente dov'era la
   prima. Il salto non si vede. */
@keyframes scorri { to { transform: translateX(-50%); } }

.fascia-scorre:hover { animation-play-state: paused; }

/* ══════════════════════════════════════════════════════════════════════════════
   GRIGLIA DELLA HOME
   ══════════════════════════════════════════════════════════════════════════════ */
.griglia {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  margin-bottom: clamp(44px, 7vw, 88px);
}

/* Tre righe da sei colonne. Gli strumenti ne prendono quattro, tutto il resto due:
   la dimensione è il giudizio su cosa conta, non un vezzo di composizione. */
.tessera--strumenti   { grid-column: span 4; }
.tessera--guide       { grid-column: span 2; }
.tessera--ricette     { grid-column: span 2; }
.tessera--riferimento { grid-column: span 2; }
.tessera--lavoro      { grid-column: span 2; }
.tessera--rilasci     { grid-column: span 2; }
.tessera--software    { grid-column: span 2; }
.tessera--rubriche    { grid-column: span 2; }
.tessera--argomenti   { grid-column: span 2; }
.tessera--letti       { grid-column: span 2; }
/* Senza guide pubblicate la tessera non c'è: gli strumenti si prendono la riga. */
.griglia:not(:has(.tessera--guide)) .tessera--strumenti { grid-column: span 6; }

.tessera {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  /* Le tessere cambiano larghezza secondo la griglia, non secondo la finestra:
     è la larghezza della tessera che deve decidere come si dispone dentro. */
  container-type: inline-size;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
a.tessera:hover {
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  transform: translateY(-2px);
}
/* Filo di luce sul bordo alto quando ci si passa sopra: dice che è viva senza
   ricorrere all'ombra, che su fondo scuro non si vede. */
a.tessera::after {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-accent), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}
a.tessera:hover::after { opacity: 1; }

.tessera-numero {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-neutral-600);
}
.tessera-titolo {
  margin: 0;
  font-size: clamp(21px, 1.6vw + 14px, 32px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.tessera-titolo--piccolo { font-size: clamp(16px, 0.6vw + 13px, 19px); letter-spacing: -0.01em; }
.tessera-testo {
  margin: 0;
  max-width: 52ch;
  color: var(--color-neutral-400);
  line-height: 1.55;
}
.tessera-vai {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-accent-300);
}

.tessera-schemi { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.tessera-schemi .tool-schema { margin: 0; }
/* Sotto una certa larghezza della tessera gli schemi con la freccia non ci stanno
   in riga: si spezzano e il risultato va sotto il valore di partenza. */
@container (max-width: 420px) {
  .tessera-schemi .tool-schema { font-size: 11px; gap: 5px; }
}

.tessera-elenco {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
  font-size: 14px;
  color: var(--color-neutral-300);
}
.tessera-elenco li {
  padding-left: 16px;
  position: relative;
  line-height: 1.4;
}
.tessera-elenco li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 6px; height: 6px;
  background: var(--color-accent-600);
}

.classifica { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 11px; }
.classifica li { display: flex; align-items: baseline; gap: 12px; }
.classifica-posto {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-neutral-600);
  flex: none;
}
.classifica a { color: var(--color-neutral-200); line-height: 1.35; }
.classifica a:hover { color: var(--color-accent-300); }

.tessera--argomenti .topic-chips { margin-top: 2px; }

/* ── Comparsa allo scorrimento, senza JavaScript ──────────────────────────────
   Il sito aveva già un effetto di comparsa, ma gestito in JavaScript: se lo
   script non parte le tessere restano invisibili per sempre. Qui lo fa il
   browser, legato alla posizione dell'elemento nella finestra. Dove non è
   supportato l'elemento è semplicemente già visibile, che è il caso giusto. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tessera, .apertura-strumento {
      animation: sali-in-vista linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
  }
}
@keyframes sali-in-vista {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Chi ha chiesto meno movimento: la fascia si ferma e il pallino smette di battere */
@media (prefers-reduced-motion: reduce) {
  .fascia-scorre { animation: none; }
  .pallino-vivo { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   GRIGLIA E APERTURA SU SCHERMI STRETTI
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .apertura { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tessera { grid-column: span 6 !important; }
}

@media (max-width: 640px) {
  .apertura { padding-top: 12px; }
  .apertura-titolo { font-size: clamp(34px, 11vw, 52px); line-height: 0.98; }
  .griglia { gap: 10px; }
  .fascia { padding: 10px 0; }
  .fascia-gruppo { gap: 30px; padding-right: 30px; }
}

/* Intestazione di famiglia nell'elenco strumenti del pannello */
.tools-table-famiglia td {
  padding-top: 22px !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  border-bottom: 1px solid var(--color-divider);
}

/* ══════════════════════════════════════════════════════════════════════════
   RICETTARIO
   ══════════════════════════════════════════════════════════════════════════
   Le ricette sono corte e numerose: l'elenco deve farne stare tante sullo
   schermo e far riconoscere la propria a colpo d'occhio. Niente copertine,
   niente date: chi cerca "come mando una mail da CL" guarda i titoli. */
.ricette-barra {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ricette-barra .search-field { flex: 1; min-width: 240px; }
.ricette-conteggio {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-neutral-500);
}

.ricette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Il reticolo viene da un contorno di un pixel su ogni cella, che negli spazi da un
   pixel fra le celle si sovrappone a quello della vicina. Prima il reticolo era lo
   sfondo del contenitore che traspariva: funzionava, ma quando l'ultima riga restava
   incompleta la cella mancante si vedeva come un rettangolo più chiaro. */
.ricetta {
  box-shadow: 0 0 0 1px var(--color-divider);
  background: var(--color-bg);
  padding: 18px 20px;
  transition: background 0.15s ease;
}
.ricetta:hover { background: var(--color-surface); }
.ricetta-titolo {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.ricetta-titolo a { color: var(--color-text); }
.ricetta:hover .ricetta-titolo a { color: var(--color-accent-300); }
.ricetta-testo {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-neutral-500);
}
.ricetta-tag {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 0;
}
.ricetta-tag span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--color-neutral-600);
}
.ricetta-tag span::before { content: '#'; }

/* ══════════════════════════════════════════════════════════════════════════
   BACHECA LAVORO
   ══════════════════════════════════════════════════════════════════════════ */
.annunci { display: grid; gap: 14px; margin-bottom: clamp(36px, 5vw, 56px); }

.annuncio {
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-accent-600);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  padding: clamp(18px, 2.4vw, 26px);
}
.annuncio-titolo {
  margin: 0 0 4px;
  font-size: clamp(18px, 1.1vw + 14px, 23px);
  letter-spacing: -0.02em;
}
.annuncio-azienda {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-neutral-400);
}
.annuncio-sep { opacity: 0.5; }
.annuncio-etichette { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; }
.annuncio-testo {
  margin: 14px 0 0;
  line-height: 1.6;
  color: var(--color-neutral-300);
  max-width: 72ch;
  white-space: pre-line; /* gli a capo scritti da chi manda l'annuncio contano */
}
.annuncio-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }

/* Il modulo d'invio: chiuso di suo, perché chi arriva qui quasi sempre cerca lavoro
   e non lo offre. Chi lo offre lo trova comunque. */
.annuncio-invio {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 18px clamp(18px, 2.4vw, 26px);
}
.annuncio-invio > summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}
.annuncio-form { margin-top: 18px; display: grid; gap: 14px; max-width: 780px; }
.annuncio-form-riga { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.annuncio-form .field { margin: 0; }
.annuncio-form textarea { resize: vertical; font-family: inherit; }

.annuncio-admin-testo {
  font-size: 13px;
  color: var(--color-neutral-400);
  white-space: pre-line;
  padding-top: 0 !important;
}

@media (max-width: 640px) {
  .annuncio-form-riga { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   RUBRICHE
   ══════════════════════════════════════════════════════════════════════════
   Elenco cronologico ma sobrio: qui la data conta (un notiziario è fatto di
   uscite), quindi sta in colonna a sinistra e fa da spina dorsale. */
.rubrica-elenco { display: grid; gap: 2px; margin-bottom: clamp(36px, 5vw, 56px); }

.rubrica-voce {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--color-divider);
}
.rubrica-voce:last-child { border-bottom: 1px solid var(--color-divider); }
.rubrica-data {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-neutral-600);
  padding-top: 3px;
  text-transform: lowercase;
}
.rubrica-titolo {
  margin: 0 0 5px;
  font-size: clamp(17px, 0.8vw + 14px, 21px);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.rubrica-titolo a { color: var(--color-text); }
.rubrica-titolo a:hover { color: var(--color-accent-300); }
.rubrica-testo { margin: 0; color: var(--color-neutral-500); line-height: 1.55; max-width: 70ch; }

.rubrica-altre {
  display: grid;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--color-divider);
}
.rubrica-altra {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.rubrica-altra:hover { border-color: var(--color-accent-600); }
.rubrica-altra span { font-size: 13px; color: var(--color-neutral-500); }

@media (max-width: 560px) {
  .rubrica-voce { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* Elenco delle rubriche nella tessera della home */
.tessera-rubriche { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.tessera-rubriche a {
  display: grid;
  gap: 1px;
  padding: 11px 13px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.tessera-rubriche a:hover { border-color: var(--color-accent-600); }
.tessera-rubriche strong { font-weight: 500; line-height: 1.3; }
.tessera-rubriche span { font-size: 12.5px; color: var(--color-neutral-500); }

/* ══════════════════════════════════════════════════════════════════════════
   GARANZIA SUI DATI + LETTORE DI JOB LOG
   ══════════════════════════════════════════════════════════════════════════
   Il riquadro sta accanto al campo, non in fondo alla pagina: è lì che qualcuno
   si ferma a chiedersi se incollare un log di produzione sia una buona idea. */
.garanzia {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}
.garanzia-testa {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-300);
}
.garanzia-elenco {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 6px;
  font-size: 13.5px; line-height: 1.5;
  color: var(--color-neutral-300);
  max-width: 80ch;
}
.garanzia-elenco li { padding-left: 15px; position: relative; }
.garanzia-elenco li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; background: var(--color-accent-500);
}
.garanzia-elenco code {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--color-bg); border-radius: 3px; padding: 1px 5px;
}
.garanzia-scarica {
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
}
.garanzia-scarica span { color: var(--color-neutral-500); }

.tool-textarea { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; resize: vertical; }

/* Un messaggio del job log. Quello che ha fermato il job si stacca dagli altri:
   è l'unica cosa che si cercava aprendo il log. */
.jl-msg {
  padding: 12px 14px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}
.jl-msg--causa {
  border-color: color-mix(in srgb, var(--color-amber) 55%, transparent);
  background: color-mix(in srgb, var(--color-amber) 7%, transparent);
}
.jl-msg-testa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 7px;
  font-family: var(--font-mono); font-size: 12px;
}
.jl-msg-testa code { font-size: 13px; color: var(--color-text); font-weight: 500; }
.jl-tipo {
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--color-divider);
  color: var(--color-neutral-400);
  text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em;
}
.jl-tipo--escape { color: var(--color-amber); border-color: color-mix(in srgb, var(--color-amber) 45%, transparent); }
.jl-grav, .jl-riga { color: var(--color-neutral-600); }
.jl-riga { margin-left: auto; }
.jl-msg-spiega { margin: 0 0 5px; color: var(--color-accent-300); line-height: 1.45; }
.jl-msg-orig {
  margin: 0 0 5px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  color: var(--color-neutral-400);
}
.jl-msg-causa { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-neutral-300); }
.jl-msg-ignoto { margin: 0; font-size: 13px; color: var(--color-neutral-600); }

/* ══════════════════════════════════════════════════════════════════════════
   RILASCI: cronologia, fine supporto, cosa si è rotto
   ══════════════════════════════════════════════════════════════════════════ */
.fs-esito {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
}
/* Fuori supporto è un'informazione su cui si decidono spese: si vede. */
.fs-esito--ko {
  color: #f0a0a0;
  border-color: color-mix(in srgb, #e88b8b 45%, transparent);
  background: color-mix(in srgb, #e88b8b 8%, transparent);
}
.fs-esito--ok { color: var(--color-accent-300); border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); }
.fs-esito--attesa { color: var(--color-amber); border-color: color-mix(in srgb, var(--color-amber) 45%, transparent); }

.fs-verso { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.fs-verso > li { padding: 11px 14px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.fs-verso strong { font-family: var(--font-mono); color: var(--color-accent-300); }
.fs-vincoli { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--color-neutral-400); line-height: 1.5; }
.fs-verso-niente, .fs-nota { margin: 6px 0 0; font-size: 13.5px; color: var(--color-neutral-500); line-height: 1.5; }

.rilasci-fonte {
  margin: 16px 0 0; padding-top: 12px;
  border-top: 1px solid var(--color-divider);
  font-size: 12.5px; color: var(--color-neutral-500);
}

.rilasci { display: grid; gap: 12px; margin-bottom: clamp(36px, 5vw, 56px); }

.rilascio {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 22px;
  padding: 18px 20px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
/* Il rilascio corrente si stacca; quelli morti sbiadiscono senza sparire */
.rilascio--corrente { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.rilascio--fuori-supporto .rilascio-versione { color: var(--color-neutral-500); }

.rilascio-versione {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: clamp(19px, 1vw + 15px, 24px);
  letter-spacing: -0.01em;
}
.rilascio-date { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--color-neutral-600); line-height: 1.7; }
.rilascio-sep { opacity: 0.6; }

.rilascio-etichetta {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-600);
}
.rilascio-etichetta--rottura { margin-top: 16px; color: var(--color-amber); }
.rilascio-elenco { margin: 0; padding-left: 17px; line-height: 1.55; color: var(--color-neutral-300); max-width: 78ch; }
.rilascio-elenco li { margin-bottom: 4px; }
.rilascio-elenco--rottura li::marker { color: var(--color-amber); }

@media (max-width: 700px) {
  .rilascio { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   IL SISTEMA SI RACCONTA
   ══════════════════════════════════════════════════════════════════════════ */
.rp-passo { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; margin-bottom: 18px; }
.rp-passo-numero {
  margin: 0; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
  font-family: var(--font-mono); font-size: 13px; color: var(--color-accent-300);
}
.rp-passo-titolo { margin: 4px 0 4px; font-weight: 500; }
.rp-passo-testo { margin: 0 0 12px; color: var(--color-neutral-400); line-height: 1.55; max-width: 76ch; }

.rp-sistema { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 16px; font-family: var(--font-mono); font-size: 12.5px; color: var(--color-neutral-400); }
.rp-sistema b { color: var(--color-neutral-600); font-weight: 400; margin-right: 5px; }
.rp-pulito { margin: 0; padding: 14px 16px; border-radius: var(--radius-md); color: var(--color-accent-300); border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent); }

.rp-rilievo { padding: 14px 16px; border: 1px solid var(--color-divider); border-left-width: 3px; border-radius: var(--radius-md); margin-bottom: 10px; }
.rp-rilievo--critico { border-left-color: #e88b8b; }
.rp-rilievo--attenzione { border-left-color: var(--color-amber); }
.rp-rilievo--nota { border-left-color: var(--color-neutral-600); }

.rp-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.rp-grav { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.rp-rilievo--critico .rp-grav { color: #f0a0a0; }
.rp-rilievo--attenzione .rp-grav { color: var(--color-amber); }
.rp-rilievo--nota .rp-grav { color: var(--color-neutral-500); }
.rp-testa strong { font-size: 15px; }
.rp-testa code { font-family: var(--font-mono); font-size: 12px; color: var(--color-neutral-400); margin-left: auto; }

.rp-elenco { margin: 0 0 8px; font-family: var(--font-mono); font-size: 12px; color: var(--color-neutral-400); line-height: 1.6; }
.rp-et { margin: 10px 0 3px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); }
.rp-dice, .rp-fare { margin: 0; line-height: 1.55; color: var(--color-neutral-300); max-width: 80ch; }
.rp-dice { color: var(--color-neutral-200); }

/* ══════════════════════════════════════════════════════════════════════════
   SOFTWARE SEGNALATO
   ══════════════════════════════════════════════════════════════════════════ */
.sw-elenco { display: grid; gap: 12px; margin-bottom: clamp(36px, 5vw, 56px); }

.sw {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.4vw, 26px);
  background: color-mix(in srgb, var(--color-surface) 45%, transparent);
}
/* Le voci in evidenza si distinguono con un accento sul bordo, non con un fondo
   diverso: il fondo pieno le farebbe sembrare inserzioni a pagamento. */
.sw--evidenza { border-left: 3px solid var(--color-accent); }

.sw-nome { margin: 0 0 2px; font-size: clamp(18px, 1vw + 14px, 22px); letter-spacing: -0.015em; }
.sw-nome a { color: var(--color-text); }
.sw-nome a:hover { color: var(--color-accent-300); }
.sw-vendor { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--color-neutral-500); }
.sw-etichette { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; }
.sw-riassunto { margin: 12px 0 0; line-height: 1.55; color: var(--color-neutral-300); max-width: 76ch; }

.sw-nota-et {
  margin: 14px 0 3px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-600);
}
.sw-nota { margin: 0; line-height: 1.55; color: var(--color-neutral-400); max-width: 76ch; white-space: pre-line; }

/* La dichiarazione deve essere leggibile, non nascosta: è il motivo per cui esiste. */
.sw-trasparenza {
  margin: 14px 0 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--color-amber) 40%, transparent);
  font-size: 12.5px;
  color: var(--color-amber);
}
.sw-azioni { margin: 16px 0 0; }

/* ══════════════════════════════════════════════════════════════════════════
   IMPIANTO DEL PANNELLO
   ══════════════════════════════════════════════════════════════════════════
   Il pannello si usa come un'applicazione, non come un sito: colonna fissa a
   sinistra, contenuto che scorre a destra, e lo sguardo che torna sempre nello
   stesso punto invece di rincorrere una barra che si sposta.

   Sopra ci sta un modo di lavorare preso in prestito dalla piattaforma di cui
   questo sito parla: si scrive dove si vuole andare invece di cercarlo, si
   scrive un numero accanto a una riga per agire su quella riga, e i tasti
   disponibili sono sempre scritti in fondo allo schermo. È il modo in cui
   funzionano le schermate WRKxxx di IBM i, e questo pubblico ce l'ha nelle
   dita da vent'anni.

   Resta un'aggiunta, mai un obbligo: tutto si fa anche cliccando, e chi non
   sa niente di 5250 non si accorge che ci sia. */
.rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 216px;
  display: flex;
  flex-direction: column;
  padding: 18px 0 12px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-divider);
  z-index: 60;
  overflow-y: auto;
}
.rail-marchio {
  display: flex; align-items: center;
  padding: 0 18px 16px;
  font-family: var(--font-heading);
  font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
}

/* Il richiamo alla riga comandi sta in cima perché è il modo previsto per muoversi:
   metterlo in fondo lo renderebbe una curiosità invece che lo strumento principale. */
.rail-comando {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin: 0 12px 16px;
  padding: 7px 10px;
  font: inherit; font-size: 12.5px;
  color: var(--color-neutral-500);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
}
.rail-comando:hover { border-color: var(--color-accent-700); color: var(--color-neutral-300); }
.rail-comando kbd, .tasti kbd, .comandi-piede kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--color-divider);
  border-radius: 3px;
  color: var(--color-neutral-500);
}

.rail-nav { flex: 1; padding-bottom: 12px; }
.rail-gruppo {
  margin: 14px 0 4px;
  padding: 0 18px;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-neutral-700);
}
.rail-voce {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 18px;
  font-size: 13.5px;
  color: var(--color-neutral-400);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.rail-voce:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.rail-voce.is-active {
  color: var(--color-text);
  border-left-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 9%, transparent);
}
.rail-testo { flex: 1; }
.rail-badge {
  min-width: 17px; height: 17px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--color-accent); color: #06222b;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
}
/* La lettera della scorciatoia compare solo passandoci sopra: sempre visibile
   sarebbe rumore per chi usa il mouse, e assente non si imparerebbe mai. */
.rail-tasto {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--color-neutral-700);
  opacity: 0; transition: opacity 0.15s ease;
}
.rail-voce:hover .rail-tasto { opacity: 1; }

.rail-fondo { padding: 12px 12px 0; border-top: 1px solid var(--color-divider); display: grid; gap: 8px; }
.rail-azione {
  display: block; text-align: center;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-accent); color: #06222b;
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.rail-azione:hover { background: var(--color-accent-400); color: #06222b; }
.rail-secondaria { font-size: 12px; color: var(--color-neutral-500); text-decoration: none; text-align: center; }
.rail-secondaria:hover { color: var(--color-accent-300); }

/* Il contenuto si sposta per far posto alla colonna. La testata del sito qui non
   serve: il pannello ha il suo marchio nella colonna e il suo menu utente in alto. */
body.theme-admin main.container { padding-left: calc(216px + clamp(20px, 3vw, 40px)); max-width: none; }
body.theme-admin { padding-bottom: 38px; }
body.theme-admin .site-footer { padding-left: calc(216px + clamp(20px, 3vw, 40px)); max-width: none; }

/* La testata comincia dove finisce la colonna. Con lo sfondo esteso a tutta larghezza
   copriva il marchio e il richiamo ai comandi: la colonna sta dentro <main>, che ha un
   proprio piano di sovrapposizione, quindi lo z-index da solo non bastava a portarla
   davanti. Spostarla è più semplice che rincorrere le sovrapposizioni. */
body.theme-admin .site-header { margin-left: 216px; }
body.theme-admin .site-header-inner { max-width: none; padding-left: clamp(20px, 3vw, 40px); }
body.theme-admin .site-header-inner .logo { display: none; }

/* ── Riga comandi ──────────────────────────────────────────────────────────── */
.comandi {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
}
.comandi-scatola {
  width: min(560px, calc(100vw - 32px));
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.comandi-campo {
  width: 100%;
  padding: 16px 18px;
  font: inherit; font-size: 15px;
  color: var(--color-text);
  background: none; border: 0;
  border-bottom: 1px solid var(--color-divider);
  outline: none;
}
.comandi-esiti { list-style: none; margin: 0; padding: 6px; max-height: 46vh; overflow-y: auto; }
.comandi-voce {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
}
.comandi-voce.is-scelta { background: color-mix(in srgb, var(--color-accent) 15%, transparent); }
.comandi-nome { flex: 1; color: var(--color-text); }
.comandi-gruppo { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-neutral-600); }
.comandi-vuoto { padding: 14px 12px; color: var(--color-neutral-600); font-size: 13.5px; }
.comandi-piede {
  display: flex; gap: 16px;
  margin: 0; padding: 9px 14px;
  border-top: 1px solid var(--color-divider);
  font-size: 11px; color: var(--color-neutral-600);
}

/* ── Striscia dei tasti ────────────────────────────────────────────────────── */
.tasti {
  position: fixed; left: 216px; right: 0; bottom: 0;
  z-index: 50;
  display: flex; gap: 20px;
  padding: 7px clamp(20px, 3vw, 40px);
  /* Opaca e non traslucida: il contenuto che le scorre sotto trasparirebbe e la
     striscia diventerebbe illeggibile proprio quando serve. */
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  font-size: 11px; color: var(--color-neutral-600);
}
.tasti span { display: inline-flex; align-items: center; gap: 6px; }

/* ── Colonna delle opzioni ─────────────────────────────────────────────────── */
.opz { width: 34px; }
.opz-campo {
  width: 30px;
  padding: 3px 0;
  text-align: center;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--color-accent-300);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: 3px;
}
.opz-campo:focus { outline: none; border-color: var(--color-accent); }
.opz-legenda {
  margin: 0 0 10px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--color-neutral-600);
}
.opz-legenda b { color: var(--color-neutral-400); font-weight: 500; }

@media (max-width: 900px) {
  /* Sotto questa larghezza la colonna diventa una striscia in alto: una barra laterale
     fissa su uno schermo stretto si mangia metà della tabella. */
  .rail {
    position: static; width: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 4px 14px;
    padding: 12px clamp(16px, 4vw, 24px);
    border-right: 0; border-bottom: 1px solid var(--color-divider);
  }
  .rail-marchio, .rail-gruppo, .rail-tasto, .rail-secondaria { display: none; }
  .rail-comando { margin: 0; order: -1; flex: 1; }
  .rail-nav { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 0; }
  .rail-voce { padding: 4px 8px; border-left: 0; border-radius: var(--radius-sm); }
  .rail-voce.is-active { border-left: 0; }
  .rail-fondo { border-top: 0; padding: 0; }
  body.theme-admin main.container,
  body.theme-admin .site-header-inner,
  body.theme-admin .site-footer { padding-left: clamp(20px, 4vw, 32px); }
  .tasti { display: none; }
}

/* ── Salute del sito ─────────────────────────────────────────────────────── */
.salute { display: grid; gap: 14px; }
.salute-pulito {
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  border-radius: var(--radius-md);
  color: var(--color-accent-300);
}
.salute-blocco {
  border: 1px solid var(--color-divider);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.salute-blocco--attenzione { border-left-color: var(--color-amber); }
.salute-blocco--nota { border-left-color: var(--color-neutral-600); }

.salute-testa { display: flex; align-items: baseline; gap: 12px; }
.salute-titolo { margin: 0; font-size: 16px; }
.salute-conta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-neutral-500);
}
.salute-spiega { margin: 6px 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--color-neutral-400); max-width: 82ch; }
.salute-voci { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.45; }

/* ── Confronto col periodo precedente ────────────────────────────────────── */
.confronto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}
.confronto-cella {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.confronto-valore { font-family: var(--font-mono); font-size: 26px; line-height: 1.1; }
.confronto-etichetta { font-size: 12.5px; color: var(--color-neutral-500); }
.confronto-var { font-family: var(--font-mono); font-size: 11.5px; margin-top: 4px; }
.confronto-var--su { color: var(--color-accent-300); }
.confronto-var--giu { color: #e88b8b; }
.confronto-var--pari, .confronto-var--nulla { color: var(--color-neutral-600); }

/* ── Ore di lettura ──────────────────────────────────────────────────────── */
.ore {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  align-items: end;
  gap: 3px;
  height: 130px;
  margin-bottom: 6px;
}
.ora { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.ora-barra {
  background: color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}
.ora:hover .ora-barra { background: var(--color-accent); }
.ora-etichetta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-neutral-600);
  text-align: center;
  margin-top: 4px;
  height: 12px;
}

/* ── Inventario dei contenuti ────────────────────────────────────────────── */
.inventario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.inventario-cella {
  display: grid; gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.inventario-dettaglio { font-family: var(--font-mono); font-size: 11px; color: var(--color-neutral-600); margin-top: 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   SALA CONTROLLO
   ══════════════════════════════════════════════════════════════════════════
   Pensata per restare aperta su uno schermo tutto il giorno. Da lì discendono
   quasi tutte le scelte: cifre grandi leggibili da lontano, movimento solo
   dove significa qualcosa, e nessun colore acceso che a fine giornata stanchi. */
.sala { max-width: none; }

.sala-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.sala-stato {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-neutral-500);
}

/* Il pallino dice se quello che vedi è vero. È l'elemento più importante della
   schermata: senza, dei numeri fermi sembrerebbero un sito fermo. */
.sala-pallino {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-neutral-700);
  flex: none;
}
.sala-pallino--vivo {
  background: var(--color-accent);
  animation: sala-battito 5s ease-out infinite;
}
.sala-pallino--caduto { background: #e8706e; animation: none; }
@keyframes sala-battito {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 60%, transparent); }
  60%, 100% { box-shadow: 0 0 0 8px transparent; }
}

.sala-pausa {
  font: inherit;
  font-size: 11px;
  padding: 3px 10px;
  background: none;
  color: var(--color-neutral-400);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  cursor: pointer;
}
.sala-pausa:hover { color: var(--color-text); border-color: var(--color-accent); }

.sala-griglia {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  /* I riquadri alti due righe lasciano buchi quando quello successivo non ci sta:
     "dense" li fa riempire dal primo blocco che entra, invece di lasciare rettangoli
     vuoti in mezzo alla schermata. */
  grid-auto-flow: dense;
}

.riquadro {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  background: color-mix(in srgb, var(--color-surface) 40%, transparent);
  min-width: 0;
}
.riquadro--grande { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
.riquadro--largo { grid-column: span 4; }
.riquadro--alto { grid-column: span 2; grid-row: span 2; }
.riquadro--scia { grid-column: span 4; grid-row: span 2; }
.riquadro--sistema { grid-column: span 2; }

.riquadro-titolo {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}
.riquadro-nota {
  margin: 8px 0 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-neutral-600);
}

/* Le cifre sono la ragione per cui questa schermata esiste: grandi, a larghezza
   fissa così non ballano quando cambiano di una unità. */
.cifra {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 40px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.cifra--enorme { font-size: clamp(56px, 7vw, 92px); color: var(--color-accent); }
/* L'unico alone di tutto il pannello, sulla sola cifra che fa da spia: dice "acceso"
   come lo direbbe una lampadina su un quadro comandi. Ovunque altro sarebbe decorazione. */
body.theme-admin .cifra--enorme { text-shadow: 0 0 18px color-mix(in srgb, var(--color-accent) 55%, transparent); }

/* Lampeggio sul cambiamento: su una schermata che si guarda di sfuggita è l'unico
   modo per accorgersi di quale numero si è mosso. Breve, e una volta sola. */
.cambiato { animation: sala-lampo 1.1s ease-out; }
@keyframes sala-lampo {
  0% { color: var(--color-accent); text-shadow: 0 0 12px currentColor; }
  100% { text-shadow: none; }
}
.acceso { color: var(--color-amber); }

/* ── Istogrammi delle 24 ore ─────────────────────────────────────────────── */
.istogramma {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 74px;
}
.istogramma i {
  flex: 1;
  min-height: 2px;
  background: color-mix(in srgb, var(--color-accent) 60%, transparent);
  border-radius: 1px 1px 0 0;
  transition: height 0.4s ease;
}
.istogramma i:last-child { background: var(--color-accent); }
.istogramma--secondario i { background: color-mix(in srgb, var(--color-neutral-400) 45%, transparent); }
.istogramma--secondario i:last-child { background: var(--color-neutral-300); }

/* ── Più letti oggi ──────────────────────────────────────────────────────── */
.classifica-oggi { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; counter-reset: c; }
.classifica-oggi li {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-mono); font-size: 12px;
}
.classifica-oggi a {
  color: var(--color-neutral-300);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.classifica-oggi b { margin-left: auto; color: var(--color-accent-300); }
.classifica-oggi .vuoto, .scia .vuoto { color: var(--color-neutral-600); }

/* ── Scia degli eventi ───────────────────────────────────────────────────── */
.scia { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ev {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 56px;
  gap: 10px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 3px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-divider) 40%, transparent);
}
.ev-tipo { text-transform: uppercase; letter-spacing: 0.06em; font-size: 9.5px; color: var(--color-neutral-600); }
.ev--accesso .ev-tipo { color: var(--color-accent-400); }
.ev--commento .ev-tipo { color: var(--color-amber); }
/* Una ricerca senza risultati è il piano editoriale scritto dai lettori: si vede. */
.ev--ricerca-vuota .ev-tipo { color: #e8706e; }
.ev--ricerca-vuota .ev-testo { color: var(--color-text); }
.ev-testo { color: var(--color-neutral-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-quando { color: var(--color-neutral-700); text-align: right; }

.kv {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono); font-size: 12px;
  padding: 4px 0;
  color: var(--color-neutral-500);
}
.kv b { color: var(--color-neutral-300); font-weight: 500; }

@media (max-width: 1100px) {
  .sala-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .riquadro--largo, .riquadro--scia { grid-column: span 4; }
}
@media (max-width: 700px) {
  .sala-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .riquadro--grande, .riquadro--largo, .riquadro--alto, .riquadro--scia, .riquadro--sistema { grid-column: span 2; grid-row: auto; }
  .ev { grid-template-columns: 78px minmax(0, 1fr); }
  .ev-quando { display: none; }
}

/* Nel tema a schermo verde l'ambra si confonde con il resto: il numero delle ricerche
   senza risultati usa il giallo della tavolozza 5250, che stacca davvero.
   È il dato più azionabile della schermata — dice cosa cercano i lettori e non trovano —
   e deve saltare all'occhio anche a distanza. */
/* Le ricerche senza risultati restano il dato più azionabile della schermata, quindi
   devono staccare: l'ambra del tema è l'unico colore caldo su una superficie fredda,
   e basta da sola senza bisogno di alzare la voce. */
body.theme-admin .acceso { color: var(--color-amber); }
body.theme-admin .ev--ricerca-vuota .ev-tipo { color: var(--color-amber); }

/* ── Riquadri di stato e attività del riepilogo ──────────────────────────────
   Queste regole vivevano dentro il vecchio tema a schermo verde e sono sparite
   insieme a lui: i due riquadri erano diventati testo impilato. Riscritte per il
   tema nuovo, e fuori dal blocco del tema, così un cambio di aspetto non se le
   porta più via. */
.terminal-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}
.terminal-panel {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  background: var(--color-surface);
}
.terminal-panel-title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}

/* Riga chiave-valore con i puntini di riempimento: il valore resta incollato a
   destra e l'occhio ci arriva seguendo la linea, come su un listato di sistema. */
.terminal-kv-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 4px 0;
}
.terminal-kv-label { color: var(--color-neutral-500); }
.terminal-kv-fill {
  flex: 1;
  border-bottom: 1px dotted color-mix(in srgb, var(--color-neutral-600) 55%, transparent);
  transform: translateY(-3px);
}
.terminal-kv-value { color: var(--color-neutral-200); }

.activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.activity-item {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  font-size: 12.5px;
  padding: 4px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-divider) 45%, transparent);
}
.activity-item:last-child { border-bottom: 0; }
.activity-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--color-accent-400);
}
.activity-item > span:nth-child(2) {
  color: var(--color-neutral-300);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.activity-time { font-family: var(--font-mono); font-size: 11px; color: var(--color-neutral-600); }
.activity-empty { margin: 0; color: var(--color-neutral-600); font-size: 13px; }

/* I riquadri dei numeri nel riepilogo sono anche filtri della tabella sotto:
   devono sembrare cliccabili, perché lo sono. */
.admin-stat-link {
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.admin-stat-link:hover .site-info-value { color: var(--color-accent); }

@media (max-width: 640px) {
  .activity-item { grid-template-columns: 70px minmax(0, 1fr); }
  .activity-time { display: none; }
}


/* ── Correzioni al riepilogo con la colonna laterale ─────────────────────────
   Con meno larghezza a disposizione i numeri andavano a capo in modo irregolare e
   la colonna dei titoli si stringeva al punto da mandare ogni titolo su quattro
   righe, gonfiando la tabella. */
body.theme-admin .admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 4px 0;
}
body.theme-admin #admin-posts-table td:nth-child(2) { min-width: 260px; }
/* I comandi vanno a capo dentro la cella invece di sfondare a destra: tenerli su una
   riga sola li spingeva fuori dalla tabella. */
body.theme-admin #admin-posts-table .admin-table-actions-inner { gap: 3px 6px; justify-content: flex-end; }
/* Senza un tetto la colonna dei comandi si allarga quanto serve e spinge la tabella
   oltre il bordo: con quattro comandi per riga e una colonna laterale che toglie
   duecento pixel, quello spazio non c'è. */
body.theme-admin #admin-posts-table .admin-table-actions { max-width: 210px; }
body.theme-admin #admin-posts-table .admin-table-actions .btn { padding: 4px 7px; font-size: 12px; }