/* Hallmark · macrostructure: Photographic → Workbench · tone: tecnico, preciso, caldo · anchor hue: verde bosco · pre-emit critique: P5 H5 E5 S5 R5 V4 · contrast: pass (40–41) · nav: N10 · footer: Ft1 · slop: 58/58 */

/*
 * Livello di presentazione della landing principale.
 * Eredita integralmente i token di DESIGN.md tramite style.css e
 * landing-v2.css: nessuna nuova palette, tipografia o grammatica di scroll.
 */

/* Dopo il padiglione il contenuto è subito leggibile: nessun secondo
   spettacolo di reveal compete con lo scroll-telling. */
.pv-prototype .pv-rivela,
.pv-prototype .pv-rivela.is-dentro {
  opacity: 1;
  animation: none;
  transform: none;
}

.pv-prototype h1,
.pv-prototype h2,
.pv-prototype h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Le etichette della catena di quote restano visibili nel padiglione, ma
   escono dal box cliccabile della tacca: non coprono i controlli della demo
   quando le due sezioni si sfiorano durante lo scroll. */
.pv-prototype .pv-rail__tick {
  position: relative;
  width: 26px;
  grid-template-columns: 26px;
}

.pv-prototype .pv-rail__label {
  position: absolute;
  inset-inline-end: calc(100% + 10px);
  pointer-events: none;
}

/* La metà inferiore non viene più presentata come una sequenza di tavole
   numerate: ogni sezione risponde a una domanda concreta del visitatore. */
.pv-prototype .pv-app .pv-head__label,
.pv-prototype .pv-out .pv-head__label,
.pv-prototype .pv-faq .pv-head__label,
.pv-prototype .pv-access > .pv-shell > .pv-head__label {
  display: none;
}

.pv-prototype .pv-head__h,
.pv-prototype .pv-access__h {
  margin-block-start: 0;
}

.pv-prototype .pv-spec__row::before,
.pv-prototype .pv-spec__row::after {
  content: none;
}

/* La CTA di navigazione resta disponibile anche durante il racconto: la
   portiamo alla misura minima di un vero controllo, senza allargarne il tono. */
.pv-prototype .nav__cta {
  min-height: var(--pv-s-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--pv-s-sm);
}

.pv-prototype .nav__cta:hover {
  transform: none;
}

/* ── Prova guidata ─────────────────────────────────────────────────── */
.pv-prototype .pv-app__head {
  max-width: var(--pv-read);
}

.pv-prototype .pv-app__fit {
  box-shadow: var(--pv-shadow-lift), 0 0 0 1px var(--pv-hairline-night-2);
}

.pv-prototype .pv-ide__agent {
  width: min(32%, 360px);
  gap: var(--pv-s-2xs);
  padding: var(--pv-s-sm);
}

.pv-prototype .pv-proto-status {
  font-family: var(--font-mono);
  font-size: var(--pv-kicker);
  color: var(--ink-2);
  white-space: nowrap;
}

.pv-prototype .pv-proto-reset {
  min-height: var(--pv-s-lg);
  padding-inline: var(--pv-s-xs);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--raised);
  color: var(--ink-2);
  font: 500 12px/1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 100ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .pv-prototype .pv-proto-reset:hover {
    background: var(--surface);
    color: var(--ink);
  }
}

.pv-prototype .pv-proto-reset:active {
  transform: translateY(1px);
}

.pv-prototype .pv-proto-reset:focus-visible,
.pv-prototype .pv-sugg:focus-visible,
.pv-prototype .pv-ide__invia:focus-visible,
.pv-prototype .pv-carta:focus-visible,
.pv-prototype .pv-carta a:focus-visible,
.pv-prototype .pv-fiume__stop:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

:root[data-theme="dark"] .pv-prototype .pv-proto-reset:focus-visible,
:root[data-theme="dark"] .pv-prototype .pv-sugg:focus-visible,
:root[data-theme="dark"] .pv-prototype .pv-ide__invia:focus-visible,
:root[data-theme="dark"] .pv-prototype .pv-carta:focus-visible,
:root[data-theme="dark"] .pv-prototype .pv-carta a:focus-visible,
:root[data-theme="dark"] .pv-prototype .pv-fiume__stop:focus-visible {
  outline-color: var(--accent-soft);
}

