/* ==================================================================
   Impaginazione da documentazione: navigazione a sinistra, testo al
   centro, sommario a destra. La usano privacy e assistenza.
   ================================================================== */

:root {
  color-scheme: light;
  --ink: #16161a; --muted: #6f6f7a; --tenue: #9a9aa4;
  --line: #e4e4ea; --line-soft: #eeeef2;
  --bg: #f4f4f6; --white: #fff; --verde: #5fe565; --blu: #3b6df5;
  --nav-h: 65px;
}
* { margin: 0; padding: 0; box-sizing: border-box }
body {
  background: var(--white); color: var(--ink);
  font: 400 16px/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit }

/* ---------------- barra ---------------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  height: var(--nav-h); padding: 0 clamp(18px, 3vw, 32px);
  background: var(--white); border-bottom: 1px solid var(--line);
}
.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none }
.marchio img { width: 30px; height: 30px; border-radius: 9px }
.marchio strong { font-size: 16px; letter-spacing: -0.01em }
.nav__links { margin: 0 auto; display: flex; gap: 28px }
.nav__links a { font-size: 15px; color: var(--muted); text-decoration: none }
.nav__links a:hover { color: var(--ink) }
.nav__cta {
  padding: 9px 18px; border-radius: 999px; background: var(--ink); color: var(--white);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
@media (max-width: 900px) { .nav__links { display: none } }

/* ---------------- tre colonne ---------------- */
.docs {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 230px;
  gap: clamp(28px, 4vw, 56px);
  max-width: 1400px; margin: 0 auto;
  padding: 34px clamp(18px, 3vw, 32px) 100px;
}

/* --- colonna sinistra: dove sono, cosa c'e altrove --- */
.lato { position: sticky; top: calc(var(--nav-h) + 26px); align-self: start }
.lato__gruppo {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tenue); margin-bottom: 14px;
}
.lato a {
  display: block; padding: 7px 0; font-size: 15px;
  color: var(--muted); text-decoration: none;
}
.lato a:hover { color: var(--ink) }
.lato a.attivo { color: var(--ink); font-weight: 600 }
/* le voci della pagina corrente rientrano, con un filo che le lega */
.lato__dentro {
  margin: 4px 0 18px; padding-left: 14px; border-left: 1px solid var(--line);
}
.lato__dentro a { font-size: 14.5px; padding: 6px 0 }

/* --- centro --- */
.briciole {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--muted); margin-bottom: 18px;
}
.briciole a { text-decoration: none }
.briciole a:hover { color: var(--ink) }
.briciole span { color: var(--ink) }

.titolo { font-size: clamp(34px, 5vw, 52px); line-height: 1.06; letter-spacing: -0.035em }
.sottotitolo {
  margin-top: 14px; font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 42rem;
}

.pastiglie { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px }
.pastiglia {
  padding: 7px 15px; border-radius: 999px; background: var(--bg);
  font-size: 13.5px; color: var(--muted); white-space: nowrap;
}
.pastiglia.forte { background: var(--ink); color: var(--white); font-weight: 600 }

.divisoria { margin: 34px 0 0; border: 0; border-top: 1px solid var(--line) }

/* le sezioni si ancorano sotto la barra, non sotto di lei */
.sezione { scroll-margin-top: calc(var(--nav-h) + 24px); padding-top: 40px }
.sezione h2 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.025em; line-height: 1.2 }
.sezione h3 { margin-top: 26px; font-size: 17px; letter-spacing: -0.01em }
.sezione p { margin-top: 14px; color: #45454f }
.sezione ul { margin: 14px 0 0 20px; display: flex; flex-direction: column; gap: 9px }
.sezione li { color: #45454f }

/* riquadro con il filo colorato: quello che va letto prima del resto */
.nota {
  margin-top: 22px; padding: 18px 22px;
  border-left: 3px solid var(--blu); border-radius: 0 14px 14px 0;
  background: var(--bg);
}
.nota b { display: block; margin-bottom: 5px; font-size: 15px }
.nota p { margin-top: 0; font-size: 15px; color: #45454f }
.nota.verde { border-left-color: #2f9d3f }

/* --- colonna destra: il sommario --- */
.sommario { position: sticky; top: calc(var(--nav-h) + 26px); align-self: start }
.sommario__titolo {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tenue); margin-bottom: 12px;
}
.sommario a {
  display: block; padding: 6px 0 6px 13px; margin-left: -1px;
  border-left: 1px solid var(--line);
  font-size: 14px; color: var(--muted); text-decoration: none;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.sommario a:hover { color: var(--ink) }
.sommario a.attivo { color: var(--ink); border-left-color: var(--ink) }

@media (max-width: 1180px) {
  .docs { grid-template-columns: 230px minmax(0, 1fr) }
  .sommario { display: none }
}
@media (max-width: 860px) {
  .docs { grid-template-columns: 1fr; padding-top: 24px }
  .lato { position: static; padding-bottom: 26px; border-bottom: 1px solid var(--line) }
  .lato__dentro { display: none }
}

.piede {
  border-top: 1px solid var(--line);
  padding: 22px clamp(18px, 3vw, 32px);
  font-size: 13.5px; color: var(--muted);
  display: flex; gap: 18px; flex-wrap: wrap;
}
.piede a { text-decoration: none }


/* ---------------- passi della guida ---------------- */
/*
 * Il numero sta in un cerchio a sinistra, legato al successivo da una
 * linea: si vede a colpo d'occhio quanti passi mancano, e dove sei.
 */
.passo { position: relative; padding-left: 56px }
.passo::before {
  content: attr(data-n);
  position: absolute; left: 0; top: 42px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--white);
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* il filo scende fino al passo dopo */
.passo::after {
  content: ''; position: absolute; left: 17px; top: 84px; bottom: -40px;
  width: 1px; background: var(--line);
}
.passo:last-of-type::after { display: none }

@media (max-width: 860px) {
  .passo { padding-left: 44px }
  .passo::before { width: 28px; height: 28px; font-size: 13px; top: 40px }
  .passo::after { left: 14px; top: 72px }
}

/* elenco con la spunta: quello che serve avere pronto */
.spunte { list-style: none; margin-left: 0 !important }
.spunte li { display: flex; gap: 11px; align-items: flex-start }
.spunte li::before {
  content: '\2713'; flex: none; margin-top: 2px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--verde); color: #0b2e12;
  font-size: 11px; font-weight: 800; display: grid; place-items: center;
}


/* ---------------- sommario lungo ---------------- */
/*
 * Una referenza ha molte sezioni: il sommario prende dei titoletti e
 * scorre per conto suo, invece di allungare la pagina.
 */
.sommario--lungo {
  max-height: calc(100dvh - var(--nav-h) - 60px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.sommario__parte {
  margin: 18px 0 7px; padding-left: 13px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--tenue);
}
.sommario__parte:first-of-type { margin-top: 0 }

/* la stessa divisione nella colonna di sinistra */
.lato__parte {
  margin: 16px 0 5px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--tenue);
}

/* tabella dei campi: nelle referenze si legge meglio di un elenco */
.tabella { width: 100%; margin-top: 18px; border-collapse: collapse }
.tabella th, .tabella td {
  text-align: left; padding: 13px 18px 13px 0;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.tabella th {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tenue);
  padding-bottom: 9px;
}
.tabella tr:last-child td { border-bottom: 0 }
.tabella td { font-size: 15px; line-height: 1.55; color: #45454f }
/* la prima colonna e l'etichetta: si stacca e non va a capo */
.tabella td:first-child {
  font-weight: 600; color: var(--ink);
  white-space: nowrap; padding-right: 28px; width: 1%;
}