/*
  Design system dei due siti di MentorAgent, mentoragent.net e docs.mentoragent.net.
  Token su :root per il tema chiaro; tema scuro con prefers-color-scheme e con [data-theme="dark"].
  Font di sistema per testo e titoli; Cascadia Mono (OFL) per il codice, da fonts.css e wwwroot/fonts.
  Le regole della vetrina hub, tolte il 26/09/2026, sono in archivio/hub/ui/hub.css (fuori dal repository).
  Palette (26/09/2026) presa dal logo (blu notte, blu, viola della piuma) e dal widget della libreria: in scuro fondo e
  pannello sono --bm-bg-base e --bm-bg-surface, l'accento è --bm-accent-bright, così il widget ospitato si fonde con la
  pagina. Il viola (--accent-2) compare solo nel marchio, nell'etichetta "coming soon", negli attributi del codice e nel
  gradiente del riquadro MentorAgent del quadro d'insieme della home.
  Tutte le coppie testo/fondo usate superano WCAG 2.2 AA (4,5:1 il testo, 3:1 contorni di fuoco e icone), in chiaro e in scuro.
*/
:root {
  color-scheme: light;
  --paper: #F5F7FB;
  --panel: #FFFFFF;
  --ink: #0C1530;
  --muted: #566079;
  --rule: #D8DEEA;
  --accent: #1D5BD6;       /* 5,56:1 su --paper, 5,07:1 su --accent-soft (#2563EB del widget scenderebbe a 4,39) */
  --accent-ink: #FFFFFF;
  --accent-soft: #E5EDFC;
  --accent-2: #6D3BDB;     /* viola della piuma: 5,94:1 su --paper, 5,41:1 su --accent-2-soft */
  --accent-2-soft: #EFEAFD;
  --pending: #8A5608;      /* 5,5:1 su --pending-soft: testo piccolo leggibile (WCAG 1.4.3) */
  --pending-soft: #FBF1DF;
  --later: #474F86;        /* indaco spento: distinto dal nuovo accento blu */
  --later-soft: #E9EBF7;
  --danger: #A8261E;       /* 6,0:1 su --danger-soft; avvisi "Caution" di docs e blog */
  --danger-soft: #FBE9E7;
  --code-bg: #0D1428;
  --code-edge: transparent;
  --code-ink: #DCE4F5;
  --code-dim: #8A96B8;
  --code-key: #7AB6FF;
  --code-type: #5FD3E2;
  --code-str: #F2B38C;
  --code-attr: #C3A8FF;
  --code-hl: rgba(122, 182, 255, .12);     /* fascia delle righe evidenziate */
  --code-line: rgba(220, 228, 245, .42);   /* bordo dei pulsanti nel codice: 3,4:1 sul fondo (WCAG 1.4.11) */
  --code-sep: rgba(220, 228, 245, .12);    /* filo sotto la barra del pannello: decorativo */
  --shadow: 0 1px 2px rgba(12, 21, 48, .06), 0 8px 24px rgba(12, 21, 48, .08);
  /* "Codice in luce" delle vetrine della home: bordo e alone in --accent (29, 91, 214), discreti nel tema chiaro */
  --shine: 0 0 0 1px rgba(29, 91, 214, .28), 0 0 32px -8px rgba(29, 91, 214, .22), 0 24px 70px -30px rgba(29, 91, 214, .30);
  --shine-soft: 0 0 0 1px rgba(29, 91, 214, .22), 0 0 20px -8px rgba(29, 91, 214, .14);
  /* Font di sistema per titoli e testo (come Microsoft Learn); Cascadia Mono, ospitato dal sito, per il codice */
  --f-display: system-ui, "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", -apple-system, Roboto, sans-serif;
  --f-body: system-ui, "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", -apple-system, Roboto, sans-serif;
  --f-mono: "Cascadia Mono", "Cascadia Mono Fallback", ui-monospace, Consolas, "Liberation Mono", monospace;
  /* Scala delle spaziature a passi di 4 px */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px; --s-10: 96px;
  --measure: 68ch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0A0E1A;
    --panel: #141929;
    --ink: #E6ECFA;
    --muted: #95A0BE;
    --rule: #252D44;
    --accent: #60A5FA;
    --accent-ink: #0A0E1A;
    --accent-soft: #15264A;
    --accent-2: #AE8FFF;
    --accent-2-soft: #211A44;
    --pending: #E4A94A;
    --pending-soft: #2A2112;
    --later: #AAB2E6;
    --later-soft: #1D2240;
    --danger: #FF8A80;     /* 7,4:1 su --danger-soft */
    --danger-soft: #2E1614;
    --code-bg: #060A14;
    --code-edge: #252D44;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --shine: 0 0 0 1px rgba(96, 165, 250, .45), 0 0 40px -6px rgba(96, 165, 250, .45), 0 30px 90px -30px rgba(96, 165, 250, .60);
    --shine-soft: 0 0 0 1px rgba(96, 165, 250, .35), 0 0 24px -8px rgba(96, 165, 250, .28);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0A0E1A;
  --panel: #141929;
  --ink: #E6ECFA;
  --muted: #95A0BE;
  --rule: #252D44;
  --accent: #60A5FA;
  --accent-ink: #0A0E1A;
  --accent-soft: #15264A;
  --accent-2: #AE8FFF;
  --accent-2-soft: #211A44;
  --pending: #E4A94A;
  --pending-soft: #2A2112;
  --later: #AAB2E6;
  --later-soft: #1D2240;
  --danger: #FF8A80;
  --danger-soft: #2E1614;
  --code-bg: #060A14;
  --code-edge: #252D44;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --shine: 0 0 0 1px rgba(96, 165, 250, .45), 0 0 40px -6px rgba(96, 165, 250, .45), 0 30px 90px -30px rgba(96, 165, 250, .60);
  --shine-soft: 0 0 0 1px rgba(96, 165, 250, .35), 0 0 24px -8px rgba(96, 165, 250, .28);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--f-body);   /* in rem: segue la dimensione del testo scelta dall'utente */
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, pre.code:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }   /* il fuoco arriva qui dal link "Vai al contenuto" */
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.1; font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: clamp(1.55rem, 2.6vw, 2.05rem); line-height: 1.2; font-weight: 650; }
h3 { font-size: 1.1rem; line-height: 1.35; font-weight: 650; }
p { margin: 0; }
code, .mono { font-family: var(--f-mono); font-size: .92em; }
/* Nomi lunghi nel testo (Microsoft.Agents.AI.Foundry, MentorAgentSkipOpenAIVersionCheck) vanno a capo: a 320px niente scorrimento (WCAG 1.4.10) */
:where(p, li, td, th, dd, h3, figcaption, summary) code { overflow-wrap: anywhere; }

