/* La guida completa: sul sito con i colori del sito, in PDF con copertina verde e pagine bianche. */

.guide { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(64px, 9vw, 120px); }
.guide .toc { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow: auto; font-size: 15px; }
.guide .toc b { display: block; font: 700 13px var(--mono); color: var(--soft); margin-bottom: 10px; }
.guide .toc ol { list-style: none; padding: 0; display: grid; gap: 2px; counter-reset: c; }
.guide .toc li { counter-increment: c; }
.guide .toc a { display: flex; gap: 10px; padding: 6px 10px; border-radius: 8px; color: var(--soft); text-decoration: none; }
.guide .toc a::before { content: counter(c, decimal-leading-zero); font: 500 12px/1.9 var(--mono); color: var(--faint); }
.guide .toc a:hover { color: var(--fg); background: rgba(255, 255, 255, .1); }
.guide .toc .pdf { display: inline-block; margin-top: 18px; font-weight: 600; color: var(--fg); }

.g-head h1 { font: 900 clamp(44px, 7vw, 96px)/.9 var(--display); letter-spacing: -0.05em; }
.g-head p { color: var(--soft); font-size: clamp(18px, 1.6vw, 21px); max-width: 56ch; margin-top: 22px; }
.g-head .meta { font: 500 14px var(--mono); margin-top: 18px; }

