/* ══════════════════════════════════════════════════════════════════════════
   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;

  /* Work Sans, scelto su un confronto di quattordici caratteri liberi: ha il corsivo e il
     peso regolabile. Avenir Next, che era il riferimento, è a pagamento per il web e c'è
     solo sui dispositivi Apple: scritto qui, gli altri avrebbero visto un carattere diverso. */
  --font-heading: "Work Sans", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Work Sans", system-ui, sans-serif;
  /* Il peso del testo da leggere: 300 in entrambi i temi, scelto guardandolo. Non
     scendere oltre: su uno schermo Windows i tratti sottili si assottigliano fino a
     sparire, e a tema chiaro il testo scuro sembra già più fine di quello che è. Se lì
     risultasse troppo leggero basta alzare questo valore: il peso è regolabile, non
     servono altri file. */
  --peso-testo: 300;
  /* Il colore del testo lungo. A tema scuro il testo quasi bianco su fondo quasi nero
     arrivava a 15,7:1, e su una lettura lunga abbaglia: qui è 13,3:1, ancora lontano da
     ogni soglia. I tratti sottili del peso 300 non sopportano di più. I titoli restano
     del colore pieno, così si distinguono anche per colore e non solo per dimensione. */
  --colore-testo-lungo: color-mix(in srgb, var(--color-text) 92%, var(--color-bg));
  /* 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) 65%, 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. */
/* Il marchio accanto al nome. Era una barretta viola disegnata qui; adesso è l'icona vera
   del sito, la stessa che il browser mostra nella scheda — così chi ha dieci schede aperte
   riconosce PowerLab400 senza leggere.
   Vive in quattro posti (testata, piè di pagina, colonna del pannello, riquadro
   dell'autore) e sono tutti span vuoti: per questo sta come immagine di sfondo invece che
   come <img>. "contain" invece di "cover" perché il marchio è tondo e cover, se il
   contenitore non fosse quadrato, gli taglierebbe i lati. */
.logo-mark {
  width: 22px;
  height: 22px;
  background: url('/immagini/logo-powerlab400-128.png') center / contain no-repeat;
  display: inline-block;
  margin-right: 9px;
  flex: none;
}

/* In testata il marchio riempie quasi tutta l'altezza della barra. Non è il nome ad avere
   un'icona accanto: è il marchio ad avere il nome scritto di fianco, ed è la prima cosa
   che si cerca quando ci si è persi in una pagina.
   Il numero qui sotto e i due riempimenti della barra — vedi .site-header poco più giù —
   sono una cosa sola: se il marchio cresce senza stringere i riempimenti, non diventa più
   alto rispetto alla barra, si porta dietro la barra. Chi li cambia li cambia insieme.
   Le lettere restano dove sono. Il nome è già leggibile, e allargarlo anche lui manderebbe
   a capo le otto voci di navigazione su schermo medio — che è il difetto che si nota. */
.logo .logo-mark {
  width: 64px;
  height: 64px;
  margin-right: 14px;
  /* Immagine più grande di quella usata altrove: a sessantaquattro pixel su uno schermo
     ad alta densità quella da centoventotto sarebbe al limite, e il bordo del cerchio si
     sgranerebbe proprio sull'elemento più in vista del sito. */
  background-image: url('/immagini/logo-powerlab400-192.png');
}

/* Nel piè di pagina e nella colonna del pannello il nome è scritto più piccolo che in
   testata: lasciando il marchio a ventidue pixel diventava più alto delle lettere che gli
   stanno accanto, e il nome sembrava una didascalia dell'icona invece del contrario. */
.footer-brand .logo-mark,
.rail-marchio .logo-mark { width: 18px; height: 18px; margin-right: 8px; }

/* — header — */
/* Il riempimento sopra è stato stretto — da quarantaquattro pixel a venti — quando il
   marchio è cresciuto. Non è un ripensamento sullo spazio: è che l'altezza della barra è la
   somma di questi riempimenti e del marchio, e lasciandoli larghi la barra sarebbe cresciuta
   insieme a lui invece di essere riempita. Il risultato netto è una barra un po' più bassa
   di prima con dentro un marchio quasi doppio — e la barra è appiccicata in cima, quindi
   ogni pixel che si prende è schermo che non si vede mai. */
.site-header {
  padding: clamp(14px, 2.2vw, 20px) 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(12px, 2vw, 16px);
  display: flex;
  /* Prima qui c'era l'allineamento alla linea di base, che teneva le voci di navigazione
     sulla stessa riga delle lettere del nome. Funzionava finché tutto era alto uguale.
     Con un marchio da sessantaquattro pixel la riga è alta il doppio del testo, e la linea
     di base porta le voci a incollarsi in cima lasciando il vuoto sotto: il marchio da una
     parte, la navigazione dall'altra, e in mezzo niente. Centrando, tutto sta sulla stessa
     mezzeria e la barra torna una riga sola. */
  align-items: center;
  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) 65%, 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) 65%, 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) 65%, 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; }

/* Fonti e note di verifica: le vede solo l'amministratore, e si devono distinguere a
   colpo d'occhio dal corpo dell'articolo, altrimenti si finisce per non ricordare più
   che cosa il lettore vede e cosa no. */
.post-riservato {
  margin-top: 36px;
  padding: 14px 18px;
  border: 1px dashed var(--border, #d0d5dd);
  border-radius: var(--radius-md, 10px);
}
.post-riservato > summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.post-riservato .post-riservato-nota { margin: 10px 0 0; font-size: 14px; opacity: .75; }
.post-riservato .post-content { margin-top: 12px; }

.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) 65%, transparent);
}

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

/* Il campo esca (newsletter e contatto): senza questa regola non esisteva nessuno stile
   per nasconderlo, e compariva come una casella vuota davanti al campo email — visibile,
   fuori posto, e pronta perché un visitatore vero ci scriva dentro per errore scartando
   così la propria iscrizione senza nessun messaggio d'errore. Fuori schermo invece di
   display:none: alcuni bot ignorano di proposito i campi nascosti in quel modo.
   position:relative sul form (qui sopra, e su .contact-form più sotto) ancora l'offset
   al form invece che alla pagina intera: senza un antenato posizionato, "left: -9999px"
   allarga la larghezza scrollabile di tutto il documento invece di restare confinato. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.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 { position: relative; 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) 65%, transparent);
}

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

/* — chi scrive il sito —
   Foto a sinistra e testo a destra finché c'è spazio; sotto i 560px la foto passa
   sopra, centrata, perché una colonna da 120px accanto a un paragrafo stretto
   riduce il testo a due parole per riga. */
.autore-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 28px 0;
}
.autore-ritratto {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.autore-ritratto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.autore-iniziali {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--color-accent);
}
.autore-testo { min-width: 0; }
.autore-testo h2 { font-size: 22px; margin: 0 0 2px; }
.autore-testo p { margin: 0 0 10px; }
.autore-ruolo { color: color-mix(in srgb, var(--color-text) 65%, transparent); font-size: 14px; }
.autore-bio { font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 75%, transparent); }

/* Le schede erano una sola e il margine se lo portava dietro la scheda. Adesso possono
   essere molte: il distanziamento passa al contenitore, altrimenti fra due schede i
   margini si sommano e si apre un buco più largo di quello sopra e sotto il gruppo. */
.autore-elenco {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 28px 0;
}
.autore-elenco .autore-card { margin: 0; }

/* L'icona è l'unico collegamento della scheda: l'area cliccabile va oltre il disegno,
   perché 22 pixel di glifo sono un bersaglio troppo piccolo da toccare col dito. */