/* Fuori dallo schermo con transform, non con un top fisso: con il testo ingrandito il link resta tutto nascosto finché non ha il fuoco */
.skip-link { position: absolute; left: 16px; top: 12px; transform: translateY(calc(-100% - 24px)); z-index: 30; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.skip-link:focus { transform: none; }
/* Etichetta dell'ambiente fuori produzione (EnvironmentBanner): gli stessi colori in chiaro e in scuro, bianco su
   arancio bruciato (9,4:1), perché deve distinguersi da tutto il resto della pagina. */
.env-banner { background: #7c2d12; color: #fff; font-size: .8125rem; line-height: 1.5; padding: 4px 16px; text-align: center; overflow-wrap: anywhere; }
.env-banner strong { letter-spacing: .06em; text-transform: uppercase; }
@media (forced-colors: active) { .env-banner { border-bottom: 1px solid CanvasText; } }
[hidden] { display: none !important; }   /* anche sugli elementi a cui una regola dà un display */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: 1140px; margin: 0 auto; padding-inline: 20px; }
.eyebrow { font: 500 .78rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
/* minmax(0, 1fr): senza, la colonna implicita "auto" si allarga fino al contenuto più largo e la pagina scorre di lato */
.stack { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }

/* Intestazione */
.site-head { border-bottom: 1px solid var(--rule); background: var(--paper); }
/* padding 10 px: con il pulsante del tema (44 px, dal 03/10/2026) la riga resta alta 64 px come prima (16 + 32 + 16). */
.site-head .head-row { display: flex; align-items: center; gap: 20px; padding-block: 10px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
/* Logo a 32 px CSS (BrandLogo). Nel PNG l'emblema ha 4 px di bordo trasparente a sinistra: il margine negativo lo mette
   sul filo del contenuto. */
.brand-logo { flex: none; display: block; margin-left: -4px; }
.brand-logo img { display: block; width: 32px; height: 32px; max-width: none; }
.brand .word { font: 750 1.35rem/1 var(--f-display); letter-spacing: -.02em; }
.brand .word em { font-style: normal; color: var(--accent-2); }
.nav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; align-items: center; }
/* Nell'intestazione del sito navigazione e pulsante del tema stanno insieme a destra (SiteHeader) e vanno a capo insieme. */
.head-tools { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-left: auto; }
.head-row .nav { margin-left: 0; }
.nav a { color: var(--ink); text-decoration: none; font-size: .94rem; }
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* Pulsanti */
.btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer;
  font: 600 .95rem/1 var(--f-body); padding: 13px 18px; border-radius: 8px; border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Etichette: testo e punto, mai il solo colore (la versione nell'intestazione della documentazione) */
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 .74rem/1 var(--f-body); padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.later { color: var(--later); background: var(--later-soft); }

/* Sezioni */
section { padding-block: var(--s-10); }
section + section { border-top: 1px solid var(--rule); }
.sec-head { display: grid; gap: 12px; margin-bottom: 36px; max-width: 760px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.two-col > .sec-head { margin-bottom: 0; }

/* Hero */
.hero { padding-block: var(--s-9) 72px; }
.hero h1 { max-width: 22ch; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.hero-text { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }

/* Comando da copiare */
.install {
  display: flex; align-items: center; gap: 10px; max-width: min(580px, 100%); min-width: 0;
  background: var(--code-bg); color: var(--code-ink); border-radius: 8px; padding: 10px 10px 10px 14px;
  font: 400 .86rem/1.3 var(--f-mono);
}
/* Il comando va a capo fra le parole a ogni larghezza: nella colonna stretta la versione, la parte che conta, non viene tagliata */
.install .cmd { flex: 1; min-width: 0; overflow-x: auto; white-space: normal; }
.install .cmd::before { content: "$ " / ""; color: var(--code-dim); }   /* testo alternativo vuoto: gli screen reader non leggono "dollaro" */
.install .w { white-space: nowrap; }   /* una parola per span: la riga va a capo solo fra le parole */
.install button {
  font: 500 .78rem/1 var(--f-body); background: transparent; color: var(--code-ink);
  border: 1px solid var(--code-line); border-radius: 6px; padding: 7px 9px; cursor: pointer;
}
.install button:focus-visible { outline-color: var(--code-key); }

/* Codice: pannello con barra (etichetta e Copia), niente finti pallini di finestra né numeri di riga */
.code-panel { background: var(--code-bg); border-radius: 10px; overflow: hidden; min-width: 0; }
/* Nel tema scuro il fondo del codice è quasi uguale alla pagina: un filo del colore delle righe ne disegna il bordo */
.install, .code-panel { outline: 1px solid var(--code-edge); outline-offset: -1px; }
.code-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--code-sep);
}
.code-bar .code-label { margin: 0; }
.code-bar .copy {
  font: 500 .76rem/1 var(--f-body); background: transparent; color: var(--code-ink); cursor: pointer;
  border: 1px solid var(--code-line); border-radius: 6px; padding: 7px 10px; min-height: 28px;
}
.code-bar .copy:focus-visible { outline: 2px solid var(--code-key); outline-offset: 2px; }
/* Il pannello ha overflow:hidden e taglierebbe il contorno esterno: il fuoco del codice sta dentro, nel colore delle parole
   chiave (8,7:1 sul fondo in chiaro, 9,4:1 in scuro) */
.code-panel .code:focus-visible { outline-color: var(--code-key); outline-offset: -2px; }
.code {
  background: var(--code-bg); color: var(--code-ink); overflow-x: auto;
  font: 400 .79rem/1.75 var(--f-mono); padding: 14px 16px 16px; margin: 0; white-space: pre;
}
/* Il code occupa tutta la larghezza del contenuto: le fasce evidenziate restano continue anche quando il codice scorre,
   e la regola globale "code" (font-size .92em) non accorcia le righe, quindi niente fessure fra le fasce */
.code code { display: block; width: max-content; min-width: 100%; font-size: inherit; }
.code .hl { display: inline-block; min-width: calc(100% + 32px); margin-inline: -16px; padding-inline: 16px; background: var(--code-hl); box-shadow: inset 2px 0 0 var(--code-key); }
.code .c { color: var(--code-dim); }
.code .k { color: var(--code-key); }
.code .t { color: var(--code-type); }
.code .s { color: var(--code-str); }
.code .a { color: var(--code-attr); }
.code-label { font: 500 .74rem/1 var(--f-mono); color: var(--code-dim); display: block; margin-bottom: 10px; }

/* Demo della home: messaggio dell'utente, nota in fondo e pulsante "Ricomincia" */
.msg { font-size: .92rem; max-width: 92%; }
.msg.user { justify-self: end; background: var(--accent-soft); color: var(--ink); padding: 10px 12px; border-radius: 10px 10px 2px 10px; }
.demo-note { font-size: .78rem; color: var(--muted); }
.reset { font: 500 .78rem/1 var(--f-body); color: var(--muted); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0; }

/* Tabelle che scorrono di lato (le tabelle della documentazione) */
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.table-scroll a:focus-visible { outline-offset: -2px; }   /* il contenitore che scorre taglierebbe il contorno a sinistra */
.ta-center { text-align: center !important; }
.ta-right { text-align: right !important; }

/* Contenuti Markdown di documentazione e blog (motore Docs.Markdown, dal 23/10/2026 qui per tutti e due, #419).
   Titoli con ancora: il "#" compare al passaggio del mouse o al fuoco. */
.heading { display: flex; align-items: baseline; gap: var(--s-2); }
.heading .anchor { color: var(--muted); text-decoration: none; opacity: 0; font-weight: 400; padding: 0 4px; }
.heading:hover .anchor, .heading .anchor:focus-visible { opacity: 1; }
.heading .anchor:hover { color: var(--accent); }

/* Avvisi (alert di GitHub): etichetta scritta, colore e bordo; il fondo non è mai --panel, quello del codice in linea.
   Important è viola come su GitHub (--accent-2: 5,41:1 su --accent-2-soft in chiaro, 6,31:1 in scuro). */
.callout {
  max-width: var(--measure); display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule); border-left: 4px solid var(--later); border-radius: 8px; background: var(--panel);
}
.callout > p, .callout > ul, .callout > ol { margin: 0; }
.callout-title { font: 700 .95rem/1.2 var(--f-body); font-variant-caps: all-small-caps; letter-spacing: .06em; color: var(--later); }
.callout-note { border-left-color: var(--later); background: var(--later-soft); border-color: var(--later-soft); }
.callout-tip { border-left-color: var(--accent); background: var(--accent-soft); border-color: var(--accent-soft); }
.callout-tip .callout-title { color: var(--accent); }
.callout-important { border-left-color: var(--accent-2); background: var(--accent-2-soft); border-color: var(--accent-2-soft); }
.callout-important .callout-title { color: var(--accent-2); }
.callout-warning { border-left-color: var(--pending); background: var(--pending-soft); border-color: var(--pending-soft); }
.callout-warning .callout-title { color: var(--pending); }
.callout-caution { border-left-color: var(--danger); background: var(--danger-soft); border-color: var(--danger-soft); }
.callout-caution .callout-title { color: var(--danger); }
.callout code { background: var(--panel); }

/* Blog (#419): indice e articolo, con il corpo reso dal motore della documentazione.
   Impaginazione della bozza scelta il 25/10/2026 (#422): nell'indice il più recente in evidenza e gli altri in schede;
   nell'articolo testata, copertina larga, colonna di lettura e indice dei paragrafi a destra, fisso mentre si scorre. */
.blog-index { display: grid; gap: var(--s-8); }
.blog-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s-5); flex-wrap: wrap; }
.blog-head .prose { max-width: var(--measure); }
.blog-head .prose p { color: var(--muted); }
.blog-rss { color: #B4410C; border-color: color-mix(in srgb, #EA580C 45%, var(--rule)); }
:root[data-theme="dark"] .blog-rss { color: #FDBA74; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .blog-rss { color: #FDBA74; } }
.blog-subtitle { color: var(--muted); font-size: 1.05rem; margin: var(--s-1) 0 0; }
.blog-back { margin: 0; font-size: .9rem; }
.blog-kicker { margin: 0 0 var(--s-2); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* La firma: iniziali in un cerchio, nome, poi data e lettura che vanno a capo insieme */
.blog-meta { color: var(--muted); font-size: .88rem; margin: var(--s-3) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.blog-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
               background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #fff; font: 700 .72rem/1 var(--f-display); letter-spacing: .02em; }
.blog-author { color: var(--ink); font-weight: 600; }
.blog-when, .blog-other { white-space: nowrap; }
/* Articolo programmato (#612), solo fuori produzione: un'etichetta che non si confonde con la data */
.blog-upcoming { white-space: nowrap; background: var(--accent-soft); color: var(--accent); border-radius: 999px;
                 padding: .1em .6em; font-size: .8rem; font-weight: 600; }

/* La copertina (24/10/2026) e la miniatura: altezza dalle dimensioni dichiarate, così la pagina non salta */
.blog-cover, .blog-thumb img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.blog-cover { border-radius: 16px; box-shadow: var(--shadow); }
.blog-thumb, .blog-picture { display: block; }
.blog-thumb img { border-radius: 10px; }

/* Indice: il più recente in evidenza, poi le schede */
.blog-feature { display: grid; gap: var(--s-6); padding: var(--s-5); background: var(--panel); border: 1px solid var(--rule); border-radius: 18px; box-shadow: var(--shadow); }
.blog-feature.has-cover { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--s-7); }
.blog-feature h2 { font-size: clamp(1.45rem, 2.6vw, 2.05rem); line-height: 1.2; margin: 0; }
.blog-feature .blog-subtitle { margin-top: var(--s-3); }
.blog-feature h2 a, .blog-item h2 a { color: var(--ink); text-decoration: none; }
.blog-feature h2 a:hover, .blog-item h2 a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.blog-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.blog-item { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-3) var(--s-3) var(--s-4); background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; }
.blog-item h2 { font-size: 1.1rem; line-height: 1.3; margin: 0; }
.blog-item .blog-subtitle { font-size: .95rem; }
.blog-follow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4) var(--s-7); align-items: center; padding: var(--s-7);
               border: 1px solid var(--rule); border-radius: 18px; background: radial-gradient(circle at 92% 0%, var(--accent-2-soft), transparent 55%), var(--panel); }
