/* site-guida.css — la Guida (#/guida) e i «?» di aiuto contestuale (M25).
   Colori SOLO da tokens.css. La guida è un quaderno del mentore: indice
   fisso a sinistra sui grandi schermi, capitoli con eyebrow di fase, schizzi
   SVG degli schermi e — firma della pagina — la nuvoletta «Detto semplice»,
   la stessa spiegazione per un bambino di otto anni. Target ≥ 44px, focus
   visibile, movimento azzerato con prefers-reduced-motion. */

/* ---------- Il bottone «?» ---------- */

.aiuto {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: var(--space-2);
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-soft);
  background: var(--color-bg-elevated);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  cursor: pointer;
  vertical-align: middle;
  transition: color var(--transition-fast), border-color var(--transition-fast),
    background-color var(--transition-fast);
}

/* Il cerchio è piccolo per non pesare sull'etichetta; l'area toccabile no:
   uno pseudo-elemento la porta a 44×44 senza allargare il disegno. */
.aiuto::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 999px;
}

.aiuto:hover,
.aiuto[aria-expanded="true"] {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.aiuto:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ---------- Il pannello di aiuto ---------- */

.aiuto-pop {
  position: relative;
  max-width: var(--measure-reading);
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.aiuto-pop__text {
  margin: 0;
  line-height: var(--line-height-body);
}

.aiuto-pop__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
}

.aiuto-pop__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  color: var(--color-accent-hover);
  text-underline-offset: 3px;
}

.aiuto-pop__close {
  display: inline-grid;
  place-items: center;
  width: var(--touch-target);
  height: var(--touch-target);
  margin-left: auto;
  padding: 0;
  font: inherit;
  font-size: 1.25rem;
  color: var(--color-text-soft);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.aiuto-pop__close:hover { color: var(--color-text); background: var(--color-bg-inset); }

.aiuto-pop__link:focus-visible,
.aiuto-pop__close:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ---------- La Guida ---------- */

.guida {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .guida {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: var(--space-7);
  }
}

.guida__testa {
  grid-column: 1 / -1;
  max-width: var(--measure-reading);
}

.guida__testa h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-section);
  margin: 0 0 var(--space-3);
}

.guida__sotto {
  font-size: var(--font-size-large);
  line-height: var(--line-height-body);
  color: var(--color-text-soft);
  margin: 0;
}

/* Indice: fisso accanto al testo sui grandi schermi, in testa sui piccoli. */
.guida__indice {
  align-self: start;
}

@media (min-width: 900px) {
  .guida__indice {
    position: sticky;
    top: var(--space-4);
  }
}

.guida__indice h2 {
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-2);
}

.guida__indice ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

@media (min-width: 900px) {
  .guida__indice ol {
    flex-direction: column;
    gap: 0;
  }
}

.guida__indice a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0 var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: var(--radius-small);
}

.guida__indice a:hover {
  background: var(--color-bg-inset);
}

.guida__indice a[aria-current="true"] {
  color: var(--color-accent-hover);
  border-left-color: var(--color-accent);
  border-radius: 0;
}

.guida__indice a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.guida__corpo {
  min-width: 0;
}

/* Capitolo */
.guida__capitolo {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
  scroll-margin-top: var(--space-5);
}

.guida__capitolo:first-child {
  border-top: 0;
  padding-top: 0;
}

/* L'eyebrow porta un'informazione vera: la lettera della fase M·A·P·P·E·D
   o la parte dell'app. Mai un numero decorativo. */
.guida__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.guida__eyebrow b {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-radius: 999px;
}

.guida__capitolo h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-heading);
  margin: 0 0 var(--space-3);
}

.guida__capitolo h3 {
  font-size: var(--font-size-subhead);
  margin: var(--space-5) 0 var(--space-2);
}

.guida__capitolo p,
.guida__capitolo li {
  max-width: var(--measure-reading);
  line-height: var(--line-height-body);
}

.guida__capitolo ol,
.guida__capitolo ul {
  padding-left: 1.25em;
}

.guida__capitolo li + li {
  margin-top: var(--space-2);
}

/* Schizzo dello schermo: SVG inline con i colori dei token. */
.guida__figura {
  max-width: 440px;
  margin: var(--space-4) 0;
  padding: var(--space-3);
  background: var(--color-bg-inset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
}

.guida__figura svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-text);
}

.guida__figura figcaption {
  margin-top: var(--space-2);
  font-size: var(--font-size-small);
  color: var(--color-text-soft);
}

/* «Detto semplice»: la nuvoletta. Firma della pagina. */
.guida__semplice {
  position: relative;
  max-width: var(--measure-reading);
  margin: var(--space-5) 0 var(--space-4) var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-accent-soft);
  border-radius: 20px;
}

.guida__semplice::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 22px;
  width: 20px;
  height: 20px;
  background: var(--color-accent-soft);
  border-radius: 4px;
  transform: rotate(45deg);
}

.guida__semplice-tag {
  display: block;
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
}

.guida__semplice p {
  margin: 0;
  font-size: var(--font-size-large);
  line-height: var(--line-height-body);
}

/* «Prova subito»: l'uscita verso lo schermo di cui si parla. */
.guida__prova {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  margin-top: var(--space-3);
  padding: 0 var(--space-4);
  color: var(--color-accent-hover);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
}

.guida__prova:hover {
  border-color: var(--color-accent);
  background: var(--color-bg-elevated);
}

.guida__prova:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Il «?» spiegato dentro la guida stessa: un esempio vivo. */
.guida__esempio-aiuto {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-medium);
  max-width: var(--measure-reading);
}

/* Domande: elenco di definizioni. */
.guida__domande dt {
  font-weight: 600;
  margin-top: var(--space-4);
}

.guida__domande dd {
  margin: var(--space-1) 0 0;
  max-width: var(--measure-reading);
  line-height: var(--line-height-body);
}

@media (prefers-reduced-motion: reduce) {
  .aiuto { transition: none; }
}

/* Colori degli schizzi SVG: classi, non attributi style inline — la CSP di
   produzione (style-src 'self') li bloccherebbe. */
.guida__figura .sv-accent { fill: var(--color-accent); }
.guida__figura .sv-on-accent { fill: var(--color-on-accent); }
.guida__figura .sv-soft { fill: var(--color-accent-soft); }
.guida__figura .sv-stroke-accent { stroke: var(--color-accent); }

/* ---------- Ospiti del «?» ---------- */

/* Etichetta + «?» sulla stessa riga; il pannello si apre sotto. */
.aiuto-host {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Le card-formato degli hub (bottoni intere): il «?» sta nell'angolo della
   card, il pannello occupa una riga intera della griglia. */
.format-cards > .format-card-host {
  position: relative;
  display: grid;
}

.format-cards > .format-card-host > .aiuto {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  margin: 0;
  z-index: 1;
}

.format-cards > .aiuto-pop {
  grid-column: 1 / -1;
  margin-top: 0;
}

/* In testata e nel piè di pagina il pannello scende sotto la barra. */
.app__header { position: relative; }
.app__header .aiuto-pop {
  position: absolute;
  right: var(--space-4);
  top: 100%;
  z-index: 20;
  width: min(380px, calc(100vw - 2 * var(--space-4)));
  margin: var(--space-2) 0 0;
}

.sync-host { display: inline-flex; align-items: center; gap: var(--space-2); }
.app__footer .aiuto-pop { flex-basis: 100%; width: 100%; }