.pv-prototype .pv-proto-reset:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.pv-prototype .pv-proto-guide {
  display: grid;
  gap: var(--pv-s-3xs);
  padding: var(--pv-s-xs);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
}

.pv-prototype .pv-proto-guide span {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.pv-prototype .pv-proto-guide strong {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

.pv-prototype .pv-proto-guide p {
  margin: 0;
  max-width: 42ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.pv-prototype .pv-ide__chat {
  min-height: 92px;
}

.pv-prototype .pv-ide__agent-p,
.pv-prototype .pv-sugg__eti,
.pv-prototype .pv-ide__input::placeholder,
.pv-prototype .pv-ide__foot {
  color: var(--ink-2);
}

.pv-prototype .pv-ide__suggerimenti {
  gap: var(--pv-s-2xs);
  padding-block: var(--pv-s-xs);
}

.pv-prototype .pv-sugg {
  min-height: 32px;
  padding: var(--pv-s-2xs) var(--pv-s-xs);
  border-color: var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .pv-prototype .pv-sugg:hover {
    border-color: var(--gold-ink);
    background: var(--raised);
    color: var(--ink);
  }
}

.pv-prototype .pv-sugg:active {
  transform: translateY(1px);
}

.pv-prototype .pv-sugg:disabled,
.pv-prototype .pv-ide__invia:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.pv-prototype .pv-ide__input,
.pv-prototype .pv-ide__invia {
  height: var(--pv-s-lg);
}

.pv-prototype .pv-ide__input {
  outline: 2px solid transparent;
  outline-offset: 1px;
}

.pv-prototype .pv-ide__invia {
  width: var(--pv-s-lg);
}

.pv-prototype .pv-ide__input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  box-shadow: none;
}

:root[data-theme="dark"] .pv-prototype .pv-ide__input:focus-visible {
  outline-color: var(--accent-soft);
}

.pv-prototype .pv-ide__input:disabled {
  opacity: .55;
  cursor: not-allowed;
  color: var(--ink-3);
}

.pv-prototype .pv-proto-result {
  min-height: 1lh;
  margin: 0;
  padding-block-start: var(--pv-s-2xs);
  border-block-start: 1px solid var(--hairline-2);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.pv-prototype .pv-app__cap {
  max-width: 76ch;
}

.pv-prototype .pv-proto-proof-h {
  margin: var(--pv-s-lg) 0 0;
  font-family: var(--font-serif);
  font-size: var(--pv-h3);
  font-weight: 500;
  color: var(--pv-on-night);
}

.pv-prototype .pv-proto-proof-h + .pv-app__notes {
  margin-block-start: var(--pv-s-md);
}

/* ── Output: i documenti, non un secondo fotogramma ────────────────── */
.pv-prototype .pv-proto-docs {
  display: grid;
  gap: var(--pv-s-md);
  position: sticky;
  top: calc(var(--pv-nav-h) + var(--pv-s-md));
  min-width: 0;
}

.pv-prototype .pv-proto-doc {
  min-width: 0;
  padding: var(--pv-s-md);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--raised);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

.pv-prototype .pv-proto-doc header {
  display: grid;
  gap: var(--pv-s-3xs);
  padding-block-end: var(--pv-s-sm);
  border-block-end: 1px solid var(--hairline);
}

.pv-prototype .pv-proto-doc header span,
.pv-prototype .pv-proto-doc__meta,
.pv-prototype .pv-proto-row--head {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.pv-prototype .pv-proto-doc header strong {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

.pv-prototype .pv-proto-doc__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--pv-s-sm);
  padding-block: var(--pv-s-xs);
  color: var(--gold-ink);
}

.pv-prototype .pv-proto-row {
  display: grid;
  grid-template-columns: minmax(64px, .75fr) minmax(0, 2fr) minmax(72px, .85fr) minmax(72px, .8fr);
  gap: var(--pv-s-2xs);
  align-items: start;
  padding-block: var(--pv-s-xs);
  border-block-start: 1px solid var(--hairline-2);
  font-size: 12px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.pv-prototype .pv-proto-row span:nth-child(3),
.pv-prototype .pv-proto-row span:nth-child(4) {
  text-align: end;
  white-space: nowrap;
}

.pv-prototype .pv-proto-doc footer {
  display: flex;
  justify-content: space-between;
  gap: var(--pv-s-md);
  margin-block-start: var(--pv-s-xs);
  padding-block-start: var(--pv-s-sm);
  border-block-start: 1px solid var(--hairline);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}

.pv-prototype .pv-proto-doc footer strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pv-prototype .pv-proto-doc--relazione p {
  margin: var(--pv-s-sm) 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}

.pv-prototype .pv-proto-doc--relazione dl {
  display: grid;
  gap: 0;
  margin: var(--pv-s-sm) 0 0;
  border-block-start: 1px solid var(--hairline);
}

.pv-prototype .pv-proto-doc--relazione dl div {
  display: flex;
  justify-content: space-between;
  gap: var(--pv-s-md);
  padding-block: var(--pv-s-2xs);
  border-block-end: 1px solid var(--hairline-2);
}

.pv-prototype .pv-proto-doc--relazione dt,
.pv-prototype .pv-proto-doc--relazione dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}

.pv-prototype .pv-proto-doc--relazione dd {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Percorso di conversione ─────────────────────────────────────────
   Un'azione per macro-sezione, con tre registri diversi: primaria dopo la
   prova, tipografica dopo i documenti, bordata dopo le domande. */
.pv-prototype .pv-conversion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pv-s-lg);
  padding-block: var(--pv-s-md);
}

.pv-prototype .pv-conversion__copy {
  min-width: 0;
  max-width: 64ch;
  display: grid;
  gap: var(--pv-s-2xs);
}

.pv-prototype .pv-conversion__copy strong {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.05rem + .65vw, 1.55rem);
  font-weight: 400;
  line-height: 1.22;
}

.pv-prototype .pv-conversion__copy span {
  font-size: 15px;
  line-height: 1.6;
}

.pv-prototype .pv-conversion--night {
  margin-block-start: var(--pv-s-lg);
  border-block-start: 1px solid var(--pv-hairline-night);
  color: var(--pv-on-night);
}

.pv-prototype #pv-waitlist {
  scroll-margin-block-start: calc(var(--pv-nav-h) + var(--pv-s-md));
}