.blog-follow h2, .blog-try h2 { font-size: 1.3rem; margin: 0; }
.blog-follow p, .blog-try p { margin: var(--s-2) 0 0; }
.blog-follow p { color: var(--muted); }
.blog-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 900px) {
  .blog-feature.has-cover, .blog-follow { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .blog-list { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  /* Sul telefono le schede sono righe compatte, con la miniatura piccola a destra */
  .blog-item.has-cover { grid-template-columns: minmax(0, 1fr) 96px; column-gap: var(--s-3); }
  .blog-item.has-cover .blog-thumb { grid-column: 2; grid-row: 1; }
  .blog-item.has-cover .blog-item-text { grid-column: 1; grid-row: 1; }
  .blog-item .blog-thumb img { border-radius: 6px; }
}
@media (max-width: 560px) {
  .blog-feature { padding: var(--s-3) var(--s-3) var(--s-5); }
  .blog-follow { padding: var(--s-5); }
}

/* Articolo */
.blog-article { padding-block: var(--s-8) var(--s-9); }
.blog-article > .wrap { display: grid; gap: var(--s-6); }
.blog-header { max-width: 820px; }
.blog-header h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.12; letter-spacing: -.01em; margin: 0; }
.blog-header .blog-subtitle { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.5; margin-top: var(--s-4); }
.blog-header .blog-meta { margin-top: var(--s-5); }
.blog-header .blog-avatar { width: 40px; height: 40px; font-size: .85rem; }
.blog-other a { color: var(--accent); }
.blog-layout { display: grid; grid-template-columns: minmax(0, 700px) 240px; justify-content: space-between; gap: var(--s-9); align-items: start; margin-top: var(--s-4); }
.blog-toc { position: sticky; top: var(--s-6); font-size: .9rem; }
.blog-toc-title, .blog-toc-inline summary { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.blog-toc ol { list-style: none; margin: var(--s-3) 0 0; padding: 0 0 0 var(--s-3); border-left: 2px solid var(--rule); display: grid; gap: var(--s-2); }
.blog-toc a { color: var(--muted); text-decoration: none; line-height: 1.35; display: block; }
.blog-toc a:hover { color: var(--accent); }
.blog-top { margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.blog-top a { display: inline-flex; gap: var(--s-2); align-items: center; }
.blog-toc-inline { display: none; margin-bottom: var(--s-6); border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); }
.blog-toc-inline summary { padding: var(--s-3) var(--s-4); cursor: pointer; }
.blog-toc-inline ol { margin: 0; padding: 0 var(--s-4) var(--s-4) 2.2em; display: grid; gap: var(--s-2); }
@media (max-width: 1100px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .blog-toc { display: none; }
  .blog-toc-inline { display: block; }
}
.blog-content { display: grid; gap: var(--s-5); font-size: 1.075rem; line-height: 1.75; }
.blog-content > * { margin: 0; }
.blog-content .heading { margin-top: var(--s-6); }
.blog-content .heading h2 { font-size: 1.55rem; line-height: 1.25; margin: 0; }
.blog-content .heading h3 { font-size: 1.2rem; margin: 0; }
.blog-content code { background: var(--accent-soft); border-radius: 4px; padding: .1em .35em; }
.blog-content pre code { background: none; padding: 0; border-radius: 0; }
.blog-content .code-panel, .blog-content .table-scroll, .blog-content .callout { max-width: 100%; }
.blog-content .code-panel { font-size: .9rem; line-height: 1.6; }
.blog-content .code-label { font-family: var(--f-mono); }
@media (max-width: 560px) { .blog-content { font-size: 1.02rem; } }

/* Fondo dell'articolo: condivisione, autore, "Prova MentorAgent" */
.blog-end { display: grid; gap: var(--s-6); margin-top: var(--s-8); }
.blog-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.blog-share-label { color: var(--muted); font-size: .9rem; margin-right: var(--s-1); }
.blog-share-link { display: inline-flex; align-items: center; gap: 6px; font: 600 .85rem/1 var(--f-body); padding: 8px 12px; border-radius: 8px;
                   border: 1px solid var(--rule); background: var(--panel); color: var(--ink); text-decoration: none; cursor: pointer; }
.blog-share-link:hover { border-color: var(--accent); color: var(--accent); }
.blog-share-link .icon { width: 16px; height: 16px; }
.blog-author-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-5); border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); }
.blog-author-box .blog-avatar { width: 56px; height: 56px; font-size: 1.05rem; }
.blog-author-box p { margin: 0; color: var(--muted); }
.blog-author-box .blog-author-name { color: var(--ink); font-weight: 700; font-family: var(--f-display); }
.blog-try { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4) var(--s-7); align-items: center; padding: var(--s-7); border-radius: 18px; color: #fff;
            background: radial-gradient(circle at 90% 10%, rgba(174, 143, 255, .45), transparent 50%), linear-gradient(135deg, #0B1022, #18235A); }
.blog-try p { color: #C7D2FE; }
.blog-try .btn-primary { background: #fff; color: #0B1022; }
.blog-try .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.blog-try .btn-ghost:hover { color: #fff; border-color: #fff; }
@media (max-width: 720px) { .blog-try { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); } }

/* Domande frequenti */
.faq { display: grid; max-width: 820px; }
.faq details { border-top: 1px solid var(--rule); padding-block: 16px; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font: 600 1.02rem/1.4 var(--f-body); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+" / ""; font: 500 1.2rem/1 var(--f-mono); color: var(--accent); }
.faq details[open] summary::after { content: "−" / ""; }
.faq details > div { margin-top: 10px; color: var(--muted); max-width: 70ch; }

/* Piè di pagina */
.site-foot { border-top: 1px solid var(--rule); padding-block: 32px; font-size: .86rem; color: var(--muted); }
.site-foot .wrap { display: grid; gap: 8px; }

/* ---- Home di MentorAgent ---------------------------------------------------------------- */

/* Testo di sezione: una colonna leggibile */
.prose { display: grid; gap: var(--s-4); max-width: var(--measure); }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-2); }
/* Spazio prima del contenuto: senza, la demo delle regole e il suo alone ("codice in luce") toccavano la riga del testo */
.section-intro { max-width: var(--measure); color: var(--muted); margin-bottom: var(--s-6); }

/* Comando di installazione e avviso sotto */
.install-block { display: grid; gap: var(--s-2); }
.install-hint { font-size: .88rem; color: var(--muted); }

/* Riga delle piattaforme sotto l'hero */
.compat-line { font-size: .92rem; color: var(--muted); border-top: 1px solid var(--rule); padding-top: var(--s-5); margin-top: var(--s-8); }
.compat-line .sep { color: var(--muted); }
/* Nell'hero la riga sta in una griglia a due colonne: prende tutta la larghezza, sotto testo e codice. */
.hero .compat-line { grid-column: 1 / -1; }

/* Didascalia della demo del turno */
.turn-demo figcaption { font-size: .85rem; color: var(--muted); }
/* Screenshot del widget nella home: angoli come il pannello. */
.home-shot { margin: var(--s-6) auto 0; max-width: 400px; }
.home-shot img { display: block; width: 100%; height: auto; border-radius: 16px; }
/* La didascalia sta sotto l'alone della foto ("codice in luce"): a 8 px il fondo schiarito portava il testo grigio sotto 4,5:1 */
.home-shot figcaption { margin-top: var(--s-7); font-size: .85rem; color: var(--muted); text-align: center; }
/* "Codice in luce" (scelta dell'utente del 13/10/2026): bordo e alone nel colore d'accento, solo sulle vetrine della home.
   Pieno sul codice dell'hero e sulla foto del widget; attenuato, bordo e alone leggero, sul codice dei tre passi e sulla
   demo delle regole. La docs e gli altri blocchi di codice restano senza. */
:is(.hero .code-panel, .home-shot img) { box-shadow: var(--shine); }
:is(.home-step .code-panel, .turn-demo) { box-shadow: var(--shine-soft); }
.confirm-banner {
  background: var(--panel); border: 1px solid var(--rule); border-left: 3px solid var(--pending);
  border-radius: 10px; padding: var(--s-4); display: grid; gap: var(--s-2); box-shadow: var(--shadow);
}
.banner-title { font-weight: 600; color: var(--pending); }
.banner-message { font-size: .92rem; }
.banner-actions { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-1); }
.fake-btn, .demo-btn {
  font: 600 .88rem/1 var(--f-body); padding: 10px 16px; border-radius: 8px; border: 1px solid var(--rule);
  background: transparent; color: var(--ink); min-height: 36px;
}
.fake-btn.primary, .demo-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.demo-btn { cursor: pointer; }
.demo-btn:disabled { opacity: .45; cursor: default; }

.turn-demo { margin: 0; background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: var(--s-5); display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
.turn-steps { margin: 0; padding: 0; list-style: none; font: 400 .84rem/1.5 var(--f-mono); color: var(--muted); }
.turn-static { display: grid; gap: var(--s-4); }
.turn-case { display: grid; gap: var(--s-2); }
.turn-case-title { font-weight: 600; }
.turn-outcome-static, .turn-outcome { font-size: .92rem; color: var(--muted); }
.turn-outcome:not(:empty) { color: var(--ink); font-weight: 500; }
.turn-role { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.turn-role legend { font-size: .85rem; color: var(--muted); padding: 0; margin-bottom: var(--s-2); }
.turn-role label { display: inline-flex; gap: var(--s-2); align-items: center; min-height: 24px; cursor: pointer; }
.turn-role input { accent-color: var(--accent); }
.turn-live { display: grid; gap: var(--s-3); }
@media (prefers-reduced-motion: no-preference) {
  .turn-live .confirm-banner { transition: opacity .15s ease-out; }
}

.more-link { font-weight: 500; }

/* Schede della home ("Cosa puoi fare", "Documentazione"): titolo, una frase e il link, che apre la scheda intera.
   Niente icone né ombre: un bordo, e il colore dell'accento al passaggio o con il fuoco. */
.home-cards { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-card {
  position: relative; display: grid; gap: var(--s-2); align-content: start;
  padding: var(--s-5); border: 1px solid var(--rule); border-radius: 10px; background: var(--panel);
}
.home-card h3 a { color: var(--ink); text-decoration: none; }
/* Tutta la scheda porta al link del titolo: un solo link per scheda, con il titolo come nome */
.home-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.home-card:hover, .home-card:focus-within { border-color: var(--accent); }
.home-card:hover h3 a, .home-card h3 a:focus-visible { color: var(--accent); text-decoration: underline; }
.home-card p { color: var(--muted); font-size: .95rem; }
.home-cards.is-docs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
section.home-docs { background: var(--panel); }

/* Le icone a tratto della home (Components/Icon.razor): 20 px, nel colore del testo. */
.icon { flex: none; vertical-align: middle; }

/* Il quadro d'insieme dopo l'hero (23/10/2026; dal 24/10 la variante B di piano/M13/home-visione, scelta dall'utente).
   I sistemi a sinistra, ognuno con un tratto verso una barra comune, una freccia che entra in MentorAgent, e dall'altra
   parte una freccia verso la barra da cui parte un tratto per ogni canale. Linee e frecce sono pseudo-elementi, quindi
   decorative: ogni voce disegna il suo pezzo di barra (metà la prima e l'ultima), così l'altezza delle voci non conta.
   I titoli dei gruppi stanno sopra le voci senza occupare spazio, perché le frecce restino al centro della barra.
   Fino a 900 px tutto va in colonna: i sistemi in fila con la barra sotto, poi MentorAgent, poi i canali appesi a una
   linea verticale a sinistra. Il riquadro di MentorAgent ha il bordo blu-viola delle copertine; il nome è in gradiente
   sul fondo del pannello, oltre 4,5:1 in tutti e due i temi, e torna al colore del testo con i colori forzati. */
.vision-flow { --line: color-mix(in srgb, var(--accent) 70%, var(--paper)); padding-top: var(--s-7);
  display: grid; grid-template-columns: minmax(0, .95fr) 72px minmax(0, 1.45fr) 72px minmax(0, 1fr); align-items: center; }
.vision-group { position: relative; }
.vision-group h3 { position: absolute; bottom: calc(100% + var(--s-3)); left: 0; right: 0; margin: 0;
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.vision-in h3 { text-align: right; }
.vision-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vision-node { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); line-height: 1.3; }
.vision-badge { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; }
.vision-in .vision-badge { background: var(--accent-soft); color: var(--accent); }
.vision-out .vision-badge { background: var(--accent-2-soft); color: var(--accent-2); }
.vision-text b { display: block; font-weight: 650; font-size: .95rem; }
.vision-text small { display: block; font-size: .8rem; color: var(--muted); }
.vision-in .vision-node::after, .vision-out .vision-node::before { content: ""; position: absolute; top: 50%; width: 36px; border-top: 2px solid var(--line); }
.vision-in .vision-node::after { left: 100%; }
.vision-out .vision-node::before { right: 100%; }
.vision-in .vision-node::before, .vision-out .vision-node::after { content: ""; position: absolute; top: -7px; bottom: -7px; border-left: 2px solid var(--line); }
.vision-in .vision-node::before { left: calc(100% + 34px); }
.vision-out .vision-node::after { right: calc(100% + 34px); }
.vision-in .vision-node:first-child::before, .vision-out .vision-node:first-child::after { top: 50%; }
.vision-in .vision-node:last-child::before, .vision-out .vision-node:last-child::after { bottom: 50%; }
.vision-link { position: relative; height: 2px; background: var(--line); margin-inline: 34px 6px; }
.vision-link-out { margin-inline: 6px 34px; }
.vision-link::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 9px solid var(--line); border-right: 0; }
.vision-hub { border-radius: 26px; padding: 6px; background: linear-gradient(120deg, #1D5BD6, #6D3BDB); box-shadow: var(--shine); }
.vision-hub-in { border-radius: 21px; padding: var(--s-6) var(--s-5) var(--s-5); background: var(--panel); }
.vision-hub h3 { margin: 0; display: flex; align-items: center; justify-content: center; gap: var(--s-2); font-size: 1.45rem; }
.vision-hub h3 span { background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Il logo accanto al nome (24/10/2026, richiesta dell'utente): lo stesso PNG dell'intestazione, che va bene sui due fondi;
   il file ha un bordo trasparente, così l'emblema a 40 px resta all'altezza del nome. */
.vision-logo img { display: block; margin-block: -4px; }
.vision-lead { margin: 2px 0 var(--s-4); text-align: center; color: var(--muted); font-size: .85rem; }
.vision-hub ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vision-hub li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-weight: 600; font-size: .92rem;
  line-height: 1.25; background: linear-gradient(120deg, var(--accent-soft), var(--accent-2-soft)); }
.vision-hub li .icon { color: var(--accent-2); }
@media (forced-colors: active) { .vision-hub h3 span { background: none; color: CanvasText; } }
.vision-points { margin: var(--s-8) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-6); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vision-points h3 { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.vision-points h3 .icon { color: var(--accent); }
.vision-points p { color: var(--muted); }
.vision-more { margin-top: var(--s-6); }

/* Governance (24/10/2026): sei schede con l'icona, poi la dimostrazione del turno accanto a quello che resta nel codice
   dell'app. Fino a 900 px le schede vanno in colonna, con l'icona a sinistra del titolo. */
.gov-grid { list-style: none; margin: 0 0 var(--s-8); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.gov-card { background: var(--panel); border: 1px solid var(--rule); border-radius: 16px; padding: var(--s-5); box-shadow: var(--shadow); }
.gov-badge { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; margin-bottom: var(--s-3);
  background: linear-gradient(120deg, var(--accent-soft), var(--accent-2-soft)); color: var(--accent); }
.gov-card h3 { font-size: 1.05rem; margin: 0 0 var(--s-1); }
.gov-card p { margin: 0; color: var(--muted); font-size: .95rem; }
.gov-keep { margin: 0; padding: var(--s-1) 0 var(--s-1) var(--s-4); border-left: 3px solid var(--accent-2); color: var(--muted); }
.gov-keep strong { color: var(--ink); }
section.home-docs .home-card { background: var(--paper); }

/* Tre passi: numero, titolo e frase, poi il codice a tutta larghezza */
.home-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-7); counter-reset: home-step; max-width: 900px; }
.home-step { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); counter-increment: home-step; }
.home-step-text { display: grid; gap: var(--s-2); padding-left: calc(2rem + var(--s-4)); position: relative; }
.home-step-text::before {
  content: counter(home-step); position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  font: 650 .95rem/1 var(--f-display); color: var(--accent); background: var(--accent-soft);
}
.home-step-text p { color: var(--muted); }
.home-steps-foot { display: grid; gap: var(--s-4); margin-top: var(--s-7); max-width: 900px; }

/* Stato e roadmap: la sola lista "in programma", senza date, su due colonne di voci; il punto è solo decorativo */
.home-roadmap { margin-top: var(--s-8); }
.roadmap-col { display: grid; gap: var(--s-3); align-content: start; }
.roadmap-col ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-7); }
.roadmap-col li { position: relative; padding-left: 1.4em; }
.roadmap-col li::before { content: "" / ""; position: absolute; left: 0; top: .5em; width: .6em; height: .6em; border-radius: 50%; }
.roadmap-col.is-planned li::before { border: 2px solid var(--later); }
/* La riga sulla console in arrivo, staccata dalla lista */
.roadmap-next { margin-top: var(--s-6); }

/* Tabelle semplici (le tabelle della documentazione) */
.plain-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.plain-table th, .plain-table td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.plain-table thead th { font-size: .85rem; font-weight: 600; color: var(--muted); }
.plain-table tbody th { font-weight: 600; white-space: nowrap; }

/* Diagramma a strati */
.layers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 14rem); gap: var(--s-5); align-items: center; }
.layer-stack { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-5); }
.layer { border: 1px solid var(--rule); border-radius: 10px; padding: var(--s-3) var(--s-4); display: grid; gap: 2px; position: relative; background: var(--panel); }
.layer + .layer::before { content: "" / ""; position: absolute; left: 50%; top: calc(-1 * var(--s-5)); height: var(--s-5); border-left: 1px solid var(--rule); }
.layer.is-ours { border-color: var(--accent); background: var(--accent-soft); }
.layer-name { font-weight: 650; }
.layer-content { font-size: .88rem; color: var(--muted); }
.layer-side { border: 1px dashed var(--rule); border-radius: 10px; padding: var(--s-3) var(--s-4); display: grid; gap: 2px; }
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
.fit-list { margin: var(--s-3) 0 0; padding-left: 1.2em; display: grid; gap: var(--s-2); }

