/* ==========================================================================
   Trama Network — foglio di stile del sito
   Indice:
     1. Font
     2. Token (custom properties)
     3. Tema scuro
     4. Reset
     5. Tipografia
     6. Layout
     7. Componenti — skip link, header, nav, lingua, tema
     8. Componenti — pulsanti, codice, callout
     9. Componenti — footer, pagina radice
     9b. Hero e rack (l'elemento firma, §9.3)
     9c. Home — modello, funzionalità, galleria, note, demo, chiusura
     9d. Installazione — indice, passi, tabelle, comandi
    10. Utility
    11. Stampa
   ========================================================================== */


/* 1. Font ----------------------------------------------------------------- */

/* Archivo variabile: assi wght 100–900 e wdth 62–125. Subset latin. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-variable.woff2") format("woff2-variations"),
       url("../fonts/archivo-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* 2. Token ---------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Colori (§9.2). Contrasti verificati AA:
     ink/paper 15.6:1 · ink-2/paper 6.9:1 · cable/paper 5.3:1 · bianco/cable 5.8:1 */
  --ink: #16202B;
  --ink-2: #4A5868;          /* testo secondario */
  --paper: #F3F5F8;
  --panel: #FFFFFF;
  --rule: #D5DCE4;
  --rule-strong: #B4BFCB;    /* bordi di controlli interattivi (≥3:1 su panel non richiesto, solo decorativo) */
  --cable: #1565C0;
  --cable-hover: #0F4F99;
  --on-cable: #FFFFFF;       /* testo sopra --cable */
  --label: #F2C230;
  --on-label: #16202B;       /* testo sopra --label, sempre scuro */

  /* Stati dei callout: usati solo per bordo e icona */
  --note: var(--cable);
  --warning: #B36B00;
  --danger: #C62828;
  --danger-bg: #FDECEC;

  /* Blocchi di codice: scuri in entrambi i temi */
  --code-bg: #16202B;
  --code-ink: #E6EBF1;
  --code-dim: #8D9AA8;       /* prompt e commenti: 5.6:1 su code-bg */
  --code-rule: #2E3843;

  /* Tipografia */
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --stretch-head: 88%;
  --lh-body: 1.6;
  --lh-head: 1.15;

  /* Scala modulare 1.25, base 17px */
  --fs--2: 0.75rem;
  --fs--1: 0.875rem;
  --fs-0: 1.0625rem;
  --fs-1: 1.25rem;
  --fs-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.5625rem);
  --fs-3: clamp(1.625rem, 1.35rem + 1.3vw, 1.953rem);
  --fs-4: clamp(1.95rem, 1.5rem + 2.1vw, 2.441rem);
  --fs-5: clamp(2.25rem, 1.6rem + 3vw, 3.052rem);

  /* Spaziature, base 4px */
  --s-1: 0.25rem;   /*  4 */
  --s-2: 0.5rem;    /*  8 */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-5: 1.5rem;    /* 24 */
  --s-6: 2rem;      /* 32 */
  --s-7: 3rem;      /* 48 */
  --s-8: 4rem;      /* 64 */
  --s-9: 6rem;      /* 96 */

  /* Raggi gerarchici (§9.2) */
  --r-sm: 2px;      /* input, tag */
  --r-md: 6px;      /* pulsanti, codice */
  --r-lg: 10px;     /* cornici screenshot */

  /* Layout */
  --container: 75rem;       /* 1200px */
  --measure: 68ch;
  --gutter: var(--s-4);
  --header-h: 3.75rem;

  --ease: 120ms ease-out;

  /* Rack dell'hero: questi colori si usano SOLO dentro l'SVG (§9.2) */
  --rack-body: #FFFFFF;
  --rack-rail: #E3E8EE;
  --rack-line: #9AA7B5;
  --rack-hole: #B4BFCB;
  --rack-face: #EEF2F6;
  --rack-edge: #16202B;
  --rack-port: #2A3540;
  --rack-bay: #DCE2E9;
  --rack-led: #2FA35A;
  --rack-led-off: #C3CCD6;
  --wire-green: #2E9E5B;
  --wire-orange: #E07B24;
  --wire-red: #D64545;
}