.pv-prototype .pv-conversion--night .pv-conversion__copy span {
  color: var(--pv-on-night-2);
}

.pv-prototype .pv-conversion__primary {
  min-height: 48px;
  padding-inline: var(--pv-s-md);
  font-size: 15px;
  box-shadow: var(--shadow-1);
}

.pv-prototype .pv-conversion__primary:hover {
  transform: none;
  box-shadow: var(--shadow-1);
}

.pv-prototype .pv-conversion-host {
  padding-block-end: var(--pv-rhythm-base);
}

.pv-prototype .pv-conversion--paper {
  border-block: 1px solid var(--hairline);
  color: var(--ink);
}

.pv-prototype .pv-conversion--paper .pv-conversion__copy span {
  color: var(--ink-2);
}

.pv-prototype .pv-conversion__link,
.pv-prototype .pv-conversion__outline {
  min-height: var(--pv-s-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.pv-prototype .pv-conversion__link {
  gap: var(--pv-s-2xs);
  color: var(--primary);
  border-block-end: 1px solid var(--hairline);
}

:root[data-theme="dark"] .pv-prototype .pv-conversion__link {
  color: var(--pv-green-night);
  border-block-end-color: var(--pv-hairline-night);
}

.pv-prototype .pv-conversion__link i {
  font-style: normal;
  transition: transform 160ms var(--ease);
}

.pv-prototype .pv-faq {
  padding-block-end: 0;
}

.pv-prototype .pv-faq-cta {
  background: var(--pv-faq-bg);
  color: var(--pv-on-night);
  padding-block: var(--pv-s-sm) var(--pv-s-lg);
}

.pv-prototype .pv-conversion--faq {
  border-block-start: 1px solid var(--pv-hairline-night);
}

.pv-prototype .pv-conversion--faq .pv-conversion__copy span {
  color: var(--pv-on-night-2);
}

.pv-prototype .pv-conversion__outline {
  padding-inline: var(--pv-s-sm);
  border: 1px solid var(--pv-hairline-night);
  border-radius: var(--r-sm);
  color: var(--pv-on-night);
}

@media (hover: hover) and (pointer: fine) {
  .pv-prototype .pv-conversion__link:hover i {
    transform: translateX(var(--pv-s-3xs));
  }

  .pv-prototype .pv-conversion__outline:hover {
    border-color: var(--pv-gold-night);
  }
}

.pv-prototype .nav__cta:focus-visible,
.pv-prototype .pv-btn:focus-visible,
.pv-prototype .pv-conversion__link:focus-visible,
.pv-prototype .pv-conversion__outline:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.pv-prototype .pv-conversion--night .pv-btn:focus-visible,
.pv-prototype .pv-conversion--faq .pv-conversion__outline:focus-visible {
  outline-color: var(--pv-green-night);
}

.pv-prototype .pv-conversion__outline:active {
  transform: translateY(1px);
}

/* ── FAQ a fiume: continua, ma sempre controllabile ───────────────── */
.pv-prototype .pv-faq {
  overflow: hidden;
}

.pv-prototype .pv-proto-fiume-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--pv-s-lg);
  margin-block-end: 0;
}