/* Stato: la versione con la data (anche nella home della documentazione) */
.release-line { font-size: 1rem; }
.subsection { display: grid; gap: var(--s-4); margin-top: var(--s-8); }
.prose p + h3 { margin-top: var(--s-4); }
:target { scroll-margin-top: var(--s-6); }

/* Pagine interne: intestazione più corta della hero */
section.page-head { padding-block: var(--s-9) var(--s-8); }
.page-head .prose { gap: var(--s-5); }
.link-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }

/* Pagine legali (Privacy, Sicurezza): testo lungo in una colonna, parti con titoli h2 più piccoli di quelli delle landing */
.legal-body { display: grid; gap: var(--s-8); }
.legal h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.legal a { overflow-wrap: anywhere; }   /* indirizzi e percorsi lunghi (/.well-known/security.txt) vanno a capo a 320px */
/* Testo della licenza e file NOTICE (/license): il file così com'è, a capo anche sul telefono, senza scorrere di lato */
.license-text {
  margin: 0; padding: var(--s-4); border: 1px solid var(--rule); border-radius: 8px;
  font: 400 .8rem/1.6 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 84ch;
}

/* Piè di pagina a colonne: tre nella documentazione, quattro sul sito (sopra i 900 px, vedi in fondo) */
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); padding-bottom: var(--s-7); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-5); }
.foot-title { font-weight: 600; color: var(--ink); margin-bottom: var(--s-2); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.foot-col a { color: var(--ink); text-decoration: none; }
.foot-col a:hover { text-decoration: underline; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); justify-content: space-between; align-items: baseline; }
.lang-switch { font-size: .9rem; }