.autore-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 4px 0 0 -8px;
  border-radius: var(--radius-md);
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  transition: color .15s ease, background-color .15s ease;
}
.autore-linkedin:hover,
.autore-linkedin:focus-visible {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

@media (max-width: 560px) {
  .autore-card { flex-direction: column; align-items: center; text-align: center; }
  /* Centrata, la sporgenza a sinistra che allinea l'icona al testo diventa uno storto */
  .autore-linkedin { margin-left: 0; }
}

.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;
  /* Serve a contenere i figli in position:absolute (le etichette .visually-hidden dentro
     le celle). Senza, il loro blocco contenitore è la pagina e non il contenitore che
     scorre: sfuggono all'overflow e allargano il documento intero, facendo comparire la
     barra orizzontale su telefono anche se la tabella scorre già per conto suo. */
  position: relative;
}

.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);
}

/* Il testo di suggerimento dentro i campi.
   Senza questa regola resta quello di serie del browser — rgb(117,117,117) —
   uguale nei due temi, perche' il browser non sa che ne esistono due: su fondo
   scuro fa 3,8 contro 1, sotto la soglia di leggibilita'. Qui si usa lo stesso
   modo del suggerimento sotto i campi, che il tema lo segue da solo.
   Il 65% non è a occhio: al 55% sul tema chiaro il contrasto restava a 3,97 contro 1,
   misurato nel browser. A 65% i due temi stanno tutti e due sopra 4,5. */
.input::placeholder,
textarea.input::placeholder {
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  opacity: 1; /* Firefox lo abbassa di suo, e due browser mostrerebbero due grigi */
}

/* Un avviso che riguarda i dati di chi scrive — sulla bacheca, il fatto che nome e recapito
   finiscono su una pagina pubblica. Si legge come un suggerimento ma non è facoltativo, e
   con lo stesso grigio degli altri gli occhi ci passano sopra. */
.field-hint--warn {
  color: var(--color-amber);
  border-left: 2px solid color-mix(in srgb, var(--color-amber) 50%, transparent);
  padding-left: 10px;
}

/* 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); }
/* Qui c'era una riga che ridipingeva il marchio con l'accento del pannello. Ora il marchio
   è un'immagine, e quella riga la coprirebbe: nel pannello resta lo stesso del sito, ed è
   giusto così — è sempre PowerLab400. */

/* 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;
  /* Era 13 px al 62%: 4,95:1 a tema chiaro, appena sopra la soglia, e piccolo per
     essere letto. */
  font-size: 14px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 75%, 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) 65%, 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: 13.5px;
  color: color-mix(in srgb, var(--color-text) 65%, 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; }

/* Sotto i 1100px l'indice è un riquadro sopra il testo, e su un articolo lungo occupava un
   intero schermo prima della prima riga. Lì diventa un pulsante che lo apre. Il pulsante
   nasce nascosto e lo accende post.js: senza JavaScript l'indice resta aperto com'era. */
.post-toc-toggle { display: none; }
@media (max-width: 1099px) {
  .post-toc.ha-interruttore .post-toc-title { display: none; }
  .post-toc-toggle:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    font: inherit;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: left;
    cursor: pointer;
  }
  .post-toc-count {
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text) 9%, transparent);
    letter-spacing: 0;
  }
  .post-toc-caret { margin-left: auto; font-size: 13px; transition: transform 0.2s ease; }
  .post-toc.ha-interruttore ul { margin-top: 12px; }
  .post-toc.is-collapsed ul { display: none; }
  .post-toc.is-collapsed .post-toc-caret { transform: rotate(-90deg); }
}

/* 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; }

/* Le schede sono le stesse degli elenchi, ma qui chiudono un articolo invece di aprirne
   uno: la copertina è più bassa e l'occhiello si ferma a due righe, così le tre schede
   finiscono alla stessa altezza e la coda della pagina non pesa più del testo appena letto. */
.related-posts .post-card-cover { aspect-ratio: 5 / 2; }
.related-posts .post-card-body { padding: 14px 16px 16px; gap: 6px; }
.related-posts .post-card-title { font-size: 16px; }
.related-posts .post-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* 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"]) {
    --colore-testo-lungo: var(--color-text);
    --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"] {
  --colore-testo-lungo: var(--color-text);
  --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; }
:root[data-theme="light"] .post-content { --fondo-codice: #f0f1f6; }
/* Dentro il contenitore lo sfondo lo dà il contenitore: la regola qui sopra, più forte,
   lo ridava al <pre> e il codice usciva grigio sotto una barra bianca. */
:root[data-theme="light"] .post-content .code-block > pre { background: none; }

@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; }
/* La stessa cosa per la foto di una persona: tonda e della misura della pagina
   «Chi siamo», perché è così che verrà vista. */
.ritratto-anteprima {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-divider);
}
.ritratto-picker .cover-picker-actions { align-items: center; }

@media (max-width: 640px) {
  .hero--magazine { min-height: 260px; }
  /* Sul telefono il testo occupa la copertina in tutta l'altezza, e il disegno sotto viene
     ingrandito per riempirla: il velo che bastava sul computer, chiaro in alto, lasciava
     passare il motivo dietro il titolo. Qui copre tutto. */
  .hero--magazine::before {
    background: linear-gradient(to top, rgba(8, 8, 14, 0.94) 0%, rgba(8, 8, 14, 0.84) 55%, rgba(8, 8, 14, 0.72) 100%);
  }
}

/* — 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; }

/* Il blocco di codice ha un contenitore. Prima la barra con «Copia» stava dentro il <pre>
   che scorre di lato, e sul telefono scorreva via insieme al codice, tagliata a metà.
   Adesso scorre solo il <pre>; la barra resta ferma sopra. */
.post-content .code-block {
  position: relative;
  margin: 20px 0 24px;
  border-radius: var(--radius-md);
  /* Lo sfondo del codice sta in una variabile: la usano il contenitore e la sfumatura, e il
     tema chiaro la cambia in un punto solo. Con due regole separate la barra e il codice
     uscivano di due colori. */
  background: var(--fondo-codice, var(--color-surface));
  overflow: hidden;
}
.post-content .code-block > pre,
.post-content .code-block > pre.has-code-bar {
  margin: 0;
  padding-top: 14px;
  border-radius: 0;
  background: none;
}
.post-content .code-block > .code-bar { position: static; border-radius: 0; }
/* Una sfumatura sul bordo destro quando il codice continua oltre lo schermo: senza,
   una riga tagliata sembra una riga finita. Sparisce arrivati in fondo. */
.post-content .code-block::after {
  content: '';
  position: absolute;
  top: var(--altezza-barra, 38px);
  right: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: linear-gradient(to left, var(--fondo-codice, var(--color-surface)), transparent);
}
.post-content .code-block.scorre-a-destra::after { opacity: 1; }

.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);
}
/* Il tondo accanto alla firma in fondo all'articolo. Il marchio è già un cerchio scuro, e
   incastonarlo in un secondo cerchio colorato faceva due anelli concentrici: qui il tondo
   fa solo da contenitore, e il marchio lo riempie. */
.author-avatar {
  flex: none;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: none;
  border: none;
}
.author-avatar .logo-mark { margin: 0; width: 48px; height: 48px; }

/* Il tondo può contenere tre cose diverse: la fotografia della persona, le sue iniziali
   quando la fotografia non c'è, o il marchio del sito quando il contenuto non ha firma.
   Le prime due hanno bisogno del fondo colorato e del ritaglio tondo; il marchio no,
   perché è già un cerchio (vedi la regola qui sopra). */