/* 3. Tema scuro ----------------------------------------------------------- */
/* Segue il sistema; il toggle forza data-theme="light|dark" su <html>. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #E6EBF1;
    --ink-2: #A5B1BE;
    --paper: #151B22;
    --panel: #1D252E;
    --rule: #2E3843;
    --rule-strong: #46525F;
    --cable: #5B9BE6;
    --cable-hover: #85B6EE;
    --on-cable: #0E141A;      /* il bianco su #5B9BE6 non passa AA */
    --warning: #E0A23A;
    --danger: #EF6B6B;
    --danger-bg: #2A1C1F;
    --code-bg: #0E141A;
    --code-rule: #2E3843;
    --rack-body: #1D252E;
    --rack-rail: #2A343F;
    --rack-line: #5A6876;
    --rack-hole: #11171D;
    --rack-face: #27313C;
    --rack-edge: #8C9AA9;
    --rack-port: #0B1015;
    --rack-bay: #34404C;
    --rack-led: #4CC979;
    --rack-led-off: #3A4654;
    --wire-green: #3DBB6E;
    --wire-orange: #F08C3A;
    --wire-red: #E66060;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #E6EBF1;
  --ink-2: #A5B1BE;
  --paper: #151B22;
  --panel: #1D252E;
  --rule: #2E3843;
  --rule-strong: #46525F;
  --cable: #5B9BE6;
  --cable-hover: #85B6EE;
  --on-cable: #0E141A;
  --warning: #E0A23A;
  --danger: #EF6B6B;
  --danger-bg: #2A1C1F;
  --code-bg: #0E141A;
  --code-rule: #2E3843;
  --rack-body: #1D252E;
  --rack-rail: #2A343F;
  --rack-line: #5A6876;
  --rack-hole: #11171D;
  --rack-face: #27313C;
  --rack-edge: #8C9AA9;
  --rack-port: #0B1015;
  --rack-bay: #34404C;
  --rack-led: #4CC979;
  --rack-led-off: #3A4654;
  --wire-green: #3DBB6E;
  --wire-orange: #F08C3A;
  --wire-red: #E66060;
}


/* 4. Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, pre) { margin: 0; }

/* :where() azzera la specificità: le classi dei componenti vincono sempre sul reset */
:where(ul[class], ol[class]) { margin: 0; padding: 0; list-style: none; }

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }

input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

[hidden] { display: none !important; }


/* 5. Tipografia ----------------------------------------------------------- */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  font-weight: 400;
  line-height: var(--lh-body);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-stretch: var(--stretch-head);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-5); font-weight: 720; }
h2 { font-size: var(--fs-4); font-weight: 700; }
h3 { font-size: var(--fs-1); font-weight: 650; }
h4 { font-size: var(--fs-0); font-weight: 650; }

p, li { text-wrap: pretty; }

a {
  color: var(--cable);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--ease), text-decoration-color var(--ease);
}
a:hover { color: var(--cable-hover); text-decoration-thickness: 2px; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Codice in linea */
:not(pre) > code {
  padding: 0.1em 0.35em;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--panel);
  overflow-wrap: anywhere;
}

/* Codice dentro titoli e titoli dei callout: stessa scala, senza riquadro */
:is(h1, h2, h3, h4, .callout__title) code {
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.88em;
  font-weight: 500;
}

strong { font-weight: 650; }

::selection { background: var(--label); color: var(--on-label); }