/* Pulsante del tema (ThemeToggle e js/theme.js): 44x44 px, arriva con hidden e lo mostra lo script. Ha il bordo come il
   menu delle lingue e come su novior.it. L'icona dice dove porta il clic: la luna nel tema chiaro, il sole nel tema scuro,
   sia quando il tema è scelto sia quando segue il sistema. Il colore d'accento solo con un mouse: sul telefono resterebbe
   acceso dopo il tocco. */
.theme-toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--rule); border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:focus-visible { border-radius: 8px; }   /* la regola generale dei pulsanti lo porterebbe a 4 px */
@media (hover: hover) { .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } }
.theme-icon { display: block; }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-icon-moon { display: none; }
}
@media (forced-colors: active) { .theme-toggle { border-color: ButtonText; } }

/* Menu delle lingue nell'intestazione (LanguageMenu): mappamondo, codice della lingua e freccia; la tendina elenca le
   lingue disponibili. Un <details>: si apre anche senza JavaScript. Alto 44 px come il pulsante del tema (dal 03/10/2026,
   prima 32). */
.lang-menu { position: relative; }
.lang-menu > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; min-height: 44px;
  padding: 5px 8px; border: 1px solid var(--rule); border-radius: 8px; color: var(--ink);
  font: 600 .8rem/1 var(--f-mono); letter-spacing: .04em;
}
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary:hover, .lang-menu[open] > summary { border-color: var(--accent); color: var(--accent); }
.lang-globe { flex: none; display: block; }
.lang-chevron { flex: none; display: block; color: var(--muted); transition: transform .15s ease; }
.lang-menu[open] .lang-chevron { transform: rotate(180deg); }
.lang-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 180px; margin: 0; padding: 6px;
  list-style: none; background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow);
}
.lang-list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 8px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: .92rem;
}
.lang-list a:hover { background: var(--accent-soft); }
.lang-list a[aria-current] { font-weight: 600; }
.lang-list a[aria-current] .lang-code { color: var(--accent); }
.lang-code { font: 600 .74rem/1 var(--f-mono); color: var(--muted); letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .lang-chevron { transition: none; } }