.chapter { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(28px, 3vw, 40px); border-top: 1.5px solid var(--faint); max-width: 760px; }
.chapter > h2 { font: 800 clamp(28px, 3.4vw, 44px)/1 var(--display); letter-spacing: -0.045em; display: flex; gap: 16px; align-items: baseline; }
.chapter > h2 .n { font: 600 16px var(--mono); color: var(--soft); letter-spacing: 0; }
.chapter h3 { font: 700 21px/1.2 var(--display); letter-spacing: -0.03em; margin-top: 34px; }
.chapter p, .chapter li { color: var(--soft); }
.chapter p { margin-top: 14px; }
.chapter strong { color: var(--fg); font-weight: 600; }
.chapter ul, .chapter ol { margin-top: 12px; padding-left: 1.2em; display: grid; gap: 8px; }
.chapter ol.num { list-style: none; padding: 0; counter-reset: n; gap: 14px; }
.chapter ol.num > li { counter-increment: n; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.chapter ol.num > li > p { margin-top: 4px; }
.chapter ol.num > li::before { content: counter(n); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--tile-bg); color: var(--tile-fg); font: 600 14px var(--mono); }
.chapter code { font: 500 .9em var(--mono); padding: .08em .35em; border-radius: 5px; background: rgba(255, 255, 255, .14); color: var(--fg); }
.chapter .ex { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chapter .ex .tile { font-size: 15px; }
.chapter .note { margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .1); }
.chapter .note p:first-child { margin-top: 0; }
.chapter table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 16px; }
.chapter th, .chapter td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--faint); color: var(--soft); vertical-align: top; }
.chapter th { color: var(--fg); font-weight: 600; }
.chapter td:first-child { white-space: nowrap; }
.chapter .shot { margin-top: 22px; }
.chapter .legend { list-style: none; padding: 0; margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.chapter .legend li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.chapter .legend li > b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #0E9E8A; color: #fff; font: 700 13px var(--text); box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.chapter .qa h3 { font: 600 18px/1.3 var(--text); letter-spacing: 0; margin-top: 26px; color: var(--fg); }
.chapter .qa p { margin-top: 6px; }
.g-cover, .g-contents { display: none; }

@media (max-width: 900px) {
  .guide { grid-template-columns: 1fr; }
  .guide .toc { position: static; max-height: none; }
  .chapter .legend { grid-template-columns: 1fr; }
}

/* PDF: A4, copertina verde, pagine bianche con inchiostro e verde del marchio. */
@page { size: A4; margin: 18mm 17mm 20mm; }
@page :first { margin: 0; }
@media print {
  :root, .band { --bg: #fff; --fg: #0B3F38; --soft: #33524D; --faint: #CFE3DF; --tile-bg: #0B3F38; --tile-fg: #fff; }
  html, body { background: #fff !important; color: var(--fg); font-size: 10.5pt; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .top, .end, .end-mark, .guide .toc, .no-print { display: none !important; }
  .guide { display: block; padding: 0; max-width: none; }
  .wrap { padding: 0; max-width: none; }
  .g-head { display: none; }
  .g-cover { display: flex; flex-direction: column; justify-content: space-between; height: 297mm; padding: 22mm 20mm; background: #0E9E8A; color: #fff; break-after: page; }
  .g-cover .mark { color: #fff; font-size: 22pt; }
  .g-cover .mark span { background: #fff; color: #0B3F38; font-size: 15pt; }
  .g-cover h1 { font: 900 54pt/.92 var(--display); letter-spacing: -0.05em; margin-top: 40mm; }
  .g-cover p { font-size: 14pt; color: rgba(255, 255, 255, .85); max-width: 32em; margin-top: 8mm; }
  .g-cover .row { margin-top: 14mm; gap: 6px; }
  .g-cover .tile { font-size: 15pt; background: #fff; color: #0B3F38; }
  .g-cover .tile.sep { background: transparent; color: rgba(255, 255, 255, .8); }
  .g-cover .meta { font: 500 10pt var(--mono); color: rgba(255, 255, 255, .85); display: flex; justify-content: space-between; }
  .g-contents { display: block; break-after: page; }
  .g-contents h2 { font: 800 24pt/1 var(--display); letter-spacing: -0.045em; color: #0B3F38; }
  .g-contents ol { margin-top: 8mm; padding: 0; list-style: none; counter-reset: c; columns: 2; column-gap: 12mm; }
  .g-contents li { counter-increment: c; padding: 2.2mm 0; border-bottom: 1px solid #CFE3DF; break-inside: avoid; font-size: 11pt; }
  .g-contents li::before { content: counter(c, decimal-leading-zero) "  "; font: 500 9pt var(--mono); color: #0E9E8A; }
  .g-contents a { text-decoration: none; color: #0B3F38; }
  .chapter { max-width: none; margin-top: 12mm; padding-top: 0; border-top: 0; }
  .chapter:first-of-type, .chapter.page { break-before: page; margin-top: 0; }
  .chapter > h2, .chapter > h2 + p { break-after: avoid; }
  .chapter ol.num > li::before { width: 7mm; height: 7mm; font-size: 9.5pt; }
  .chapter ol.num > li > p { margin-top: 1mm; }
  .chapter > h2 { font-size: 24pt; color: #0B3F38; border-bottom: 2px solid #0E9E8A; padding-bottom: 4mm; }
  .chapter > h2 .n { color: #0E9E8A; font-size: 11pt; }
  .chapter h3 { font-size: 13pt; color: #0B3F38; margin-top: 7mm; break-after: avoid; }
  .chapter p, .chapter li, .chapter td { color: #33524D; }
  .chapter strong, .chapter th { color: #0B3F38; }
  .chapter code { background: #EAF6F3; color: #0B3F38; }
  .chapter .note { background: #EAF6F3; break-inside: avoid; }
  .chapter .tile { background: #0B3F38; color: #fff; }
  .chapter .tile.sep { background: transparent; color: #0E9E8A; }
  .chapter .legend li > b { box-shadow: none; }
  .chapter table, .chapter li, .chapter .qa > div { break-inside: avoid; }
  .chapter .shot { break-inside: avoid; }
  .chapter .shot .app .win { box-shadow: 0 0 0 .1cqw #A3BDB8; }
  .chapter .shot .app .spot { box-shadow: 0 0 0 .3cqw #fff; }
  a { text-decoration: none; }
}