:focus-visible {
  outline: 3px solid var(--label);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Sul giallo serve un bordo scuro interno per i fondi chiari */
:root:not([data-theme="dark"]) :focus-visible { box-shadow: 0 0 0 1px var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :focus-visible { box-shadow: none; }
}


/* 6. Layout --------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 48em) {
  :root { --gutter: var(--s-6); }
}

.prose > * + * { margin-top: var(--s-4); }
.prose { max-width: var(--measure); }

.section { padding-block: var(--s-7); }
@media (min-width: 64em) {
  .section { padding-block: var(--s-8); }
}

.section__title { margin-bottom: var(--s-5); max-width: 24ch; }
.section__lead { max-width: var(--measure); color: var(--ink-2); font-size: var(--fs-1); }


/* 7. Componenti — skip link, header, nav, lingua, tema -------------------- */

main { flex: 1 0 auto; }
main:focus { outline: none; }

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  background: var(--label);
  color: var(--on-label);
  font-weight: 650;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.site-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

/* Sticky solo quando il menu mobile è compatto (JS attivo) o su schermi larghi */
.js .site-header { position: sticky; top: 0; }
@media (min-width: 48em) {
  .site-header { position: sticky; top: 0; }
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  min-height: var(--header-h);
  padding-block: var(--s-2);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}

/* Logo ufficiale inline: i fill del testo seguono il tema */
.logo { width: auto; height: 2.25rem; }
.logo__name { fill: var(--ink); }
.logo__sub  { fill: var(--ink-2); }

/* Senza JS il menu è sempre visibile e va a capo sotto il logo */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  width: 100%;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-5);
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding-block: var(--s-2);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.site-nav__link:hover { color: var(--cable); }
.site-nav__link[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--cable);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.site-nav__tools {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* Icona "si apre in una nuova scheda" */
.icon-ext {
  display: inline-block;
  flex: none;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.2em;
  vertical-align: baseline;
  opacity: 0.7;
}

/* Selettore lingua: IT | EN */
.lang-switch,
.lang-switch__list {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 500;
}
.lang-switch li + li::before {
  content: "|";
  padding-inline: var(--s-1);
  color: var(--rule-strong);
}
.lang-switch a {
  display: inline-block;
  padding: var(--s-1) var(--s-1);
  color: var(--ink-2);
  text-decoration: none;
}
.lang-switch a:hover { color: var(--cable); }
.lang-switch a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }

/* Pulsanti icona dell'header (tema, menu) */
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--ink);
  transition: border-color var(--ease), color var(--ease);
}
.icon-button:hover { border-color: var(--cable); color: var(--cable); }
.icon-button svg { width: 1.25rem; height: 1.25rem; }

/* Toggle tema: mostra l'icona del tema verso cui si passa */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Con JS, su mobile il menu si chiude dietro il pulsante */
@media (max-width: 47.99em) {
  .js .site-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding-block: var(--s-2) var(--s-4);
  }
  .js .site-nav.is-open { display: flex; }
  .js .site-nav__list { flex-direction: column; gap: 0; }
}

@media (min-width: 48em) {
  .site-header__inner { flex-wrap: nowrap; }
  .site-nav { width: auto; flex-wrap: nowrap; gap: var(--s-6); }
  .nav-toggle { display: none !important; }
}


/* 8. Componenti — pulsanti, codice, callout ------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
}
.button:active { transform: translateY(1px); }

.button--primary { background: var(--cable); color: var(--on-cable); }
.button--primary:hover { background: var(--cable-hover); color: var(--on-cable); }

.button--secondary { border-color: var(--rule-strong); background: var(--panel); color: var(--ink); }
.button--secondary:hover { border-color: var(--cable); color: var(--cable); }

.button .icon-ext { opacity: 0.85; }

.button-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Blocchi di codice: sfondo scuro anche nel tema chiaro */
.code {
  position: relative;
  border: 1px solid var(--code-rule);
  border-radius: var(--r-md);
  background: var(--code-bg);
  color: var(--code-ink);
}
.code pre {
  overflow-x: auto;
  padding: var(--s-4) var(--s-5);
  padding-right: 5.5rem;        /* spazio per il pulsante Copia */
  font-size: var(--fs--1);
  line-height: 1.7;
  tab-size: 2;
}
.code code { font-size: inherit; }
.code .p { color: var(--code-dim); user-select: none; -webkit-user-select: none; }  /* prompt $ */
.code .c { color: var(--code-dim); }                                                  /* commenti */