/* Pulsante "Menu" (SiteHeader con Menu, 25/10/2026, variante A scelta dall'utente): sotto i 960 px la riga tiene solo
   il marchio e il pulsante, alto 44 px come quello del tema; il pannello si apre a tutta larghezza sotto l'intestazione,
   con le voci in righe da 48 px, poi la lingua e il tema. Un <details>, quindi funziona senza script. */
.site-head { position: relative; }
.nav-menu { display: none; }
.nav-menu > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--rule); border-radius: 8px; color: var(--ink); cursor: pointer; font: 600 .95rem/1 var(--f-body);
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu[open] > summary { border-color: var(--accent); color: var(--accent); }
@media (hover: hover) { .nav-menu > summary:hover { border-color: var(--accent); color: var(--accent); } }
.nav-menu-close, .nav-menu[open] .nav-menu-open { display: none; }
.nav-menu[open] .nav-menu-close { display: block; }
.nav-menu-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 45; padding-block: var(--s-2) var(--s-6);
  background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: var(--shadow);
  max-height: calc(100vh - 64px); overflow-y: auto;
}
.menu-nav ul { list-style: none; margin: 0; padding: 0; }
/* gap: in un flex lo spazio in testa a " ↗" (ExternalLink) sparisce; la distanza la dà il gap, uguale per NuGet e GitHub. */
.menu-nav a {
  display: flex; align-items: center; gap: var(--s-2); min-height: 48px; border-bottom: 1px solid var(--rule);
  color: var(--ink); text-decoration: none; font-size: 1.05rem; font-weight: 600;
}
.menu-nav a:hover, .menu-nav a[aria-current="page"] { color: var(--accent); }
.menu-tools { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-top: var(--s-5); }
.menu-tools .lang-switch { font-weight: 600; }
@media (max-width: 960px) {
  .site-head.has-menu .head-tools { display: none; }
  .site-head.has-menu .nav-menu { display: block; margin-left: auto; }
}
@media (forced-colors: active) { .nav-menu > summary { border-color: ButtonText; } }

/* Pagina non trovata */
.not-found { padding-block: 96px; }
.not-found .wrap { display: grid; gap: 18px; justify-items: start; }   /* allineata a intestazione e piè di pagina */
.not-found .wrap > * { max-width: 720px; }

/* ---- Modalità coming soon (Site:ComingSoon) ------------------------------------------------ */

/* A tutta altezza: intestazione e piè di pagina ridotti, il contenuto al centro dello spazio che resta */
.soon-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.soon-shell > main { flex: 1 0 auto; display: flex; flex-direction: column; }
.coming-soon {
  flex: 1 0 auto; display: grid; align-content: center; padding-block: var(--s-8);
  position: relative; isolation: isolate; overflow: hidden;
}
/* Sfondo decorativo: trama a punti e un alone al centro, sfumati verso i bordi. Solo token: segue il tema. */
.coming-soon::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 36% 44% at 50% 45%, var(--accent-soft), transparent 72%),
    radial-gradient(circle at 1px 1px, var(--rule) 1px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 72% at 50% 48%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 72% at 50% 48%, #000 30%, transparent 100%);
}
.coming-soon > .wrap { width: 100%; }
/* Una colonna centrata e breve: logo, etichetta, il nome, una riga, il link a NuGet */
.soon-center { display: grid; justify-items: center; text-align: center; gap: var(--s-5); }
/* Logo a 64 px CSS, il massimo (il PNG è di 128 px) */
.soon-logo { display: block; }
.soon-logo img { display: block; width: 64px; height: 64px; max-width: none; }
/* Il nome come titolo, con "Agent" nel viola del marchio come nell'intestazione (5,94:1 in chiaro, 7,49:1 in scuro) */
.soon-title { font-size: clamp(2.75rem, 8vw, 4.75rem); line-height: 1; font-weight: 750; letter-spacing: -.03em; }
.soon-title span { color: var(--accent-2); }
.soon-center .lead { font-size: clamp(1.15rem, 2.4vw, 1.4rem); max-width: 30ch; margin-inline: auto; }
.soon-link { font-size: 1rem; }
.soon-link a { font-weight: 600; }
/* Etichetta "Coming soon": testo e punto, nel viola del marchio (5,41:1 in chiaro, 6,31:1 in scuro) */
.soon-badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font: 600 .76rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent-2); background: var(--accent-2-soft); padding: 7px 12px 7px 10px; border-radius: 999px;
}
.soon-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
@keyframes soon-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: no-preference) {
  .soon-badge::before { animation: soon-pulse 2.4s ease-in-out 2;   /* 4,8 s: sotto i 5 secondi del criterio WCAG 2.2.2 */ }
}

/* Piè di pagina ridotto: pagine legali, riga sui cookie con la lingua, copyright */
.soon-shell .site-foot { padding-block: var(--s-6); }
.soon-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3) var(--s-6); align-items: baseline; }
.soon-foot .soon-copy { grid-column: 1 / -1; }
.soon-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.soon-links a { color: var(--ink); text-decoration: none; }
.soon-links a:hover { text-decoration: underline; }

/* Nella pagina coming soon il nome è già il titolo, con il logo grande: l'intestazione tiene solo il selettore di lingua e
   il pulsante del tema, senza filo né fondo, così la pagina resta un unico spazio. Nelle pagine legali il marchio resta. */