.pv-prototype .pv-proto-fiume-head > div {
  min-width: 0;
  max-width: var(--pv-read);
}

.pv-prototype .pv-fiume {
  margin-block-start: var(--pv-s-sm);
}

.pv-prototype .pv-carta {
  flex-basis: clamp(286px, 29vw, 380px);
  outline: 2px solid transparent;
  outline-offset: 3px;
}

.pv-prototype .pv-carta__a {
  font-size: 15px;
}

.pv-prototype .pv-fiume__pista:hover .pv-carta,
.pv-prototype .pv-fiume__pista:focus-within .pv-carta,
.pv-prototype .pv-fiume__pista .pv-carta:hover,
.pv-prototype .pv-fiume__pista .pv-carta:focus-visible {
  opacity: 1;
  transform: none;
  border-color: var(--hairline);
  box-shadow: var(--shadow-1);
}

.pv-prototype .pv-fiume__pista:focus-within .pv-carta {
  opacity: .68;
}

.pv-prototype .pv-fiume__pista .pv-carta:focus-visible {
  opacity: 1;
  z-index: 2;
}

.pv-prototype .pv-fiume__stop:hover {
  color: var(--pv-on-night);
  border-color: var(--pv-hairline-night);
}

@media (hover: hover) and (pointer: fine) {
  .pv-prototype .pv-fiume__pista:hover .pv-carta {
    opacity: .68;
  }

  .pv-prototype .pv-fiume__pista .pv-carta:hover {
    opacity: 1;
    z-index: 2;
  }

  .pv-prototype .pv-fiume__stop:hover {
    color: var(--pv-on-night);
    border-color: var(--pv-gold-night);
  }
}

.pv-prototype .pv-fiume__stop {
  min-height: var(--pv-s-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--pv-s-sm);
  white-space: nowrap;
}

.pv-prototype .pv-fiume__stop:active {
  transform: translateY(1px);
}

.pv-prototype .pv-fiume__stop:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.pv-prototype .pv-fiume--fermo {
  padding-inline: var(--pv-orlo);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-mask-image: none;
  mask-image: none;
}

.pv-prototype .pv-fiume--fermo .pv-fiume__pista {
  will-change: auto;
}

.pv-prototype .pv-fiume--fermo .pv-carta {
  scroll-snap-align: center;
}

/* ── Responsive: su mobile la prova resta vera ────────────────────── */
@media (max-width: 60rem) {
  .pv-prototype .pv-app__fit {
    overflow: visible;
  }

  .pv-prototype .pv-ide {
    width: 100%;
    height: auto;
    min-height: 0;
    zoom: 1 !important;
  }

  .pv-prototype .pv-ide__body {
    display: block;
  }

  .pv-prototype .pv-ide__tw {
    display: none;
  }

  .pv-prototype .pv-ide__agent {
    position: static;
    width: 100%;
    min-height: 540px;
    box-shadow: none;
    border-inline-start: 0;
  }

  .pv-prototype .pv-ide__chat {
    min-height: 150px;
  }

  .pv-prototype .pv-proto-docs {
    position: static;
    order: -1;
    margin-block-end: var(--pv-s-md);
  }
}