.copy-button {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--code-rule);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--code-ink);
  font-size: var(--fs--2);
  font-weight: 600;
  transition: border-color var(--ease), background-color var(--ease), color var(--ease);
}
.copy-button:hover { border-color: var(--code-dim); }

/* Schermi stretti: il pulsante ha una sua fascia in alto, così non copre il comando */
@media (max-width: 47.99em) {
  .code pre { padding: 2.5rem var(--s-4) var(--s-4); }
  .copy-button { background: var(--code-bg); }
}
.copy-button.is-copied { border-color: var(--label); background: var(--label); color: var(--on-label); }

/* Callout: nota, attenzione, pericolo */
.callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-1) var(--s-3);
  max-width: var(--measure);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--callout-color, var(--note));
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--panel);
}
.callout__icon { width: 1.25rem; height: 1.25rem; margin-top: 0.2em; color: var(--callout-color, var(--note)); }
.callout__title { font-size: var(--fs-0); font-weight: 700; font-stretch: var(--stretch-head); }
.callout__body { grid-column: 2; }
.callout__body > * + * { margin-top: var(--s-2); }

.callout--note    { --callout-color: var(--note); }
.callout--warning { --callout-color: var(--warning); }
.callout--danger .callout__title { color: var(--danger); }
.callout--danger  {
  --callout-color: var(--danger);
  border-color: var(--danger);
  border-left-width: 8px;
  background: var(--danger-bg);
}


/* 9. Componenti — footer, pagina radice ----------------------------------- */

.site-footer {
  margin-top: var(--s-7);
  border-top: 1px solid var(--rule);
  background: var(--panel);
  color: var(--ink-2);
  font-size: var(--fs--1);
}

.site-footer__inner {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-7);
}

.site-footer__legal > * + * { margin-top: var(--s-2); }

.site-footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}
.site-footer__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--ink);
}
.site-footer__list a:hover { color: var(--cable); }

@media (min-width: 48em) {
  .site-footer__inner {
    grid-template-columns: 1fr auto auto;
    align-items: start;
    gap: var(--s-7);
  }
}

/* Radice: scelta della lingua (visibile senza JS o prima del redirect) */
.lang-gate {
  display: grid;
  place-content: center;
  justify-items: start;
  gap: var(--s-5);
  min-height: 100vh;
  padding: var(--gutter);
}
.lang-gate .logo { height: 3rem; }


/* 9b. Hero e rack -------------------------------------------------------- */

.hero { padding-block: var(--s-7) var(--s-8); overflow-x: clip; }