.author-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.author-avatar:has(img),
.author-avatar:has(.author-iniziali) {
  overflow: hidden;
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.author-iniziali {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: var(--color-accent);
}

/* "Scritto da": piccolo e in maiuscoletto, come le altre etichette del sito. Serve a dire
   che il nome sotto è una persona e non l'inizio di un'altra sezione. */
.author-eyebrow {
  margin: 0 0 2px;
  font-family: var(--font-mono);
  /* Era 10,5 px al 45%: 2,9:1 a tema chiaro, sotto la soglia di 4,5. */
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.author-name { margin: 0 0 4px; font-family: var(--font-heading); font-weight: 600; font-size: 15px; }
.author-role { margin: 0 0 8px; font-size: 13px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.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); }

/* La colonna di destra dell'elenco articoli. La griglia di .page-layout la teneva già,
   vuota, per centrare il contenuto: adesso ci stanno «I più letti», e il margine destro
   non è più un buco. Sul telefono la colonna scende sotto l'elenco, perché nel codice
   viene dopo: il primo schermo torna agli articoli. */
.sidebar-right {
  position: sticky;
  top: 132px;
}
.sidebar-right .most-read { padding-top: 0; border-top: 0; }
@media (max-width: 860px) {
  .sidebar-right { position: static; }
  .sidebar-right .most-read { padding-top: 24px; border-top: 1px solid var(--color-divider); }
}

/* — 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.02em;
  /* 1,08 schiacciava i titoli che vanno su due o tre righe, cioè quasi tutti. */
  line-height: 1.15;
}

.post-content {
  font-size: 16px;
  line-height: 1.72;
  font-weight: var(--peso-testo);
  color: var(--colore-testo-lungo);
  /* La colonna resta larga per il codice e le tabelle, che la larghezza la usano. Il
     limite in «ch» di prima dipendeva dalla cifra 0, più larga di una lettera media: le
     righe arrivavano a 86 caratteri. */
  max-width: 720px;
}
/* Il testo invece si ferma prima: oltre i 70 caratteri circa l'occhio fatica a ritrovare
   l'inizio della riga dopo. Misurato col carattere vero, non a stima: con Work Sans a
   16 px, 36em sono circa 69 caratteri. Se cambia il carattere o la dimensione, va
   rimisurato: le lettere di un carattere largo ne fanno stare meno. */
.post-content > p,
.post-content > ul,
.post-content > ol,
.post-content > h2,
.post-content > h3,
.post-content > h4,
/* Le note e i riquadri restano larghi quanto la colonna, perché spesso hanno dentro un
   blocco di codice che la larghezza la usa: il limite va sulle loro righe di testo. */
.post-content blockquote > p,
.post-content blockquote > ul,
.post-content .callout-body > p,
.post-content .callout-body > ul { max-width: 36em; }

/* Il codice degli articoli nel carattere del sito. Nessuna regola lo assegnava, e il
   browser usava la sua spaziatura fissa predefinita: su Mac è Courier, con le grazie e
   i tratti sottili, e IBM Plex Mono si caricava solo per le etichette. Resta dentro gli
   articoli: gli strumenti che disegnano schermate a caratteri hanno regole loro. */
.post-content code,
.post-content pre,
.post-content kbd,
.post-content samp { font-family: var(--font-mono); }
.post-content p { margin-bottom: 1.15em; }
.post-content strong, .post-content b { font-weight: 700; }
.post-content h2, .post-content h3, .post-content h4 { color: var(--color-text); }
/* Le tabelle hanno testo a 14,5 px: a quella misura un tratto leggero si sfilaccia.
   Restano al peso normale, come ogni testo piccolo del sito. */
.post-content table { font-weight: 400; }
/* Gli altri testi lunghi del sito — sottotitoli, presentazioni — hanno lo stesso peso
   del testo degli articoli, altrimenti la pagina parla con due voci. */
.hero-excerpt, .tools-lead, .author-bio, .category-desc { font-weight: var(--peso-testo); }

.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;
}

/* Le note che non cominciano con un'etichetta riconosciuta («Nota:», «Attenzione:»…)
   restano citazioni semplici. Erano tutte in corsivo: su una riga va bene, su quattro righe
   con del codice in mezzo si leggono male. Adesso sono testo dritto su uno sfondo appena
   colorato, e il bordo a sinistra dice che è una nota. */
.post-content blockquote {
  margin: 24px 0;
  padding: 14px 18px;
  border-left: 3px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  color: color-mix(in srgb, var(--color-text) 88%, transparent);
  font-style: normal;
}
.post-content blockquote > :first-child { margin-top: 0; }
.post-content blockquote > :last-child { margin-bottom: 0; }

/* — tabelle dentro gli articoli —
   Non c'era nessuna regola: niente bordi, intestazione centrata sopra celle allineate a
   sinistra, e il paragrafo dopo attaccato. Il contenitore lo aggiunge il server
   (avvolgiTabelle in lib/reading.js) e fa scorrere di lato solo la tabella, non la pagina. */
.post-content .tabella-scorre {
  overflow-x: auto;
  margin: 22px 0 26px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.post-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.45;
}
.post-content th,
.post-content td {
  padding: 9px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-divider);
}
/* L'allineamento scelto nel markdown (| :---: |) si rispetta: arriva come attributo. */
.post-content th[align="center"], .post-content td[align="center"] { text-align: center; }
.post-content th[align="right"], .post-content td[align="right"] { text-align: right; }
.post-content thead th {
  font-weight: 600;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
}
.post-content tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--color-text) 2.5%, transparent); }
.post-content tbody tr:last-child td { border-bottom: 0; }
/* Il codice dentro una tabella non si spezza a metà parola. Con il break-word del codice
   il browser dimensionava le colonne come se ogni nome si potesse tagliare dove capita, e
   le stringeva fino a «DECRESUL» e «T» su due righe anche con lo spazio libero accanto.
   Una tabella che così diventa troppo larga scorre di lato nel suo contenitore. */
.post-content td code,
.post-content th code { word-break: normal; }
/* Gli articoli salvati dall'editor visuale prima del 17 settembre 2026 hanno il testo
   delle celle e delle voci di elenco dentro un <p>, e il margine del paragrafo allungava
   ogni riga di tabella e allontanava le voci fra loro. */
.post-content td > p:last-child,
.post-content th > p:last-child,
.post-content li > p:last-child { margin-bottom: 0; }

/* — la riga di separazione —
   Senza regola il browser disegnava la sua, una riga chiara piena che sul tema scuro
   tagliava la pagina. */
.post-content hr {
  border: 0;
  height: 1px;
  margin: 40px 0;
  background: var(--color-divider);
}
.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; }
}
/* Stampando, un elemento che non era ancora passato sullo schermo usciva invisibile:
   un avviso dentro un articolo, la scheda dell'autore. */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* — 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) 65%, 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;
  /* Il margine negativo della regola più sopra serviva a compensare un padding
     laterale di 7px, che qui non c'è più: lasciandolo, il valore usciva di sette
     pixel a sinistra della sua colonna e la card gli tagliava la prima lettera.
     Su un telefono si leggeva «BM i server» al posto di «IBM i server». */
  margin-left: 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);
}

/* Messaggio al posto del risultato, quando non c'è ancora niente da mostrare: stesso
   peso di una nota, non di un errore — non è successo niente di male. */
.tool-output-nota { margin: 12px 0 0; font-size: 13px; color: var(--color-neutral-500); }

