/*
  Design system di MentorAgentWeb, il sito di MentorAgent (piano/M13/home-mentoragent-spec.md).
  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" e negli attributi del codice.
  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;
  --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);
  /* 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;
    --code-bg: #060A14;
    --code-edge: #252D44;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}
: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;
  --code-bg: #060A14;
  --code-edge: #252D44;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}

*, *::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; }
[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); }
.site-head .head-row { display: flex; align-items: center; gap: 20px; padding-block: 16px; 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; }
.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 di stato: testo e punto, mai il solo colore */
.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.ok { color: var(--accent); background: var(--accent-soft); }
.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 di stato */
.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 */
.status-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.status-table th, .status-table td { padding: 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; font-weight: 400; }
.status-table td { text-align: right; width: 1%; white-space: nowrap; padding-left: 16px; }

/* 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 (piano/M13/home-mentoragent-spec.md) ------------------------------ */

/* 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); }
.section-intro { max-width: var(--measure); color: var(--muted); }

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

/* Riquadro di conferma statico e demo */
.banner-figure { margin: 0; display: grid; gap: var(--s-2); }
.banner-figure figcaption, .turn-demo figcaption { font-size: .85rem; color: var(--muted); }
.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; }
}

/* Matrice per canale: tabella sopra i 700 px, schede sotto */
.matrix-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.matrix-table caption { text-align: left; font-size: .85rem; color: var(--muted); padding-bottom: var(--s-3); }
.matrix-table th, .matrix-table td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.matrix-table thead th { font-weight: 600; font-size: .85rem; }
.matrix-table tbody th { font-weight: 600; width: 22%; }
.matrix-cards { display: none; }
.matrix-cards-caption { font-size: .85rem; color: var(--muted); margin-bottom: var(--s-3); }
.matrix-card { margin: 0 0 var(--s-4); padding: var(--s-4); border: 1px solid var(--rule); border-radius: 10px; display: grid; gap: var(--s-2); }
.matrix-card dd { margin: 0; display: grid; gap: 2px; }
.matrix-channel { font-weight: 600; }
.matrix-k { font-size: .78rem; color: var(--muted); }
.cell { display: inline-flex; gap: var(--s-2); align-items: flex-start; }
.icon { flex: none; margin-top: .2em; }
.cell-runs .icon { color: var(--accent); }
.cell-role .icon { color: var(--later); }
.cell-confirm .icon { color: var(--pending); }
.cell-blocked .icon { color: var(--muted); }

.governance-grid { margin-top: var(--s-7); }
.good-to-know { display: grid; gap: var(--s-3); max-width: var(--measure); margin-top: var(--s-7); }
.good-to-know h3 { margin-bottom: var(--s-1); }
.good-to-know ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-2); }
.aside-ref { font-size: .9rem; color: var(--muted); max-width: var(--measure); }

/* Funzioni: righe, non schede */
.feature-rows { display: grid; gap: var(--s-7); }
.feature-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-6); align-items: start; padding-top: var(--s-6); border-top: 1px solid var(--rule); }
.feature-text { display: grid; gap: var(--s-2); }
.feature-text p { color: var(--muted); }
.also { max-width: var(--measure); color: var(--muted); margin-top: var(--s-6); }

/* Tabelle semplici (pacchetti, requisiti) */
.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; }

/* Compatibilità e diagramma a strati */
.compat-note { border: 1px solid var(--pending); background: var(--pending-soft); border-radius: 10px; padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-2); max-width: var(--measure); }
.compat-title { font-weight: 650; color: var(--pending); }
.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, limiti, requisiti */
.release-line { font-size: 1rem; }
.status-legend { font-size: .85rem; color: var(--muted); margin-top: var(--s-2); }
.limit-list { margin: 0; padding-left: 1.4em; display: grid; gap: var(--s-3); max-width: var(--measure); }
.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; passi dell'Avvio rapido con codice fino a 900px */
section.page-head { padding-block: var(--s-9) var(--s-8); }
.page-head .prose { gap: var(--s-5); }
.qs-step { gap: var(--s-5); }
.qs-step > .code-panel, .qs-alternatives { max-width: 900px; }
.qs-alternatives details > .stack { margin-top: var(--s-4); color: var(--ink); max-width: none; }
.qs-alternatives details > .stack > p { max-width: var(--measure); }
.link-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.prose .link-list { padding-left: 0; }   /* .prose ul aggiunge il rientro dei pallini, che qui non ci sono */

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

/* Piè di pagina a colonne */
.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; }

/* 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. */
.lang-menu { position: relative; }
.lang-menu > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; min-height: 32px;
  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; } }

/* 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,
   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 (max-width: 900px) {
  .hero .wrap, .two-col { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .feature-row, .layers, .fit { grid-template-columns: minmax(0, 1fr); }
  .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). */
@media (max-width: 820px) {
  .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 { 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 tre link chiedono circa 362 px (in italiano): sotto i 420 px NuGet esce dall'intestazione, e resta nel
   pulsante dell'hero e nel piè di pagina. Sotto i 360 px anche marchio e link si stringono: a 320 px la riga ne usa 264 su 288 (misurati con Segoe UI). */
@media (max-width: 420px) {
  .nav > .nav-optional { display: none; }
}
@media (max-width: 359px) {
  .brand .word { font-size: 1.05rem; }
  .site-head .head-row, .site-head .nav { gap: 10px; }
  .site-head .nav a { font-size: .84rem; }
}
@media (max-width: 700px) {
  .matrix-table { display: none; }
  .matrix-cards { display: block; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}