.hero__inner {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

.hero__title {
  max-width: 13ch;
  font-size: clamp(2.375rem, 1.5rem + 3.8vw, 3.75rem);
  font-weight: 720;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.hero__lead {
  max-width: 34em;
  margin-top: var(--s-5);
  color: var(--ink-2);
  font-size: var(--fs-1);
  line-height: 1.5;
}

.hero__actions { margin-top: var(--s-6); }

.hero__note {
  margin-top: var(--s-4);
  color: var(--ink-2);
  font-size: var(--fs--1);
}

.hero__figure {
  width: 100%;
  max-width: 24rem;
}

/* Telefono: la fascia sinistra dell'SVG (lo spazio del cavo) esce dallo schermo,
   così il rack resta grande e le U leggibili; il cavo continua oltre il bordo */
@media (max-width: 47.99em) {
  .hero__figure {
    width: calc(100% + 6.5rem);
    max-width: 30rem;
    margin-left: -6.5rem;
  }
}

@media (min-width: 48em) and (max-width: 63.99em) {
  .hero__figure { max-width: 30rem; }
}

@media (min-width: 64em) {
  .hero { padding-block: var(--s-8) var(--s-9); }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  /* Il fascio di sinistra dell'SVG è lo spazio del cavo: sconfina verso il testo */
  .hero__figure { max-width: 37rem; justify-self: end; margin-left: -5rem; }
}

/* Rack: tutti i colori arrivano dai token, così segue il tema */
.rack { width: 100%; height: auto; overflow: visible; }

.rack__frame > rect:first-child { fill: var(--rack-body); stroke: var(--rack-edge); stroke-width: 1.5; }
.rack__foot  { fill: var(--rack-edge); }
.rack__rail  { fill: var(--rack-rail); stroke: var(--rack-line); stroke-width: 0.75; }
.rack__hole  { fill: var(--rack-hole); }
.rack__u text {
  fill: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 8.5px;
  text-anchor: middle;
}

.rack__face   { fill: var(--rack-face); stroke: var(--rack-edge); stroke-width: 1; }
.rack__port   { fill: var(--rack-port); }
.rack__tag    { fill: var(--rack-body); stroke: var(--rack-line); stroke-width: 0.75; }
.rack__screw  { fill: var(--rack-line); }
.rack__slot   { fill: var(--rack-port); }
.rack__brush  { stroke: var(--rack-line); stroke-width: 6; stroke-dasharray: 0.8 1.6; }
.rack__plate  { fill: var(--rack-port); }
.rack__status { fill: var(--rack-led); }
.rack__status--off, .rack__led { fill: var(--rack-led-off); }
.rack__led.is-on { fill: var(--rack-led); }
.rack__button { fill: none; stroke: var(--rack-edge); stroke-width: 1; }
.rack__bay    { fill: var(--rack-bay); stroke: var(--rack-edge); stroke-width: 0.6; }
.rack__bay-led { fill: var(--rack-led); }
.rack__switch { fill: var(--wire-red); }
.rack__display { fill: var(--rack-port); }
.rack__display-text { stroke: var(--rack-led); stroke-width: 1.6; }
.rack__vent   { stroke: var(--rack-line); stroke-width: 2.4; }

.rack__free rect { fill: none; stroke: var(--rack-line); stroke-width: 0.9; stroke-dasharray: 4 3; }

.rack__patch { --wire: var(--wire-green); }
.rack__patch--orange { --wire: var(--wire-orange); }
.rack__patch--red    { --wire: var(--wire-red); }
.rack__patch path { fill: none; stroke: var(--wire); stroke-width: 2.6; stroke-linecap: round; }
.rack__patch rect { fill: var(--wire); }

.rack__plug, .rack__end { fill: var(--cable); }
.rack__wire {
  fill: none;
  stroke: var(--cable);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* L'unico momento animato del sito: il cavo si posa, poi i LED si accendono in fila */
@media (prefers-reduced-motion: no-preference) {
  .rack__wire { animation: rack-lay 1.2s cubic-bezier(0.45, 0, 0.2, 1) 0.15s both; }
  .rack__end { animation: rack-show 150ms ease-out 1.3s both; }
  .rack__led.is-on { animation: rack-led 1ms step-end both; }
  .rack__leds > :nth-child(1)  { animation-delay: 1.05s; }
  .rack__leds > :nth-child(2)  { animation-delay: 1.13s; }
  .rack__leds > :nth-child(4)  { animation-delay: 1.21s; }
  .rack__leds > :nth-child(5)  { animation-delay: 1.29s; }
  .rack__leds > :nth-child(7)  { animation-delay: 1.37s; }
  .rack__leds > :nth-child(8)  { animation-delay: 1.45s; }
  .rack__leds > :nth-child(13) { animation-delay: 1.53s; }
  .rack__leds > :nth-child(14) { animation-delay: 1.61s; }
  .rack__leds > :nth-child(25) { animation-delay: 1.69s; }
}

@keyframes rack-lay { from { stroke-dashoffset: 1; } }
@keyframes rack-led { from { fill: var(--rack-led-off); } }
@keyframes rack-show { from { opacity: 0; } }


/* 9c. Home ---------------------------------------------------------------- */

/* Modello: sei tappe collegate dal cavo blu (unico ritorno del cavo, §9.3).
   Mobile: verticale con il cavo a sinistra. Desktop: orizzontale. */
.model__steps {
  --node: 2.25rem;
  position: relative;
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-7);
  counter-reset: none;
}
.model__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) 1fr;
  column-gap: var(--s-4);
  align-items: start;
  align-content: start;
}
/* Il cavo: un tratto da ogni nodo al successivo, così si ferma sull'ultimo */
.model__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2);
  bottom: calc(-1 * var(--s-5) - var(--node) / 2);
  left: calc(var(--node) / 2 - 1.5px);
  width: 3px;
  background: var(--cable);
}
/* Il nodo è una "porta": quadrato con bordo, come un keystone */
.model__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  grid-row: span 2;
  border: 2px solid var(--cable);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 500;
}
.model__name { font-size: var(--fs-1); padding-top: 0.35rem; }
.model__text { margin-top: var(--s-1); color: var(--ink-2); font-size: var(--fs--1); max-width: 40ch; }