@media (max-width: 40rem) {
  .pv-prototype .ce-toolbar-hint,
  .pv-prototype .pv-proto-status {
    display: none;
  }

  .pv-prototype .ce-toolbar,
  .pv-prototype .ce-toolbar-right {
    gap: var(--pv-s-2xs);
  }

  .pv-prototype .pv-proto-reset {
    min-height: var(--pv-s-lg);
  }

  .pv-prototype .pv-ide__agent {
    min-height: 620px;
    padding: var(--pv-s-xs);
  }

  .pv-prototype .pv-sugg {
    width: 100%;
    min-height: var(--pv-s-lg);
    text-align: start;
  }

  .pv-prototype .pv-proto-row--head {
    display: none;
  }

  .pv-prototype .pv-proto-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pv-prototype .pv-proto-row span:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .pv-prototype .pv-proto-row span:nth-child(1) {
    grid-column: 1;
    grid-row: 2;
  }

  .pv-prototype .pv-proto-row span:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
    text-align: start;
  }

  .pv-prototype .pv-proto-row span:nth-child(4) {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: end;
  }

  .pv-prototype .pv-proto-doc {
    padding: var(--pv-s-sm);
  }

  .pv-prototype .pv-conversion {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--pv-s-sm);
  }

  .pv-prototype .pv-conversion__primary,
  .pv-prototype .pv-conversion__outline {
    width: 100%;
  }

  .pv-prototype .pv-conversion__link {
    justify-self: start;
  }

  .pv-prototype .pv-proto-fiume-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--pv-s-sm);
  }

  .pv-prototype .pv-proto-fiume-head .pv-fiume__stop {
    justify-self: start;
  }

  .pv-prototype .pv-carta {
    flex-basis: min(82vw, 340px);
    padding: var(--pv-s-sm);
  }
}

