/* ZOKKU Help / Manuals (DOCS, 25 Oct 2026). Pages: help.html and help/*.html, written by work/giro-2026-10-25/DOCS/gen_help.py.
   Phone first: one column, tables become stacked cards under 720 px; from 1024 px a sticky "On this page" column.
   Same rules as site.css: square full-bleed fields, 8 px chips and inputs, 12 px tiles and image frames. */

.aiuto{--h-max:76ch}
.h-testa{padding-block:clamp(28px,5vw,64px) clamp(32px,5vw,64px);background:var(--house);color:var(--house-fg)}
.h-testa.prodotto{background:var(--campo);color:var(--inchiostro);--btn-bg:var(--inchiostro);--btn-fg:var(--campo);--lg-ink:var(--inchiostro);--lg-acc:var(--inchiostro)}
.h-testa.prodotto.vetro{--lg-acc:var(--glifo)}
.h-testa h1{font-size:var(--s-display);letter-spacing:-.035em;line-height:.98}
.h-testa.prodotto h1{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em 16px;font-size:var(--s-head);line-height:1}
.h-logo{display:inline-block;line-height:0}
.h-testa .h-logo svg{height:clamp(52px,7vw,96px);width:auto;margin-left:-.06em}
.h-sotto{font-size:var(--s-head);font-weight:500;letter-spacing:-.02em}
.h-ruolo{margin-top:14px;font-size:var(--s-small);font-weight:500}
.h-tag{margin-top:14px;font-size:var(--s-lead);line-height:1.3;max-width:40ch}
.h-testa .azioni{margin-top:24px}
.h-testa-griglia{display:grid;gap:28px;align-items:center}
.h-testa-griglia > *,.h-corpo > *{min-width:0}
.h-testa-fig img{border-radius:var(--r-m);box-shadow:0 20px 50px -28px rgba(10,10,10,.5);width:100%}
@media (min-width:1024px){.h-testa-griglia{grid-template-columns:5fr 7fr}}
.h-briciole{display:flex;gap:8px;align-items:center;font-size:var(--s-small);font-weight:500;margin-bottom:18px;flex-wrap:wrap}
.h-briciole a{min-height:44px;display:inline-flex;align-items:center}

/* Search */
.h-cerca{position:relative;margin:0 0 8px;max-width:640px}
.h-cerca label{display:block;font-size:var(--s-small);font-weight:500;margin-bottom:8px}
.h-cerca input{width:100%;min-height:48px;padding:0 16px;border-radius:var(--r-s);border:1px solid color-mix(in srgb,currentColor 28%,transparent);background:var(--bg);color:var(--fg);font:400 17px/1.2 var(--font)}
.h-cerca input:focus-visible{outline:3px solid var(--fg);outline-offset:2px}
.h-cerca.grande{margin-top:28px}
.h-stato{font-size:var(--s-small);color:inherit;opacity:.8;min-height:1.4em;margin-top:6px}
.h-ris{display:grid;gap:6px;margin-top:6px}
.h-ris:empty{display:none}
.h-ris a{display:block;padding:12px 14px;border-radius:var(--r-m);background:var(--tile);color:var(--fg);text-decoration:none}
.h-ris a b{display:block;font-weight:500}
.h-ris a span{display:block;font-size:var(--s-small);color:var(--fg-2);margin-top:2px}
.h-ris a i{font-style:normal;font-size:13px;color:var(--fg-2)}
@media (hover:hover) and (pointer:fine){.h-ris a:hover{background:var(--tile-2)}}

