/* Stili condivisi — Guida al Prompt Engineering, Pietro Monari */

html { scroll-behavior: smooth; }

/* Tailwind arriva da CDN: se tarda o non risponde, senza questa regola le tre
   sezioni dei livelli comparirebbero tutte insieme. Il selettore resta stretto
   di proposito: un `.hidden` generico batterebbe le utility responsive di
   Tailwind (sm:inline e simili) per pari specificità e ordine di caricamento. */
.content-section.hidden,
#vector-detail.hidden { display: none; }

/* La barra di navigazione è sticky: senza questo margine i salti alle ancore
   finiscono sotto di essa. */
main[id], section[id] { scroll-margin-top: 5rem; }

.fade-in { animation: fadeIn 0.35s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in { animation: none; }
}

.code-block {
  background-color: #1e293b;
  color: #a5b4fc;
  padding: 1rem;
  border-radius: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-x: auto;
  border-left: 4px solid #3b82f6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Link di navigazione */
.nav-link {
  padding: 0.5rem 0.9rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}
.nav-link:hover { background-color: #f1f5f9; color: #0f172a; }
.nav-link[aria-current="page"] { background-color: #eff6ff; color: #1d4ed8; }

/* Visibile solo agli screen reader e ai parser automatici */
.sr-only-visually {
  position: absolute;
  left: -9999px;
  top: auto;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/* Console del laboratorio */
.console-line { animation: fadeIn 0.2s ease-out; }

/* Celle della tabella di decodifica che rimandano al vettore nel simulatore */
.vector-jump {
  text-align: left;
  color: #1d4ed8;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.vector-jump:hover { color: #b91c1c; }