@media (pointer: coarse) {
  .pv-prototype .pv-proto-reset,
  .pv-prototype .pv-sugg,
  .pv-prototype .pv-ide__input,
  .pv-prototype .pv-ide__invia,
  .pv-prototype .pv-fiume__stop {
    min-height: var(--pv-s-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv-prototype .pv-proto-reset,
  .pv-prototype .pv-sugg,
  .pv-prototype .pv-ide__invia,
  .pv-prototype .pv-carta,
  .pv-prototype .pv-fiume__stop,
  .pv-prototype .pv-conversion__primary,
  .pv-prototype .pv-conversion__outline,
  .pv-prototype .pv-conversion__link i {
    transition-duration: 150ms;
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   TELEFONO: cosa si legge e cosa si riesce a toccare
   ══════════════════════════════════════════════════════════════════
   Passata del 2026-08-11 su segnalazione diretta. Quattro correzioni, tutte
   misurate su una pagina reale — non applicate per prudenza.

   NON toccato, dopo verifica: i controlli della demo erano gia' a norma
   (riga 793, `pointer: coarse` con min-height 44px, che e' esattamente il
   pavimento giusto); la tabella del computo e' nascosta e sostituita da
   righe riflowate, scelta corretta; le etichette numerate della meta'
   inferiore sono fuori a ogni larghezza per decisione di impianto. Il
   rimpicciolimento a 0,72 di .pv-page e' neutralizzato da `zoom: 1`. */

/* 1. L'INTESTAZIONE DELL'EDITOR FINIVA SOTTO LA PILLOLA.
   .ce-toolbar arriva da web/style.css con `position: sticky; top: 0`, e la'
   e' giusta: dentro /app non galleggia nessuna barra sopra di lei. Qui sopra
   invece c'e' la navigazione, e il suo ingombro vero non e' --pv-nav-h ma il
   fondo della pillola — padding 4px + 52px di altezza + translateY(10px) =
   66px, misurato. Risultato: la barra dell'editor stava a y 0-64, cioe'
   INTERAMENTE coperta, con il titolo mezzo nascosto e un bottone tagliato.
   Si vedeva a ogni larghezza; sul telefono di piu', perche' la pillola
   arriva quasi a bordo schermo.
   Corretto solo per la landing: style.css e' condiviso con il prodotto e
   DESIGN.md dichiara l'editor area intoccabile.
   AGGIORNAMENTO 2026-09-26: `top: 74px` non ha mai agganciato la barra alla
   pagina — #pv-ide-fit ha overflow-y:hidden, quindi e' LUI il contenitore
   dello sticky, e la barra scendeva di 74px dentro la demo coprendo i nomi
   delle colonne (con una fascia vuota sopra). Qui la barra resta ferma in
   cima alla demo, come nel prodotto; scorrendo esce sotto la pillola.
   Solo sopra i 60rem: sotto, .pv-app__fit torna overflow:visible e lo sticky
   aggancia davvero la pagina — li' la regola originale funziona e resta. */
.pv-prototype { --pv-pillola-fondo: 66px; }
.pv-prototype .ce-toolbar {
  top: calc(var(--pv-pillola-fondo) + var(--pv-s-2xs));
}
@media (min-width: 60.0625rem) {
  .pv-prototype .ce-toolbar { position: static; }
}

/* Tabella della demo: 805px contro i 1400 dell'app. Le colonne allargate per
   /app (Nr. Ord. 64, unitario/TOTALE 86) qui mangiavano la descrizione fino a
   ~100px — una parola per riga e «M I S U R A Z I O N I» spezzato. Qui le
   intestazioni vanno a capo e le colonne di misura stanno strette: i numeri
   (24,000) ci stanno, la descrizione torna sui ~200px. */
.pv-prototype .pv-ide .ce-th { white-space: normal; }
.pv-prototype .pv-ide .ce-th-nr { width: 52px; }
.pv-prototype .pv-ide .ce-th:nth-child(n+4):nth-child(-n+7) { width: 60px; }  /* Par.ug … H/peso; «Quantità» resta a 68 */
.pv-prototype .pv-ide .ce-mis-label { white-space: nowrap; }  /* accanto c'e' solo una cella vuota */
.pv-prototype .pv-ide .ce-th-num:nth-last-child(2),
.pv-prototype .pv-ide .ce-th-num:nth-last-child(3) { width: 68px; }

/* Lo stesso ingombro vale per i salti interni: senza questo «L'interfaccia»
   porta la sezione a filo viewport e la pillola le mangia l'intestazione. */
html {
  scroll-padding-block-start: calc(66px + var(--pv-s-sm, 16px));
}

/* 2. TESTO DEI SUGGERIMENTI. Sono il modo principale di provare la demo, e
   sono pulsanti con testo di lettura dentro: 11,5px li rendeva faticosi da
   leggere prima ancora che da centrare. L'etichetta stava a 9,5px, sotto il
   pavimento che DESIGN.md fissa per il mono (--pv-kicker: 10,5px). */
@media (max-width: 40rem) {
  .pv-prototype .pv-sugg { font-size: 14px; line-height: 1.35; }
  .pv-prototype .pv-sugg__eti { font-size: var(--pv-kicker); }

  /* Tre PROSE, non etichette: il totale ricalcolato, la nota sulla demo e il
     disclaimer professionale. Stavano a 11px, che e' la misura giusta per una
     sigla e sbagliata per una frase — in mono anche di piu', perche' il passo
     fisso allunga la riga e stanca prima. Il limite 10,5-12px di DESIGN.md
     vale per le etichette; questi si leggono, quindi salgono. Il disclaimer
     in particolare non e' decorazione: dice al tecnico di verificare prima di
     firmare, e su un telefono deve potersi leggere senza avvicinarlo. */
  .pv-prototype .pv-proto-result,
  .pv-prototype .pv-app__cap,
  .pv-prototype .pv-ide__foot { font-size: 12.5px; line-height: 1.55; }
}

/* 3. BERSAGLI TATTILI RIMASTI FUORI. Il blocco `pointer: coarse` di riga 793
   copre i controlli della demo ma non questi quattro, misurati: il tasto del
   tema 32x32, il link dell'eroe alto 27, i link del footer 19, «Accedi» 21.
   Si allarga l'AREA SENSIBILE con uno strato invisibile, non il disegno:
   ingrossare il cerchio del tema o staccare il filetto dal testo cambierebbe
   la grammatica di DESIGN.md per risolvere un problema di dita. */
@media (pointer: coarse) {
  .nav__tema,
  .pv-link,
  .pv-foot__links a,
  .pv-foot__theme { position: relative; }

  .nav__tema::after,
  .pv-link::after,
  .pv-foot__links a::after,
  .pv-foot__theme::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    /* max() e non una misura fissa: dove l'elemento e' gia' abbastanza
       grande non lo si tocca, e non si creano aree che sporgono. */
    width: max(100%, 44px);
    height: max(100%, 44px);
  }

  /* I link del footer vanno a capo: senza respiro fra le righe, due aree da
     44px una sopra l'altra si sovrappongono e il dito prende quella sbagliata. */
  .pv-foot__links { row-gap: var(--pv-s-sm); }
}