/* Body: table of contents and article */
.h-corpo{display:grid;gap:28px;padding-block:clamp(28px,4vw,56px) clamp(64px,8vw,112px)}
.h-indice{font-size:var(--s-small)}
.h-indice p{font-weight:500;margin-bottom:8px}
.h-indice ol{display:flex;flex-wrap:wrap;gap:6px}
.h-indice a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:var(--r-s);background:var(--tile);text-decoration:none;font-weight:500}
@media (min-width:1024px){
  .h-corpo{grid-template-columns:220px minmax(0,1fr);gap:48px}
  .h-indice{position:sticky;top:92px;align-self:start}
  .h-indice ol{display:grid;gap:2px}
  .h-indice a{background:none;padding:0 10px;min-height:34px}
  .h-indice a:hover{background:var(--tile)}
}
.h-articolo{min-width:0;max-width:980px}
.h-sez{padding-top:clamp(32px,4vw,48px);scroll-margin-top:84px}
.h-sez h2{font-size:var(--s-head);margin-bottom:16px}
.h-sez h3{font-size:var(--s-lead);letter-spacing:-.01em;line-height:1.15;margin:28px 0 10px;scroll-margin-top:84px}
.h-sez p,.h-sez li,.h-sez dd{max-width:var(--h-max)}
.h-sez p+p{margin-top:12px}
.h-sez a{text-underline-offset:.2em}
.h-lead{font-size:var(--s-lead);line-height:1.38;margin-bottom:14px}
.h-nota{font-size:var(--s-small);color:var(--fg-2);margin-top:12px}
code,kbd{font-family:var(--mono);font-size:.84em;background:var(--tile);padding:1px 6px;border-radius:6px;overflow-wrap:anywhere}
kbd{box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--fg) 22%,transparent)}
.h-punti{margin-top:14px;display:grid;gap:6px}
.h-punti li{padding-left:18px;position:relative}
.h-punti li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:currentColor}

/* Steps */
.h-passi{counter-reset:p;display:grid;gap:12px;margin-top:8px}
.h-passi li{counter-increment:p;position:relative;padding:14px 16px 14px 56px;border-radius:var(--r-m);background:var(--tile)}
.h-passi li::before{content:counter(p);position:absolute;left:16px;top:12px;font-family:var(--mono);font-weight:500;font-size:20px}

/* Figures */
.h-fig,.h-seg,.h-vista{margin-top:18px}
.h-fig img,.h-seg img,.h-vista img{border-radius:var(--r-m);background:var(--tile);width:auto;max-width:100%}
.h-segmenti{display:grid;gap:22px;margin-top:8px}
.h-seg figcaption,.h-vista figcaption{margin-top:10px;font-size:var(--s-small);color:var(--fg-2);max-width:72ch}
.h-seg figcaption b{color:var(--fg);font-weight:500}
.h-viste{display:grid;gap:18px}

/* Tables: rows on wide screens, stacked cards on phones */
.h-tab{width:100%;border-collapse:collapse;font-size:var(--s-small);margin-top:10px}
.h-tab th,.h-tab td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid color-mix(in srgb,var(--fg) 12%,transparent)}
.h-tab thead th{font-weight:500;color:var(--fg-2);border-bottom-color:color-mix(in srgb,var(--fg) 30%,transparent)}
.h-tab tbody th{font-weight:500;min-width:9em}
.h-tab td:nth-child(2),.h-tab td:nth-child(3){font-family:var(--mono);font-size:.92em;font-variant-numeric:tabular-nums}
.h-tab tr:target{background:color-mix(in srgb,var(--fg) 7%,transparent)}
.h-n{font-family:var(--mono);font-weight:400;color:var(--fg-2);font-size:.9em}
.h-lane{margin-top:6px;display:grid;gap:4px;font-family:var(--font);font-size:.95em}
@media (max-width:719px){
  .h-tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .h-tab,.h-tab tbody,.h-tab tr,.h-tab th,.h-tab td{display:block;width:100%}
  .h-tab tr{padding:12px 14px;margin-bottom:8px;border-radius:var(--r-m);background:var(--tile)}
  .h-tab th,.h-tab td{border:0;padding:3px 0}
  .h-tab td::before{content:attr(data-l) ": ";font-family:var(--font);color:var(--fg-2)}
  .h-tab tbody th{font-size:var(--s-body)}
}

/* Lists */
.h-cat{display:grid;gap:8px;margin-top:14px}
.h-cat li{padding:12px 14px;border-radius:var(--r-m);background:var(--tile)}
.h-cat li b{font-weight:500}
.h-cat li span:last-child{display:block;font-size:var(--s-small);color:var(--fg-2);margin-top:4px}
@media (min-width:720px){.h-cat{grid-template-columns:repeat(2,minmax(0,1fr))}}
.h-preset-lista{columns:2 180px;column-gap:24px;font-size:var(--s-small);margin-top:8px}
.h-preset-lista li{break-inside:avoid;padding:3px 0}
.h-consigli,.h-dati{display:grid;gap:8px;margin-top:8px}
.h-consigli div,.h-dati div{padding:12px 14px;border-radius:var(--r-m);background:var(--tile)}
.h-consigli dt,.h-dati dt{font-weight:500}
.h-consigli dd,.h-dati dd{color:var(--fg-2);margin-top:2px}
.h-storia{display:grid;gap:8px;margin-top:8px}
.h-storia li{max-width:var(--h-max)}
.h-data{color:var(--fg-2);margin-inline:6px}
.h-dopo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--fg) 12%,transparent)}