@media (min-width: 64em) {
  .model__steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-5); }
  .model__step:not(:last-child)::before {
    top: calc(var(--node) / 2 - 1.5px);
    bottom: auto;
    left: calc(var(--node) / 2);
    right: calc(-1 * var(--s-5));
    width: auto;
    height: 3px;
  }
  .model__step { grid-template-columns: 1fr; row-gap: var(--s-3); }
  .model__node { grid-row: auto; }
  .model__name { padding-top: 0; }
}

/* Funzionalità: righe alterne testo + dettaglio di schermata, poi elenco a due colonne */
.feature-row {
  display: grid;
  gap: var(--s-5);
  align-items: center;
  margin-top: var(--s-7);
}
.feature-row__title { font-size: var(--fs-3); }
.feature-row__text p { margin-top: var(--s-4); max-width: 46ch; color: var(--ink-2); font-size: var(--fs-1); line-height: 1.55; }

@media (min-width: 64em) {
  .feature-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); margin-top: var(--s-8); }
  .feature-row:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .feature-row:nth-of-type(even) .feature-row__text { order: 2; }
}

/* Dettaglio: la schermata intera ingrandita e ritagliata sulla parte che conta */
.shot-detail {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--panel);
}
.shot-detail img { position: absolute; max-width: none; height: auto; }
.shot-detail--rack img     { width: 190%; left: -32%; top: -10%; }
.shot-detail--topology img { width: 160%; left: -26%; top: -12%; }

.features__list {
  display: grid;
  gap: var(--s-6) var(--s-8);
  margin-top: var(--s-9);
}
@media (min-width: 48em) {
  .features__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.features__item {
  display: grid;
  align-content: start;
  grid-template-columns: 1.75rem 1fr;
  column-gap: var(--s-4);
}
.features__icon { width: 1.75rem; height: 1.75rem; grid-row: span 2; color: var(--cable); }
.features__title { font-size: var(--fs-1); }
.features__text { margin-top: var(--s-2); color: var(--ink-2); max-width: 52ch; }

/* Cornice delle schermate: superficie, bordo 1px e una sottile barra con il percorso nell'app */
.shot-frame {
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--panel);
}
.shot-frame__bar {
  display: flex;
  align-items: center;
  height: 1.75rem;
  padding-inline: var(--s-3);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--fs--2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nel tema scuro le schermate (chiare) si attenuano un poco per non abbagliare */
:root[data-theme="dark"] .shot-frame img,
:root[data-theme="dark"] .shot-detail img,
:root[data-theme="dark"] .gallery__thumb img { filter: brightness(0.88); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot-frame img,
  :root:not([data-theme="light"]) .shot-detail img,
  :root:not([data-theme="light"]) .gallery__thumb img { filter: brightness(0.88); }
}

/* Galleria */
.gallery__stage { margin-top: var(--s-6); }
.gallery__open { display: block; cursor: zoom-in; }
.gallery__img { width: 100%; }
.gallery__caption { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--fs--1); }