/* — tabella dei codici di edit — */
.editcode-tabella td { vertical-align: middle; }
.editcode-tabella code {
  font-size: 13.5px;
  /* Le cifre in tabellare: incolonnate, come sulla stampa che questa tabella descrive.
     Con le cifre proporzionali i risultati non si allineano e il confronto fra un codice
     e l'altro — che è tutto il senso dello strumento — diventa faticoso. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.editcode-codice {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-accent-300);
}
/* "in bianco" è un risultato, non un dato mancante: si scrive, ma smorzato e in corsivo
   così non si confonde con i valori veri della colonna. */
.editcode-bianco { font-style: italic; color: var(--color-neutral-600); }
.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;
    /* `min-width: 0` lascia stringere la CELLA della griglia, non il contenuto:
       il nome ha `white-space: nowrap` e usciva lo stesso. A 320 pixel copriva il
       pulsante del tema per 55px. Adesso il nome si accorcia coi puntini, e il
       simbolo resta sempre visibile perché è il collegamento alla home. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* `min-width: 0` da solo non basta: il collegamento è un contenitore flex e
       resta largo quanto il contenuto, sfondando la colonna della griglia.
       Misurato a 320px: 162px dentro una colonna da 96. Con questa riga torna a
       96 e restano 10px di spazio dal pulsante del tema. */
    max-width: 100%;
  }
  /* Sul telefono il marchio scende da sessantaquattro a quaranta. Non è timidezza: sulla
     stessa riga ci sono il pulsante del tema, la bandiera e l'accesso, e la riga sotto ha
     già le voci di navigazione che scorrono di lato. Un marchio da sessantaquattro qui
     mangerebbe mezza schermata prima ancora che cominci l'articolo. */
  .logo .logo-mark { width: 34px; height: 34px; margin-right: 8px; flex: none; }
  /* I puntini vanno sul testo, non sul collegamento: dentro un contenitore flex
     «text-overflow» sul contenitore non fa niente. Servono da 430px in giù,
     quando la riga si stringe ancora. */
  .logo-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 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);
}

/* 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
   ══════════════════════════════════════════════════════════════════════════ */
/* — le due schede: le offerte, le persone —
   Due collegamenti, non due pulsanti: ognuna delle due facce ha un indirizzo suo. Il
   numero accanto serve a quella che non si sta guardando — su una bacheca giovane, una
   scheda senza numero non si clicca, e metà del contenuto non lo trova nessuno. */
.bacheca-schede {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-divider);
}
.bacheca-schede a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-neutral-400);
  text-decoration: none;
  /* Il bordo c'è sempre, trasparente quando la scheda non è quella attiva: se comparisse
     solo da attiva, le due schede si sposterebbero di due pixel a ogni cambio. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.bacheca-schede a:hover { color: var(--color-neutral-200); }
.bacheca-schede a.is-active {
  color: var(--color-accent-300);
  border-bottom-color: var(--color-accent-500);
}
.bacheca-schede-conta {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
  color: var(--color-neutral-400);
}
.bacheca-schede a.is-active .bacheca-schede-conta {
  background: color-mix(in srgb, var(--color-accent-500) 22%, transparent);
  color: var(--color-accent-200);
}

/* — filtri della bacheca lavoro — */
.filtri {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 40%, transparent);
  padding: clamp(14px, 2vw, 20px);
  margin-bottom: 20px;
}

/* auto-fit e non un numero fisso di colonne: i menu che compaiono dipendono da quello che
   c'è in bacheca — con due annunci se ne vede uno, con cinquanta se ne vedono sei — e una
   griglia a colonne fisse lascerebbe buchi in mezzo. */
.filtri-campi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.filtri-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.filtri-campo label {
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}
.filtri-campo .input { min-height: 36px; font-size: 14px; }

.filtri-azioni {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
}
.filtri-azzera { font-size: 13px; color: var(--color-neutral-400); }
.filtri-conta { margin-left: auto; font-size: 13px; color: var(--color-neutral-500); }

.empty-state-azione { margin-top: -8px; text-align: center; font-size: 14px; }

@media (max-width: 560px) {
  /* Il conteggio va a capo da solo invece di schiacciarsi contro il pulsante */
  .filtri-conta { margin-left: 0; width: 100%; }
}

.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);
}
/* Il bordo di un altro colore è l'unica differenza fra le due schede, e basta: dentro una
   scheda sola non si mescolano mai, quindi non serve un'etichetta che ripeta cosa si sta
   guardando. Serve invece quando una persona arriva da un collegamento diretto a una
   scheda e non ha visto le due linguette. */
.annuncio--persona { border-left-color: var(--color-amber); }

.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);
}
/* — le competenze sulla scheda —
   Sigle, non frasi: si leggono di sbieco, ed è il motivo per cui su una bacheca tecnica
   stanno su una riga loro invece che mescolate alle altre etichette. */
.annuncio-competenze {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 12px 0 0;
}
.annuncio-competenze span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--color-neutral-500);
}
.annuncio-competenze span::before { content: '·'; margin-right: 6px; opacity: 0.6; }
.annuncio-competenze span:first-child::before { content: none; }

/* — le caselle delle competenze nei moduli —
   auto-fill a 200px: sono diciotto voci di lunghezza diversa, e su un telefono devono
   incolonnarsi da sole senza che nessuno decida a mano quante stanno per riga. */
.competenze {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 14px 16px 12px;
  margin: 0;
}
.competenze > legend {
  padding: 0 6px;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}
.competenze-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px 14px;
}

/* Il bersaglio è tutta la riga, casella e testo insieme: su un telefono una casella di
   tredici pixel da centrare col pollice si sbaglia, e chi la sbaglia rinuncia. */
.competenza, .campo-spunta {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--color-neutral-300);
  cursor: pointer;
  min-height: 30px;
}
.competenza input, .campo-spunta input {
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent-500);
  cursor: pointer;
}
.campo-spunta { font-size: 14px; }

/* I due moduli — pubblicare un annuncio, mettersi a disposizione — impilati in fondo. */
.annuncio-invii { display: grid; gap: 12px; }
.annuncio-invio--persona > summary { color: var(--color-amber); }

.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; }

/* Il livello di TR accanto al numero di versione. Sta attaccato al numero e non su una
   riga propria perché è parte della risposta a "che cosa ho": 7.5 senza TR8 non è 7.5. */
.rilascio-tr {
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  vertical-align: middle;
}
.rilascio--fuori-supporto .rilascio-tr { border-color: var(--color-neutral-300); color: var(--color-neutral-500); }

/* L'introduzione degli aggiornamenti tecnologici: testo lungo, misura da lettura */
.tools-lead--stretta { max-width: 68ch; margin-bottom: 20px; }

.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; }

/* Su schermo largo la colonna sta sempre aperta: l'interruttore del menu non serve. */
.rail-testa { display: contents; }
.rail-interruttore, .rail-etichetta { display: none; }