.soon-shell:has(.coming-soon) .site-head { border-bottom-color: transparent; background: transparent; }
.soon-shell:has(.coming-soon) .site-head .brand { display: none; }
@media (max-width: 560px) {
  .coming-soon { padding-block: var(--s-7) var(--s-8); }
  .soon-center { gap: var(--s-4); }
  .soon-foot { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 901px) {
  .foot-grid:has(> .foot-col:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .home-cards.is-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero .wrap, .two-col { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .layers, .fit { grid-template-columns: minmax(0, 1fr); }
  .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vision-flow, .vision-points, .gov-grid { grid-template-columns: minmax(0, 1fr); }
  .vision-flow { padding-top: 0; }
  .vision-group h3 { position: static; margin-bottom: var(--s-3); }
  .vision-in h3 { text-align: left; }
  .vision-in ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-bottom: 14px; }
  .vision-in .vision-node { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 10px 6px; min-height: 0; }
  .vision-in .vision-text b { font-size: .84rem; }
  .vision-in .vision-text small { font-size: .7rem; }
  .vision-in .vision-node::after { left: 50%; top: 100%; width: 0; height: 12px; margin-left: -1px; border-top: 0; border-left: 2px solid var(--line); }
  .vision-in .vision-node::before, .vision-in .vision-node:first-child::before, .vision-in .vision-node:last-child::before {
    top: calc(100% + 12px); bottom: auto; left: -5px; right: -5px; border-left: 0; border-top: 2px solid var(--line); }
  .vision-in .vision-node:first-child::before { left: 50%; }
  .vision-in .vision-node:last-child::before { right: 50%; }
  .vision-link, .vision-link-out { width: 2px; height: 28px; margin: 0 auto; }
  .vision-link::after { right: auto; left: -5px; top: auto; bottom: -2px; border: 6px solid transparent; border-top: 9px solid var(--line); border-bottom: 0; }
  .vision-hub-in { padding: var(--s-5) var(--s-3) var(--s-3); }
  .vision-hub li { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 12px 8px; }
  .vision-out { margin-top: var(--s-4); }
  .vision-out h3, .vision-out ul { padding-left: 22px; }
  .vision-out .vision-node::before { width: 22px; }
  .vision-out .vision-node::after { right: calc(100% + 20px); }
  .vision-out .vision-node:first-child::after { top: 0; }
  .gov-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: var(--s-3); padding: var(--s-4); }
  .gov-badge { margin: 0; grid-row: span 2; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  section { padding-block: var(--s-9); }
}
/* Fino a 820 px (telefoni e tablet in verticale) l'intestazione tiene solo i link essenziali (nav-keep), così resta su una
   riga; le sezioni sono nel piè di pagina. La riga può comunque andare a capo con il testo ingrandito (niente nowrap).
   Nell'intestazione del sito (SiteHeader, l'unica con .head-row) la soglia è 960 px: dal 03/10/2026 c'è anche il pulsante
   del tema, e con le voci in inglese la riga andava a capo fino a 904 px con Segoe UI; i 56 px in più coprono font di
   sistema più larghi. Se la riga va comunque a capo, navigazione e pulsante scendono insieme a destra (.head-tools).
   La docs ha la sua intestazione e i suoi limiti (docs.css), quindi resta a 820. */
@media (max-width: 820px) {
  .nav > :not(.nav-keep) { display: none; }
}
@media (max-width: 960px) {
  .head-row .nav > :not(.nav-keep) { display: none; }
}
@media (max-width: 560px) {
  .nav { gap: 12px; }
  .nav a { font-size: .88rem; }
  .wrap { padding-inline: 16px; }
  .brand { gap: 6px; }
  .brand .word { font-size: 1.15rem; }
  .site-head .head-row, .head-tools { gap: 8px 12px; }
  /* Il comando va a capo invece di scorrere: la versione, la parte importante, sta in fondo */
  .plain-table tbody th { white-space: normal; }
}
/* Logo, marchio e gli elementi dell'intestazione (Docs, NuGet, la lingua e il tema) stanno su una riga. NuGet, quando esce
   dall'intestazione, resta accanto ai pulsanti dell'hero e nel piè di pagina. */
/* Dal 03/10/2026 c'è anche il pulsante del tema, 44x44 px, quindi le soglie sono salite (misure nell'anteprima con
   Segoe UI, riga su una sola linea da 320 px in su):
   - sotto i 460 px (prima 420) NuGet esce dall'intestazione: fra 421 e 460 px non ci starebbe più;
   - sotto i 420 px il menu delle lingue perde la freccina e un po' di spazio interno: a 360 px mancava 1 px;
   - sotto i 360 px anche marchio e link si stringono e gli spazi scendono a 8 px. */
@media (max-width: 460px) {
  .nav > .nav-optional { display: none; }
}
@media (max-width: 420px) {
  .lang-menu > summary { padding-inline: 6px; gap: 4px; }
  .lang-chevron { display: none; }
}
@media (max-width: 359px) {
  .brand .word { font-size: 1.05rem; }
  .site-head .head-row, .site-head .nav, .head-tools { gap: 8px; }
  .site-head .nav a { font-size: .84rem; }
}
@media (max-width: 700px) {
  .roadmap-col ul { grid-template-columns: minmax(0, 1fr); }
  .home-cards.is-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Sul telefono le schede vanno in una colonna: dopo la regola dei 700 px, che darebbe due colonne alla documentazione */
@media (max-width: 560px) {
  .home-cards, .home-cards.is-docs { grid-template-columns: minmax(0, 1fr); }
  .home-card { padding: var(--s-4); }
}

/* Supporto e versioni (25/10/2026): schede delle versioni, tabella della finestra di supporto, linea del tempo
   dell'esempio (decorativa, solo CSS), i tre passi della sicurezza e le schede di dove chiedere. */
.support-head .wrap { display: grid; gap: var(--s-3); justify-items: start; }
.support-head h1, .support-head p { margin: 0; }
.support-head .lead { max-width: var(--measure); }
.support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.support-grid .gov-card { display: block; }
.gov-card .semver { margin: 0 0 var(--s-3); font: 700 2rem/1.2 var(--f-mono); color: var(--ink); }
.semver b { padding: 0 6px; border-radius: 6px; }
.sv-major { color: var(--accent-2); } .semver .sv-major { background: var(--accent-2-soft); }
.sv-minor { color: var(--accent); } .semver .sv-minor { background: var(--accent-soft); }
.sv-patch { color: var(--later); } .semver .sv-patch { background: var(--later-soft); }
.semver-legend { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-1) var(--s-4); margin: 0; }
.semver-legend dt { font-weight: 600; }
.semver-legend dd { margin: 0; color: var(--muted); font-size: .95rem; }
.support-packages { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.support-packages code { font-size: .8rem; }
.support-list { margin: var(--s-2) 0 0; padding-left: 1.2em; color: var(--muted); font-size: .95rem; }
.support-list li + li { margin-top: var(--s-1); }
.support-window th small { display: block; font-weight: 400; color: var(--muted); white-space: normal; }
.support-window tbody th { white-space: normal; }
.chip.fix-all { color: var(--accent); background: var(--accent-soft); }
.chip.fix-security { color: var(--later); background: var(--later-soft); }
.chip.fix-none { color: var(--muted); background: none; border: 1px solid var(--rule); }
.support-timeline { margin: var(--s-6) 0 0; padding: var(--s-5); background: var(--panel); border: 1px solid var(--rule); border-radius: 16px; }
.support-timeline figcaption { font-weight: 600; margin-bottom: var(--s-4); }
.tl-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
.tl-track { position: relative; height: 26px; border-radius: 6px; background: var(--paper); }
.tl-bar { position: absolute; top: 3px; bottom: 3px; display: flex; align-items: center; padding-inline: 8px; border-radius: 5px;
  font-size: .75rem; font-weight: 600; white-space: nowrap; overflow: hidden; }
.tl-all { color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent); }
.tl-sec { color: var(--later); background: var(--later-soft); border: 1px dashed var(--later); left: 45%; width: 30%; }
.tl-old { left: 0; width: 45%; }
.tl-new { left: 45%; right: 0; }
.tl-axis .tl-track { background: none; height: 18px; }
.tl-mark { position: absolute; transform: translateX(-50%); font-size: .75rem; color: var(--muted); white-space: nowrap; }
.tl-release { left: 45%; } .tl-end { left: 75%; }
.tl-key { display: none; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-2) 0 0; font-size: .85rem; color: var(--muted); }
.tl-key span::before { content: ""; display: inline-block; width: 14px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.tl-key-all::before { background: var(--accent-soft); border: 1px solid var(--accent); }
.tl-key-sec::before { background: var(--later-soft); border: 1px dashed var(--later); }
.support-steps { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); counter-reset: support-step; }
.support-steps li { counter-increment: support-step; }
.support-steps li::before { content: counter(support-step); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: var(--s-3);
  border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 .95rem/1 var(--f-display); }
.support-ask { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--s-5); }
@media (max-width: 900px) {
  .support-grid, .support-steps, .support-ask { grid-template-columns: minmax(0, 1fr); }
  .support-steps li { display: block; }
}
/* Sul telefono le scritte non stanno nelle barre: la legenda sotto le sostituisce. */
@media (max-width: 560px) {
  .tl-bar { font-size: 0; padding: 0; }
  .tl-row { grid-template-columns: 3.2rem minmax(0, 1fr); }
  .tl-key { display: flex; }
}
@media (forced-colors: active) { .tl-bar, .tl-key span::before { border-color: CanvasText; } }