/* Index page */
.h-blocco{padding-block:clamp(36px,5vw,64px) 0}
.h-blocco:last-of-type{padding-bottom:clamp(64px,8vw,112px)}
.h-blocco h2{font-size:var(--s-head)}
.h-blocco .riga{margin-top:10px;color:var(--fg-2);max-width:60ch}
.h-blocco p a{color:var(--fg)}
.h-blocco > .wrap > p{margin-top:14px;max-width:64ch}
.h-schede,.h-manuali{display:grid;gap:10px;margin-top:20px}
@media (min-width:720px){.h-schede{grid-template-columns:repeat(2,minmax(0,1fr))}.h-manuali{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.h-schede{grid-template-columns:repeat(4,minmax(0,1fr))}.h-manuali{grid-template-columns:repeat(3,minmax(0,1fr))}}
.h-schede a{display:block;height:100%;padding:18px;border-radius:var(--r-m);background:var(--tile);text-decoration:none}
.h-schede b{display:block;font-weight:500;font-size:var(--s-lead)}
.h-schede span{display:block;margin-top:6px;color:var(--fg-2);font-size:var(--s-small)}
.h-manuale{display:grid;grid-template-columns:1fr auto;align-items:end;gap:8px;min-height:132px;padding:18px;border-radius:var(--r-m);background:var(--campo);color:var(--inchiostro);text-decoration:none;--lg-ink:var(--inchiostro);--lg-acc:var(--inchiostro);transition:transform var(--t-press) var(--ease-out)}
.h-manuale.vetro{--lg-acc:var(--glifo)}
.h-manuale .h-logo{grid-column:1 / -1;align-self:start}
.h-manuale .h-logo svg{height:44px;width:auto}
.h-manuale .h-ruolo{margin:0;font-size:var(--s-small)}
.h-manuale .h-ver{font-size:13px}
.h-manuale:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){.h-schede a:hover{background:var(--tile-2)}}

/* Print (the PDF manuals for the packages): no header, footer, search or table of contents */
@media print{
  @page{margin:14mm 12mm}
  .testata,.piede,.salta,.h-cerca,.h-indice,.h-dopo,.h-briciole,.h-testa .azioni{display:none!important}
  body{background:#fff;color:#0A0A0A;font-size:11pt}
  .h-corpo{display:block;padding:0}
  .h-testa{padding:8mm 0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .h-testa-griglia{grid-template-columns:1fr 1fr}
  .h-sez{break-inside:auto;padding-top:6mm}
  .h-sez h2{break-after:avoid;font-size:20pt}
  .h-sez h3{break-after:avoid}
  .h-tab tr,.h-seg,.h-vista,.h-fig,.h-passi li,.h-cat li{break-inside:avoid}
  .h-passi li,.h-cat li,.h-consigli div,.h-dati div,code,kbd{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .h-tab thead{position:static;width:auto;height:auto;clip:auto}
  .h-tab{display:table}.h-tab thead{display:table-header-group}.h-tab tbody{display:table-row-group}.h-tab tr{display:table-row;background:none;padding:0}.h-tab th,.h-tab td{display:table-cell;width:auto;padding:4px 6px;border-bottom:1px solid #ddd}
  .h-tab td::before{content:none}
  a{text-decoration:none}
}

/* PDFPK (25 Oct 2026): PDF downloads of the manuals (help.html list, the size beside "Download PDF") */
.h-pdf-peso{margin-left:6px;font-size:var(--s-xs);opacity:.72}
.h-pdf-lista{display:grid;gap:8px;margin-top:20px;list-style:none;padding:0}
@media (min-width:720px){.h-pdf-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.h-pdf-lista{grid-template-columns:repeat(3,minmax(0,1fr))}}
.h-pdf-lista a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-height:44px;padding:12px 16px;border-radius:var(--r-m);background:var(--tile);text-decoration:none}
.h-pdf-lista b{font-weight:500}
.h-pdf-lista span{color:var(--fg-2);font-size:var(--s-xs);white-space:nowrap}
@media (hover:hover) and (pointer:fine){.h-pdf-lista a:hover{background:var(--tile-2)}}