@media (max-width: 900px) {
  /* Sotto questa larghezza la colonna diventa un menu che si apre, non una striscia di
     tredici pastiglie: su un telefono quelle occupavano cinque righe sopra ogni pagina,
     senza i nomi dei gruppi, e per arrivare al contenuto bisognava scorrere ogni volta.
     Chiuso, il menu è una riga sola. */
  .rail {
    position: static;
    width: auto;
    display: block;
    padding: 10px 12px;
    margin: 0 0 18px;
    border-right: 0;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    /* La colonna fissa scorreva per conto suo; da qui in giù sta nel flusso e non deve
       tagliare il menu aperto. */
    overflow: visible;
  }

  .rail-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .rail-marchio { display: flex; margin: 0; padding: 0; font-size: 14px; }

  /* La casella resta raggiungibile da tastiera: nascosta alla vista, non rimossa. */
  .rail-interruttore {
    display: block;
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .rail-etichetta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
  }
  .rail-interruttore:focus-visible + .rail-testa .rail-etichetta,
  .rail-interruttore:focus + .rail-testa .rail-etichetta {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  /* Le tre righine dell'icona: due pseudo-elementi più il bordo dello span. */
  .rail-etichetta-righe {
    width: 15px; height: 9px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    position: relative;
  }
  .rail-etichetta-righe::after {
    content: '';
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 100%; height: 2px;
    background: currentColor;
  }

  /* Chiuso: si vede solo la riga con marchio ed etichetta. Aperto: compare tutto,
     gruppi compresi — su un elenco verticale i nomi dei gruppi servono, mentre sulle
     pastiglie in fila non avrebbero avuto posto. */
  .rail-comando, .rail-nav, .rail-fondo { display: none; }
  /* width:100% perché è un <button>: con la sola display:flex si stringe attorno al
     testo invece di prendere la riga, e il bersaglio da dito diventa minuscolo. */
  .rail-interruttore:checked ~ .rail-comando { display: flex; width: 100%; margin: 12px 0 0; }
  .rail-interruttore:checked ~ .rail-nav { display: block; padding: 8px 0 0; }
  .rail-interruttore:checked ~ .rail-fondo { display: grid; border-top: 0; padding: 10px 0 0; }

  .rail-gruppo { display: block; }
  .rail-tasto { display: none; }
  /* Bersagli comodi da dito: 40px è il minimo sotto cui si sbaglia voce. */
  .rail-voce { padding: 9px 10px; border-left: 0; border-radius: var(--radius-sm); min-height: 40px; }
  .rail-voce.is-active { border-left: 0; }
  .rail-secondaria { display: block; margin-top: 8px; }

  body.theme-admin main.container,
  body.theme-admin .site-header-inner,
  body.theme-admin .site-footer { padding-left: clamp(20px, 4vw, 32px); }

  /* Lo scostamento della testata NON era azzerato qui, ed era il guasto: su un telefono
     da 390px la testata partiva a 216px, sforava di lato e portava con sé lo scorrimento
     orizzontale di tutta la pagina, con il menu utente fuori schermo. */
  body.theme-admin .site-header { margin-left: 0; }

  /* La striscia dei tasti funzione è nascosta sul telefono (non c'è una tastiera): senza
     di lei lo spazio che le era riservato in fondo alla pagina è spazio morto. */
  .tasti { display: none; }
  body.theme-admin { padding-bottom: 0; }
}

/* ── 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-spiega-avviso { color: var(--color-amber); }
.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; }
/* Cinque colonne: tipo, cosa, chi, da dove era arrivato, quando. Chi e da dove hanno
   una colonna loro, così si leggono dall'alto in basso. */
.ev {
  display: grid;
  grid-template-columns: 92px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.6fr) 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; }
.ev-utente, .ev-da { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-utente { color: var(--color-neutral-300); }
.ev-utente--anonimo { color: var(--color-neutral-600); }
.ev-da { color: var(--color-neutral-500); }
.ev--testata {
  border-bottom: 0;
  padding-bottom: 0;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}
.ev--testata span:last-child { 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; }
  /* Sul telefono restano tipo e cosa sulla prima riga, e chi sotto: la provenienza e
     l'ora non ci stanno, e fra le tre la persona è quella che si è chiesto di vedere. */
  .ev { grid-template-columns: 78px minmax(0, 1fr); row-gap: 0; }
  .ev-utente { grid-column: 2; }
  .ev-da, .ev-quando, .ev--testata { 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); }

/* ── Registro accessi delle statistiche ───────────────────────────────────── */
.filtro-anonimi {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  cursor: pointer;
}
.senza-anonimi .riga-anonima { display: none; }
.tipo-accesso {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}
.tipo-accesso--login { color: var(--color-accent-400); }

/* ── 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; }
/* ===========================================================================
   Strumenti admin: diagnostica, completezza, controllo link, registro email,
   ripristino da backup. Tutte pagine del pannello, quindi sotto body.theme-5250
   ereditano già colori e font del tema terminale.
   =========================================================================== */