.gallery__thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(8.5rem, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-bottom: var(--s-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.gallery__thumb {
  display: block;
  padding: var(--s-1);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--ink-2);
  font-size: var(--fs--1);
  text-decoration: none;
  transition: border-color var(--ease), color var(--ease);
}
.gallery__thumb img { width: 100%; border-radius: var(--r-sm); }
.gallery__thumb-label { display: block; padding: var(--s-1) var(--s-1) 0; }
.gallery__thumb:hover { border-color: var(--cable); color: var(--ink); }
.gallery__thumb[aria-current="true"] { border-color: var(--cable); color: var(--ink); box-shadow: inset 0 0 0 1px var(--cable); }

/* Lightbox: <dialog> nativo */
.lightbox {
  width: min(96vw, 110rem);
  max-height: 96vh;
  padding: 0;               /* spazi sui figli: un clic sul <dialog> stesso è un clic sullo sfondo */
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--panel);
  color: var(--ink);
}
.lightbox::backdrop { background: rgb(14 20 26 / 0.85); }
.lightbox__figure { padding: var(--s-4) var(--s-4) 0; }
.lightbox__img { width: 100%; max-height: calc(96vh - 9rem); object-fit: contain; border-radius: var(--r-md); }
.lightbox__caption { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--fs--1); }
.lightbox__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-4); }
.lightbox__count { color: var(--ink-2); font-size: var(--fs--1); }
.lightbox__close { margin-left: auto; }

/* Note informative: colonne di testo, separate solo da spazio */
.notes__grid { display: grid; gap: var(--s-6) var(--s-8); margin-top: var(--s-6); }
@media (min-width: 48em) { .notes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .notes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.notes__title { font-size: var(--fs-1); }
.notes__item > p { margin-top: var(--s-2); color: var(--ink-2); }
.notes__item--stack { grid-row: span 2; }
@media (min-width: 64em) { .notes__item--stack { grid-column: 3; grid-row: 1 / span 2; } }
.notes__stack { margin-top: var(--s-3); }
.notes__stack li { padding-block: var(--s-2); border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.notes__stack li:first-child { border-top: 1px solid var(--rule); }

/* Demo: l'unico punto con il giallo "etichetta passacavo" */
.demo__box {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-6) var(--s-4) var(--s-6) var(--s-5);
  border: 1px solid var(--rule);
  border-left: 8px solid var(--label);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--panel);
}
@media (min-width: 64em) {
  .demo__box { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s-8); padding: var(--s-7); }
  .demo__intro, .demo__info { grid-column: 1; }
  .demo__creds { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  .demo__action { grid-column: 1; }
}
.demo__title { font-size: var(--fs-4); }
.demo__intro p { margin-top: var(--s-3); font-size: var(--fs-1); color: var(--ink-2); }
.demo__info > * + * { margin-top: var(--s-3); }
.demo__info { color: var(--ink-2); }
.demo__info strong { color: var(--ink); }

.demo__creds { border-top: 1px solid var(--rule); }
.demo__row {
  display: grid;
  gap: var(--s-1) var(--s-3);
  align-items: center;
  min-height: 3.25rem;
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--rule);
}
.demo__row dt { color: var(--ink-2); font-size: var(--fs--1); }
.demo__row dd { margin: 0; min-width: 0; }
@media (min-width: 30em) {
  .demo__row { grid-template-columns: 6.5rem 1fr; }
}

/* Credenziale copiabile: il pulsante "Copia" qui è in linea, non sul codice scuro */
.credential { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.credential code { font-size: var(--fs-0); padding: 0.15em 0.45em; white-space: nowrap; }
.credential .copy-button {
  position: static;
  font-size: var(--fs--1);
  border-color: var(--rule-strong);
  color: var(--ink);
}
.credential .copy-button:hover { border-color: var(--cable); color: var(--cable); }
.credential .copy-button.is-copied { border-color: var(--label); background: var(--label); color: var(--on-label); }

/* Chiusura: l'unico testo centrato */
.closing__inner { display: grid; justify-items: center; gap: var(--s-5); text-align: center; }
.closing__title { max-width: 34ch; font-size: var(--fs-3); }


/* 9d. Installazione ------------------------------------------------------ */

.docs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* senza, i <pre> lunghi allargano la colonna */
  gap: var(--s-6);
  padding-block: var(--s-6) var(--s-8);
}
@media (min-width: 64em) {
  .docs { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--s-8); padding-top: var(--s-8); }
}

