/* Unica area scorrevole del sito: tutta la cronologia (comandi + output)
   scorre qui dentro, comando compreso. Barra del menu e logo (agganciato)
   sono fuori da questo contenitore, quindi restano sempre visibili. */
#terminal-output{
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  font-size: 14px;
  line-height: 1.9;
  padding-bottom: 32px;
  transition: flex-grow .7s cubic-bezier(.4,0,.2,1);
}

/* Scrollbar sottile e visibile SOLO se il dispositivo ha davvero un
   puntatore preciso con hover (mouse/trackpad): è il segnale giusto,
   non la larghezza dello schermo — un desktop a bassa risoluzione o con
   finestra stretta ha comunque un mouse e deve vedere la barra. */
@media (hover: hover) and (pointer: fine){
  #terminal-output{
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--border) transparent; /* Firefox: thumb, track */
  }

  #terminal-output::-webkit-scrollbar{
    width: 8px;
  }

  #terminal-output::-webkit-scrollbar-track{
    background: transparent;
  }

  #terminal-output::-webkit-scrollbar-thumb{
    background: var(--border);
    border-radius: 4px;
  }

  #terminal-output::-webkit-scrollbar-thumb:hover{
    background: var(--text-muted);
  }
}

/* Touch (niente hover preciso): niente scrollbar, si scorre col dito. */
@media (hover: none), (pointer: coarse){
  #terminal-output{
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Edge legacy */
  }

  #terminal-output::-webkit-scrollbar{
    display: none; /* Chrome, Safari, browser Android */
    width: 0;
  }
}

.page.landing #terminal-output{
  flex-grow: 0;
  flex-basis: auto;
}

.prompt{
  color: var(--accent-light);
  margin: 10px 0 0;
}

.hint{
  color: var(--text-muted);
  margin: 10px 0 0;
}

.output{
  color: var(--text-output);
  margin-top: 8px;
  margin-bottom: 0;
  opacity: 0;
  transition: opacity .3s ease;
}

.output.visible{
  opacity: 1;
}

.output.first{
  margin-top: 10px;
}

.output.last{
  margin-bottom: 24px;
}

.error{
  color: var(--error);
  margin: 10px 0 20px;
}

.list{
  margin: 6px 0 0;
  padding-left: 20px;
}

.list li{
  margin: 4px 0;
}

.cards{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 0;
}

.cards.first{
  margin-top: 10px;
}

.cards.last{
  margin-bottom: 24px;
}

.card{
  border: 1px solid var(--border);
  background: #fff;
  padding: 18px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .3s ease;
}

.card.visible{
  opacity: 1;
}

.card--dashed{
  border: 1px dashed #c3cfc6;
  background: #fbfcfb;
}

.card-title{
  display: block;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.card-title:hover{
  color: var(--accent-light);
  text-decoration: underline;
}

.card--dashed .card-title{
  color: #6b7d70;
}

.card--dashed .card-title:hover{
  color: #52625a;
}

.card-text{
  color: var(--text-output);
  font-size: 13px;
  margin: 8px 0 0;
  line-height: 1.6;
}

.card--dashed .card-text{
  color: #7c8c80;
}

.json{
  color: var(--text);
}

.json-indent{
  padding-left: 22px;
}

.help-indent{
  padding-left: 16px;
}