.admin-intro {
  max-width: 78ch;
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

/* .newsletter-message nasce dentro la griglia del modulo newsletter e ha un margine
   superiore negativo per stare attaccata al campo. Riusata nel pannello admin come
   messaggio di esito diventa un'appendice del paragrafo precedente: qui va invece
   staccata e riquadrata, perché su queste pagine è la frase che conta di più (per
   esempio "nessuna modifica è stata fatta" nell'anteprima del ripristino). */
.admin-page .newsletter-message {
  margin: 18px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--color-divider);
  border-left-width: 3px;
  border-radius: 2px;
  font-size: 14px;
  line-height: 1.6;
}
.admin-page .newsletter-message--success { border-left-color: var(--color-accent); }
.admin-page .newsletter-message--invalid { border-left-color: #e0938a; }

/* Testo per i lettori di schermo: il pallino colorato da solo non dice nulla a chi
   non lo vede, e il colore non è mai l'unico portatore dell'informazione. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* — semaforo condiviso da diagnostica, controllo link e registro email — */
.diag-cell-stato { width: 28px; padding-right: 0; }

.diag-pallino {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-neutral-600);
}
.diag-pallino--ok { background: #38b56a; }
.diag-pallino--attenzione,
.diag-pallino--redirect { background: #d9a334; }
.diag-pallino--errore,
.diag-pallino--rotto { background: #d9534f; }
.diag-pallino--irraggiungibile { background: #c1663f; }
.diag-pallino--bloccato { background: var(--color-neutral-500); }

.diag-nome { font-weight: 600; white-space: nowrap; }
.diag-valore { word-break: break-word; }
.diag-dettaglio {
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  line-height: 1.5;
  max-width: 52ch;
}
.diag-row--errore .diag-nome { color: #e0938a; }

.diag-tutto-ok {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--color-accent-300);
}

/* — completezza: una colonna stretta per requisito — */
.compl-table .compl-col { width: 70px; text-align: center; }

.compl-pallino {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--color-divider);
}
.compl-pallino.is-pieno { background: var(--color-accent); border-color: var(--color-accent); }
.compl-pallino.is-vuoto { background: transparent; }

.compl-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

/* — controllo link — */
.link-azioni {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0 4px;
}
.link-azioni .field-hint { margin: 0; }

/* Gli indirizzi lunghi (la documentazione IBM ne ha di notevoli) devono andare a capo
   dentro la loro cella invece di allargare la tabella oltre lo schermo. */
.link-url { max-width: 42ch; }
.link-url a { word-break: break-all; }

.link-esito { white-space: nowrap; }
.link-esito-nome { display: block; font-weight: 600; text-transform: capitalize; }
.link-esito-dettaglio {
  display: block;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  white-space: normal;
  max-width: 34ch;
}
.link-articoli { max-width: 30ch; font-size: 13px; }

/* — registro email — */
.email-oggetto { max-width: 34ch; word-break: break-word; }
.email-errore {
  max-width: 30ch;
  word-break: break-word;
  font-size: 12px;
  color: #e0938a;
}

/* — ripristino da backup — */
.ripristino-esito { margin: 20px 0 8px; max-width: 480px; }

.ripristino-elenco {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
}
.ripristino-elenco--attenzione { color: #e0938a; }
.ripristino-slug {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.ripristino-inline { font-size: 14px; margin: 8px 0 0; }
.ripristino-errori {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: #e0938a;
}

.ripristino-form { margin-top: 16px; max-width: 560px; }
.ripristino-form .compl-toggle { margin: 4px 0 16px; }
.ripristino-form input[type="file"] { padding: 10px 12px; }

@media (max-width: 700px) {
  .diag-dettaglio, .link-esito-dettaglio, .link-articoli, .email-oggetto { max-width: none; }
}

/* ─── corso RPGLE (prototipo) ─────────────────────────────────────────────── */

.lezione-pagina { max-width: 860px; margin: 0 auto; }

.lezione-passi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.lezione-passi span {
  padding: 5px 11px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.lezione-passi .is-corrente {
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-text);
}
.lezione-passi .is-futuro { opacity: 0.45; }

.lezione-sezione { margin-top: 40px; }
.lezione-sezione h2 { font-size: 21px; margin-bottom: 12px; }
.lezione-sezione p { margin-bottom: 12px; }
/* Un pezzo di codice in mezzo al testo — «TAX = PRICE - DISCOUNT * TAXRATE» —
   su uno schermo stretto non ha spazi dove spezzarsi, e sfonda la pagina di
   lato. Su una lezione di programmazione questi pezzi sono ovunque. */
.lezione-sezione code { overflow-wrap: anywhere; }

/* Il riquadro «Provalo». Il bordo di sinistra lo distingue dal testo a colpo
   d'occhio: è la parte con cui si interagisce, non da leggere. */
.rpg-prova {
  margin: 20px 0 4px;
  border: 1px solid var(--color-divider);
  border-left: 3px solid color-mix(in srgb, var(--color-accent) 60%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  overflow: hidden;
}
.rpg-prova-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 16px;
  border-bottom: 1px solid var(--color-divider);
}
.rpg-prova-titolo {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
}
.rpg-prova-nota {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.rpg-prova-nota code { font-size: 12px; }

textarea.rpg-editor {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  padding: 14px 16px;
  resize: vertical;
  tab-size: 2;
}
textarea.rpg-editor:focus { outline: 2px solid color-mix(in srgb, var(--color-accent) 45%, transparent); outline-offset: -2px; }

.rpg-prova-azioni {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 16px 14px;
}

.rpg-uscita { padding: 0 16px 16px; }
.rpg-uscita-schermo {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm, 8px);
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}
.rpg-uscita-errore,
.rpg-uscita-vuota,
.rpg-esito {
  margin: 10px 0 0;
  padding: 10px 13px;
  border-radius: var(--radius-sm, 8px);
  font-size: 13px;
  line-height: 1.55;
}
/* L'errore non è rosso e basta: è il messaggio che insegna, quindi si legge. */
.rpg-uscita-errore {
  border: 1px solid color-mix(in srgb, #e5484d 45%, transparent);
  background: color-mix(in srgb, #e5484d 12%, transparent);
}
.rpg-uscita-vuota { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.rpg-esito--ok {
  border: 1px solid color-mix(in srgb, #30a46c 50%, transparent);
  background: color-mix(in srgb, #30a46c 14%, transparent);
}
.rpg-esito--no {
  border: 1px solid color-mix(in srgb, #f5a524 50%, transparent);
  background: color-mix(in srgb, #f5a524 12%, transparent);
}

.rpg-soluzione {
  margin: 12px 16px 16px;
  padding: 12px 14px;
  border-radius: var(--radius-sm, 8px);
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
}

.lezione-esercizio .rpg-prova--esercizio {
  border-left-color: color-mix(in srgb, #f5a524 65%, transparent);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* La voce di menu che vede solo l'amministratore: il pallino dice «non è pubblico»
   senza bisogno di scriverlo. */
.main-nav .nav-solo-admin { position: relative; }
.nav-pallino {
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: #f5a524;
  vertical-align: 3px;
}

/* Indice del corso */
.corso-capitoli { list-style: none; margin: 28px 0 0; padding: 0; }
.corso-capitoli li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--color-divider);
}
.corso-capitoli li.is-futuro { opacity: 0.5; }
.corso-numero {
  font-family: var(--font-mono); font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  min-width: 18px;
}
.corso-capitoli a { font-size: 17px; }
.corso-stato {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

/* ─── banco DSPF ──────────────────────────────────────────────────────────── */

.dspf-banco { max-width: 1180px; margin: 0 auto; }
.dspf-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 24px; }
@media (min-width: 1100px) {
  /* Lo schermo prende la larghezza che gli serve, gli editor si stringono: un
     DSPSIZ(27 132) sono 132 colonne, e spartire a metà lo lascerebbe tagliato
     mentre a sinistra avanza spazio. Oltre la larghezza disponibile scorre. */
  .dspf-griglia { grid-template-columns: minmax(300px, 1fr) auto; align-items: start; }
}
.dspf-colonna { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Lo schermo verde. Il fondo scuro resta scuro anche nel tema chiaro: un 5250
   con lo sfondo bianco non è un 5250, e qui il punto è riconoscerlo a colpo
   d'occhio. Il colore è quello del fosforo, non un verde qualunque. */
.dspf-schermo-cornice {
  padding: 14px;
  background: #0b0f0c;
  border-top: 1px solid var(--color-divider);
  overflow-x: auto;
}
/* Un sorgente a colonne non va a capo: se la riga si spezza, le colonne 39-44
   non stanno più dove le conta l'occhio, ed è proprio quello che si sta
   imparando a leggere. Scorre di lato, come in SEU. */
textarea.rpg-editor--colonne { white-space: pre; overflow-x: auto; }

.dspf-schermo {
  margin: 0;
  font-family: var(--font-mono);
  /* 80 colonne devono starci tutte: a 11px sono ~530px, dentro la colonna anche
     su uno schermo da scrivania stretto. Sotto, la cornice scorre. */
  font-size: 10px;
  line-height: 1.32;
  color: #35d67a;
  white-space: pre;
  text-shadow: 0 0 6px rgba(53, 214, 122, 0.35);
  min-height: calc(24 * 1.32 * 10px);
  width: max-content;
}

/* I colori e gli attributi di un 5250. Non sono i colori esatti di un terminale
   IBM: sono quelli che si distinguono su un fondo scuro. */
.dspf-schermo .col-blu      { color: #6fb4ff; }
.dspf-schermo .col-verde    { color: #35d67a; }
.dspf-schermo .col-rosso    { color: #ff6b6b; }
.dspf-schermo .col-rosa     { color: #ff8ad4; }
.dspf-schermo .col-turchese { color: #4ee0e0; }
.dspf-schermo .col-bianco   { color: #e8f0ea; }
.dspf-schermo .col-giallo   { color: #ffd166; }
.dspf-schermo .att-evidenziato { color: #b6ffd2; font-weight: 700; }
.dspf-schermo .att-sottolineato { text-decoration: underline; }
.dspf-schermo .att-inverso { background: #35d67a; color: #0b0f0c; }
.dspf-schermo .att-lampeggiante { animation: dspf-lampeggia 1.1s steps(2) infinite; }
@keyframes dspf-lampeggia { 50% { opacity: 0.25; } }
/* Un campo di ingresso, su un 5250, si riconosce perché è lì che si scrive. */
.dspf-schermo .ingresso {
  background: rgba(53, 214, 122, 0.14);
  border-bottom: 1px solid rgba(53, 214, 122, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .dspf-schermo .att-lampeggiante { animation: none; opacity: 0.7; }
}

/* Avanti e indietro fra i capitoli */
.lezione-avanti {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--color-divider);
}
a.lezione-passo { text-decoration: none; }
a.lezione-passo:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); }

/* Le tabelle delle lezioni: tipi di dato, parole chiave, operazioni. */
.lezione-tabella {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 14px;
}
.lezione-tabella th,
.lezione-tabella td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
.lezione-tabella th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.lezione-tabella code { white-space: nowrap; }
.lezione-tabella tr:last-child td { border-bottom: 0; }

/* ── La navigazione sul telefono ─────────────────────────────────────────────
   Il pulsante e il menu a tendina esistono solo sotto i 760px, e solo quando il
   JavaScript ha acceso il pulsante (classe `ha-menu` sulla radice). Senza, resta
   la fascia che scorre di lato: peggiore, ma funzionante. */
.nav-toggle { display: none; }

@media (max-width: 760px) {
  /* Col pulsante acceso la prima riga ospita tre cose e non due: nome, pulsante,
     comandi. Senza questa colonna in più il pulsante finiva NELLA stessa cella
     dei comandi, disegnato sopra l'icona del tema. */
  .ha-menu .site-header-inner,
  .ha-menu .site-header-inner:has(.main-nav) {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .ha-menu .auth-nav { grid-column: 3; }

  .ha-menu .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-row: 1;
    grid-column: 2;
    width: 38px; height: 38px;
    margin-right: 4px;
    padding: 0;
    background: none;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm, 8px);
    color: var(--color-text);
    cursor: pointer;
  }
  /* Le tre barre disegnate col bordo: nessuna icona da caricare. */
  .nav-toggle-barre,
  .nav-toggle-barre::before,
  .nav-toggle-barre::after {
    display: block;
    width: 16px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .nav-toggle-barre { position: relative; }
  .nav-toggle-barre::before,
  .nav-toggle-barre::after { content: ''; position: absolute; left: 0; }
  .nav-toggle-barre::before { top: -5px; }
  .nav-toggle-barre::after { top: 5px; }

  /* Aperto, le tre barre diventano una croce: dice come si chiude senza scriverlo. */
  .ha-menu .nav-toggle[aria-expanded="true"] .nav-toggle-barre { background: transparent; }
  .ha-menu .nav-toggle[aria-expanded="true"] .nav-toggle-barre::before { transform: translateY(5px) rotate(45deg); }
  .ha-menu .nav-toggle[aria-expanded="true"] .nav-toggle-barre::after  { transform: translateY(-5px) rotate(-45deg); }

  /* Col pulsante acceso la fascia non scorre più: sparisce, e ricompare aperta
     come un elenco verticale, dove le voci si leggono tutte. */
  .ha-menu .main-nav { display: none; }
  .ha-menu .main-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* le voci a tutta larghezza, non centrate */
    gap: 0;
    overflow: visible;
  }
  .ha-menu .main-nav.is-open a {
    display: block;
    text-align: left;
    padding: 12px 2px;
    font-size: 16px;
    border-bottom: 1px solid var(--color-divider);
  }
  .ha-menu .main-nav.is-open a:last-child { border-bottom: 0; }

  /* Il pulsante sta accanto agli altri comandi, quindi la colonna di destra
     ospita quattro cose e non tre. */
  .ha-menu .auth-nav { gap: 8px; }
}

/* Sotto i 430px la riga deve contenere marchio, nome, menu, tema, lingua e
   accesso: il nome è la prima cosa che si accorcia, e «Powe…» non è un marchio.
   Resta il simbolo, che è comunque il collegamento alla home ed è quello che si
   riconosce sulla scheda del browser. Il nome torna appena c'è spazio. */
@media (max-width: 430px) {
  .ha-menu .logo-nome { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-barre,
  .nav-toggle-barre::before,
  .nav-toggle-barre::after { transition: none; }
}

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

.blogroll-testa {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 8px; margin-bottom: 8px;
}
/* Il nome si stacca un poco dai riquadri che lo seguono: sono due cose diverse,
   il sito e cosa è, e attaccati si leggevano come una frase sola. */
.blogroll-nome { margin-right: 4px; }

.blogroll-nome { font-size: 16px; font-weight: 600; color: var(--color-neutral-100); text-decoration: none; }
.blogroll-nome:hover,
.blogroll-nome:focus-visible { color: var(--color-accent); text-decoration: underline; }

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

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

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

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

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


/* ─────────────────────────────────────────────────────────────────────────────
   IL TEMA CHIARO CHE ARRIVA DAL SISTEMA
   ─────────────────────────────────────────────────────────────────────────────
   Lo script in testa alla pagina mette data-theme solo quando il tema è stato scelto
   col pulsante. Chi ha il computer in modalità chiara e non l'ha mai toccato non ha
   data-theme, e le regole scritte per :root[data-theme="light"] per lui non valevano:
   vedeva i colori delle categorie pensati per il fondo scuro. L'etichetta sulle
   schede era a 1,23:1, cioè invisibile. Qui le stesse regole, per il tema di sistema.
   Chi aggiunge una regola per il tema chiaro la scrive in tutti e due i posti. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header { background: color-mix(in srgb, var(--color-bg) 88%, transparent); }
  :root:not([data-theme="dark"]) .post-content pre,
  :root:not([data-theme="dark"]) .post-content code { background: #f0f1f6; }
  :root:not([data-theme="dark"]) .post-content { --fondo-codice: #f0f1f6; }
  :root:not([data-theme="dark"]) .post-content .code-block > pre { background: none; }
  :root:not([data-theme="dark"]) body::before { opacity: 0.35; }

  :root:not([data-theme="dark"]) .cat-dot:not(.cat-dot--all) {
    background: var(--cat-text-light, var(--color-accent));
  }
  :root:not([data-theme="dark"]) .categories-nav a.cat-link,
  :root:not([data-theme="dark"]) .categories-nav a.cat-link:hover,
  :root:not([data-theme="dark"]) .categories-nav a.cat-link.is-active,
  :root:not([data-theme="dark"]) .category-title,
  :root:not([data-theme="dark"]) .category-icon,
  :root:not([data-theme="dark"]) .post-card .cat-badge,
  :root:not([data-theme="dark"]) .topic-chip {
    color: var(--cat-text-light, var(--color-text));
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   STRUMENTI: REVISIONE DEL 17 SETTEMBRE 2026
   ══════════════════════════════════════════════════════════════════════════
   Le regole degli strumenti sono cresciute a strati, una scheda per volta, e
   qualcuna è scritta due volte. Qui quelle che valgono per tutte le schede,
   in fondo al foglio perché vincano sulle precedenti. La prima è quella che
   conta di più: senza, sul telefono /strumenti era largo 624 pixel su uno
   schermo da 390, e ogni scheda usciva dal bordo destro. */

/* Un elemento di una griglia non si stringe, di suo, sotto la sua riga più
   lunga: un comando, una query, una tabella. Quella riga trascinava con sé la
   scheda e tutta la colonna. A zero, la riga lunga scorre nel suo riquadro. */
.tools-grid > * { min-width: 0; }

/* Un bordo leggero stacca la scheda dal fondo: sul tema scuro l'ombra da sola
   non si vede. */
.tool-card { border: 1px solid var(--color-divider); }

/* — intestazione —
   Titolo ed etichetta «Solo admin» sulla stessa riga. L'etichetta andava a capo
   da sola, con un rientro di otto pixel che non allineava con niente. */
.tool-card-head { gap: 16px; margin-bottom: 22px; }
.tool-card-head > div {
  min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 10px;
}
.tool-card-head > div > * { flex: 1 1 100%; order: 3; }
.tool-card-head > div > .tool-card-title,
.tool-card-head > div > .tool-private-badge { flex: 0 1 auto; margin: 0; order: 0; }
/* Un a capo fra titolo e descrizione. Senza, nelle schede larghe la descrizione
   (che ha una larghezza massima, per restare leggibile) ci stava accanto al titolo
   e saliva sulla sua riga. */
.tool-card-head > div::before { content: ''; flex: 0 0 100%; height: 0; order: 2; }
.tool-card-desc {
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-300);
  max-width: 72ch;
}
.tool-schema-esito {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; max-width: 100%;
}
.tool-schema-a { white-space: normal; overflow-wrap: anywhere; }

/* Il telefono: l'icona resta accanto al titolo, e descrizione ed esempio si
   prendono tutta la larghezza. Prima stavano in una colonna rientrata di
   cinquantaquattro pixel, un quinto dello spazio. display: contents toglie la
   scatola del testo e ne fa salire i pezzi nella griglia dell'intestazione. */
@media (max-width: 560px) {
  .tool-card { padding: 18px 16px 16px; border-radius: var(--radius-md); }
  .tool-card-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px 12px;
    align-items: center;
    margin-bottom: 18px;
  }
  .tool-card-head > div { display: contents; }
  .tool-card-head > div::before { display: none; }
  .tool-card-head > div > * { grid-column: 1 / -1; }
  .tool-card-head > div > .tool-card-title { grid-column: 2; }
  .tool-card-head > div > .tool-private-badge { grid-column: 2; justify-self: start; }
  .tool-icon { width: 34px; height: 34px; }
  .tool-icon svg { width: 18px; height: 18px; }
  .tool-card-title { font-size: 19px; }
  .tool-card-desc { font-size: 14.5px; margin-top: 4px; }
}

/* — campi —
   Le righe di campi erano attaccate l'una all'altra: l'etichetta di sotto
   toccava il bordo del riquadro di testo di sopra. */
.tool-controls { gap: 14px 16px; }
.tool-controls + .tool-controls,
.tool-hint + .tool-controls { margin-top: 16px; }
.tool-controls + .tool-hint { margin-top: 10px; }
.tool-field--narrow { flex: 0 1 128px; min-width: 88px; }
.tool-field label {
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-neutral-400);
}
.tool-field .input { min-height: 40px; }
.tool-field select.input { padding-right: 30px; }

/* Le caselle di spunta sono una frase da leggere, non il nome di un campo:
   erano in maiuscolo e a larghezza fissa come le etichette, e si leggevano a
   fatica proprio perché lunghe. */
.tool-field label.tool-checkline {
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-neutral-300);
  cursor: pointer;
  align-items: flex-start;
  gap: 10px;
}
.tool-checkline input {
  flex: none;
  width: 17px; height: 17px;
  margin: 1px 0 0;
  accent-color: var(--color-accent);
}
.tool-controls:has(.tool-checkline) { gap: 10px 24px; }

.tool-hint { font-size: 13px; color: var(--color-neutral-400); }
.tool-note { font-size: 13.5px; color: var(--color-neutral-400); }
.tool-note:empty { margin: 0; min-height: 0; }
.tool-output:empty { margin: 0; }

/* I pulsanti non ereditano il carattere della pagina: le schede di direzione
   uscivano nel carattere di sistema, in mezzo a un testo in Work Sans. */
.tool-tab, .tool-copy, .svc-copy { font-family: inherit; }
.tool-tabs { max-width: 100%; }

/* Sul telefono le due direzioni si dividono la larghezza, e un'etichetta lunga
   va a capo dentro la sua metà invece di spingere fuori l'altra. Il carattere a
   16 pixel serve a iOS: sotto quella misura, toccando un campo, Safari ingrandisce
   la pagina e non la rimette com'era. */
@media (max-width: 560px) {
  .tool-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: 100%;
    border-radius: 14px;
  }
  .tool-tab { white-space: normal; line-height: 1.25; padding: 8px 10px; border-radius: 10px; }
  .tool-card .input,
  .tool-card .tool-textarea { font-size: 16px; }
  .tool-field--grow { flex-basis: 100%; }
  /* Un campo da solo sulla riga la occupa tutta; i campi stretti (cifre, decimali)
     restano affiancati. */
  .tool-controls > .tool-field:not(.tool-field--narrow) { flex: 1 1 100%; }
}

/* — risultati — */
.tool-row { padding: 10px 0; }
.tool-row-label { font-size: 12.5px; color: var(--color-neutral-400); }
.tool-row-value { font-size: 15.5px; }
.tool-row-note { color: var(--color-neutral-400); }
@media (max-width: 560px) {
  /* La nota («numerico, 7 cifre») scende sotto il valore invece di rubargli spazio */
  .tool-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .tool-row-note { grid-column: 1 / -1; white-space: normal; }
}

/* I blocchi di codice prodotti dagli strumenti. Il fondo era il fondo della
   pagina mescolato al nero: sul tema chiaro diventava un grigio medio, con il
   testo grigio sopra. Ora è il fondo della pagina, che sta sotto la scheda in
   tutti e due i temi. */
.tool-pre {
  background: var(--color-bg);
  border-radius: var(--radius-md);
}
.tool-pre code { color: var(--color-text); }
.tool-output-label { color: var(--color-neutral-400); }

.tool-table-scroll { -webkit-overflow-scrolling: touch; }
.tool-table td { color: var(--color-neutral-300); }
.tool-table th { color: var(--color-neutral-400); }
.tool-muted, .editcode-bianco { color: var(--color-neutral-500); }

.tool-explain summary { font-weight: 500; }
.tool-explain p { color: var(--color-neutral-300); }

/* La colonna del risultato si stacca dalle proprietà che la spiegano. */
.tool-table td.editcode-risultato { padding-right: 28px; }
.editcode-risultato code { color: var(--color-text); font-weight: 500; }
@media (max-width: 560px) {
  .editcode-tabella { font-size: 13px; }
  .tool-table td.editcode-risultato { padding-right: 16px; }
}

/* — prontuari (comandi CL e IBM i Services) —
   Sul telefono nome, «Al posto di» e pulsante andavano a capo dove capitava:
   a volte il pulsante su una riga sua, a volte in mezzo. In colonna, con il
   pulsante sempre a destra del nome, si scorre l'elenco con l'occhio. */
/* Stessa scala delle etichette dei campi: il grigio 500 sul tema chiaro stava
   sotto la soglia di lettura. */
.cl-expansion,
.cl-group-title,
.cl-f4,
.auth-cols h4,
.garanzia-scarica span { color: var(--color-neutral-400); }
.cl-desc { color: var(--color-neutral-300); }
@media (max-width: 640px) {
  .cl-item-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 12px;
  }
  .cl-item-head .cl-name { grid-column: 1; overflow-wrap: anywhere; }
  .cl-item-head .cl-expansion { grid-column: 1; grid-row: 2; }
  .cl-item-head .cl-f4 { grid-column: 2; grid-row: 1 / span 2; margin-left: 0; }
  .cl-group-title { font-size: 11.5px; }
}

/* — pannelli dei due strumenti più lunghi — */
@media (max-width: 560px) {
  .garanzia { padding: 12px 14px; }
  .rp-passo { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
  .jl-msg-testa { flex-wrap: wrap; }
}

/* Il tema chiaro rovescia la scala dei grigi: il 500 e il 600, pensati per il
   fondo scuro, sul bianco restano sotto la soglia di lettura. Le scritte
   piccole degli strumenti ne prendono uno più scuro. */
/* L'ambra dell'etichetta «Solo admin» nasce per il fondo scuro: sul bianco sparisce. */
:root[data-theme="light"] .tool-private-badge { color: #8a5a12; background: #fbf1e1; border-color: #e9cf9f; }
:root[data-theme="light"] .tool-row-note,
:root[data-theme="light"] .tool-muted,
:root[data-theme="light"] .editcode-bianco,
:root[data-theme="light"] .eb-hex,
:root[data-theme="light"] .tool-schema-freccia { color: var(--color-neutral-400); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tool-private-badge { color: #8a5a12; background: #fbf1e1; border-color: #e9cf9f; }
  :root:not([data-theme="dark"]) .tool-row-note,
  :root:not([data-theme="dark"]) .tool-muted,
  :root:not([data-theme="dark"]) .editcode-bianco,
  :root:not([data-theme="dark"]) .eb-hex,
  :root:not([data-theme="dark"]) .tool-schema-freccia { color: var(--color-neutral-400); }
}