/* "Segui gli aggiornamenti" (25/10/2026): sotto la console in arrivo, il feed RSS del blog e GitHub Watch → Releases. */
.follow-updates { margin-top: var(--s-5); max-width: 900px; padding: var(--s-4) var(--s-5); border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); }
.follow-updates h3 { margin: 0 0 var(--s-3); font-size: 1rem; }
.follow-updates ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-6); color: var(--muted); font-size: .95rem; }
.follow-updates li { display: flex; gap: var(--s-3); align-items: flex-start; }
.follow-updates .icon { color: var(--accent); margin-top: 2px; }
@media (max-width: 700px) { .follow-updates ul { grid-template-columns: minmax(0, 1fr); } }

/* Chi siamo (25/10/2026): le persone con la foto da Gravatar sopra le iniziali, il perché, i principi, cosa arriva e i contatti. */
.about-head .wrap { display: grid; gap: var(--s-3); justify-items: start; }
.about-head h1, .about-head p { margin: 0; }
.about-head h1 { max-width: 20ch; }
.about-head .lead { max-width: var(--measure); }
.about-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.about-person { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.about-avatar { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(120deg, #1D5BD6, #6D3BDB); color: #fff; font: 700 1.8rem/1 var(--f-display); letter-spacing: .02em; }   /* i colori del marchio in tutti e due i temi: bianco a contrasto pieno */
.about-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-person h3 { font-size: 1.25rem; margin: 0; }
.about-person p { margin: 0; }
.about-person .about-role { margin: 2px 0 var(--s-3); color: var(--accent); font-weight: 600; font-size: .95rem; }
.about-links { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4) !important; }
.about-why blockquote { margin: 0; padding: var(--s-5) var(--s-6); border-left: 4px solid var(--accent-2); background: var(--accent-2-soft);
  border-radius: 0 12px 12px 0; font: 600 1.25rem/1.45 var(--f-display); color: var(--ink); }
.about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.about-principles { margin-bottom: 0; }
.about-principles .more-link { margin-top: var(--s-2); }
.about-contact { margin-top: var(--s-2) !important; font-weight: 600; overflow-wrap: anywhere; }
.about-coming { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4) var(--s-7); align-items: center; max-width: 900px;
  padding: var(--s-6); border: 1px solid var(--rule); border-left: 4px solid var(--accent-2); border-radius: 12px; background: var(--panel); }
.about-coming h3 { margin: 0 0 var(--s-2); font-size: 1.15rem; }
.about-coming p { margin: 0; color: var(--muted); }
@media (max-width: 900px) {
  .about-people, .about-grid, .about-coming { grid-template-columns: minmax(0, 1fr); }
  .about-coming { justify-items: start; }
  .about-grid .gov-card > :not(.gov-badge), .about-principles .gov-card > :not(.gov-badge) { grid-column: 2; }
}
@media (max-width: 560px) {
  .about-person { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4); }
  .about-avatar { width: 72px; height: 72px; font-size: 1.4rem; }
  .about-why blockquote { padding: var(--s-4) var(--s-5); font-size: 1.1rem; }
}

/* Qualità che puoi verificare (25/10/2026): cinque fatti in una fascia, ognuno con la fonte pubblica. */
.quality-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); overflow: hidden; }
.quality-list li { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5) var(--s-4); border-left: 1px solid var(--rule); }
.quality-list li:first-child { border-left: 0; }
.quality-list h3 { margin: 0; font-size: 1rem; line-height: 1.35; }
.quality-list p { margin: 0; color: var(--muted); font-size: .9rem; }
.quality-icon { color: var(--accent); }
.quality-number { font: 700 1.9rem/1 var(--f-display); color: var(--accent-2); }
.quality-source { font-size: .9rem; font-weight: 600; text-decoration: none; }
.quality-source:hover { text-decoration: underline; }
@media (max-width: 1000px) {
  .quality-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-list li { border-left: 0; border-top: 1px solid var(--rule); }
  .quality-list li:nth-child(even) { border-left: 1px solid var(--rule); }
  .quality-list li:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 560px) {
  .quality-list { grid-template-columns: minmax(0, 1fr); }
  .quality-list li { grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--s-3); padding: var(--s-4); }
  .quality-list li:nth-child(even) { border-left: 0; }
  .quality-list li:nth-child(2) { border-top: 1px solid var(--rule); }
  .quality-list li > :not(.quality-icon, .quality-number) { grid-column: 2; }
  .quality-list .quality-icon, .quality-list .quality-number { grid-row: 1 / span 3; }
  .quality-number { font-size: 1.2rem; }
}
/* Supporto e versioni sul telefono (seconda revisione del tester, 25/10/2026): a 320 px la tabella tagliava "Per quanto";
   sotto i 560 px ogni riga diventa una scheda, con la versione in testa, poi l'etichetta e la durata. */
@media (max-width: 560px) {
  .support-window table, .support-window tbody, .support-window tr, .support-window th, .support-window td { display: block; width: 100%; }
  .support-window thead { display: none; }
  .support-window tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
  .support-window tbody th, .support-window td { border: 0; padding: 2px 0; }
  .support-window td .chip { margin-block: var(--s-1); }
}

/* Marchi ufficiali di GitHub e LinkedIn (25/10/2026, Components/Icon.razor, Brands): solo i colori che i marchi ammettono.
   GitHub nero o bianco; LinkedIn blu #0077B5 con le lettere bianche su fondo chiaro, bianco su fondo scuro. */
:root { --brand-github: #000; --brand-linkedin: #0077B5; --brand-linkedin-letters: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --brand-github: #fff; --brand-linkedin: #fff; --brand-linkedin-letters: transparent; }
}
:root[data-theme="dark"] { --brand-github: #fff; --brand-linkedin: #fff; --brand-linkedin-letters: transparent; }
.brand-github-mark { fill: var(--brand-github); }
.brand-linkedin-mark { fill: var(--brand-linkedin); }
.brand-linkedin-letters { fill: var(--brand-linkedin-letters); }
@media (forced-colors: active) {
  .brand-github-mark, .brand-linkedin-mark { fill: CanvasText; }
  .brand-linkedin-letters { fill: transparent; }
}
/* Un link con il marchio: il marchio staccato dal testo, che resta per i lettori di schermo. */
.with-brand { display: inline-flex; align-items: center; gap: var(--s-2); }