/* Indice: in cima su mobile, colonna sticky su desktop */
.toc__inner {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--panel);
}
.toc__title { font-size: var(--fs-0); font-weight: 650; }
.toc__list { margin-top: var(--s-2); }
.toc__list a {
  display: block;
  padding-block: var(--s-1);
  color: var(--ink);
  text-decoration: none;
}
.toc__list a:hover { color: var(--cable); text-decoration: underline; }
@media (min-width: 64em) {
  .toc__inner {
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
    padding: 0 0 0 var(--s-4);
    border: 0;
    border-left: 1px solid var(--rule);
    border-radius: 0;
    background: none;
  }
}

.docs__content { min-width: 0; max-width: 50rem; }
.docs__header h1 { font-size: var(--fs-5); }
.docs__lead { margin-top: var(--s-4); max-width: var(--measure); color: var(--ink-2); font-size: var(--fs-1); line-height: 1.5; }

.docs__section { margin-top: var(--s-8); }
.docs__section > h2 { font-size: var(--fs-4); margin-bottom: var(--s-5); }
.docs__section > h3 { margin-top: var(--s-7); font-size: var(--fs-2); }
.docs__section > * + * { margin-top: var(--s-5); }
.docs__section > h2 + * { margin-top: 0; }
.docs__section > h3 + p { margin-top: var(--s-3); }
.docs__section p { max-width: var(--measure); }

.docs__list { padding-left: 1.25rem; list-style: disc; }
.docs__list li::marker { color: var(--ink-2); }
.docs__list li + li { margin-top: var(--s-2); }

.docs__sublist { padding-left: 1.5rem; list-style: decimal; }
.docs__sublist > li + li { margin-top: var(--s-5); }
.docs__sublist > li > * + * { margin-top: var(--s-3); }
.docs__sublist > li::marker { font-family: var(--font-mono); color: var(--ink-2); }

/* Passi numerati: numero grande a sinistra, collegati da una linea sottile */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--s-4);
  padding-bottom: var(--s-6);
}
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 2.75rem;
  bottom: var(--s-2);
  left: calc(1.25rem - 0.5px);
  width: 1px;
  background: var(--rule-strong);
}
.step__num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-weight: 500;
}
.step__body { min-width: 0; padding-top: 0.4rem; }
.step__body > * + * { margin-top: var(--s-3); }
.step__title { font-size: var(--fs-1); }
.step__body p { color: var(--ink-2); }

/* Tabelle */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--panel); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs--1); }
.table th, .table td { padding: var(--s-2) var(--s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.table thead th { color: var(--ink-2); font-weight: 600; background: var(--paper); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody th { font-weight: 600; }
.table code { white-space: nowrap; }

/* Comandi utili: titoletto + blocco */
.cmds { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.cmd__title { font-size: var(--fs-0); font-weight: 650; }
.cmd__title + .code { margin-top: var(--s-2); }


/* 10. Utility ------------------------------------------------------------- */

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

.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* 11. Stampa -------------------------------------------------------------- */

@media print {
  :root {
    --ink: #000; --ink-2: #333; --paper: #fff; --panel: #fff; --rule: #bbb;
    --cable: #000; --code-bg: #fff; --code-ink: #000; --code-dim: #555; --code-rule: #bbb;
  }
  body { font-size: 11pt; }
  .site-header, .skip-link, .site-nav, .copy-button, .theme-toggle, .nav-toggle,
  .site-footer .lang-switch, .toc, .no-print { display: none !important; }
  .docs { display: block; padding: 0; }
  .step::before { display: none; }
  .site-footer { margin-top: 2rem; background: none; }
  a { color: #000; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #333; overflow-wrap: anywhere; }
  .code pre { padding-right: var(--s-4); white-space: pre-wrap; overflow-wrap: anywhere; }
  .code, .callout, figure { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}