/* =========================================================
   TRADUCI — solo quello che live.css non ha gia'
   Le classi condivise (.zona, .campo, .cv__pannello, .btn--mini)
   stanno in live.css: qui c'e' solo cio' che serve a questa pagina.
   ========================================================= */

/* la tendina delle lingue e del formato */
.tendina{
  width:100%;padding:12px 14px;border:0;border-radius:11px;
  font:inherit;font-size:13px;color:#fff;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='rgba(255,255,255,.45)' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:36px;cursor:pointer;
  transition:box-shadow .3s var(--ease);
}
.tendina:focus{outline:0;box-shadow:inset 0 0 0 1px var(--arancio-2)}
.tendina option{background:#0b0b0b;color:#fff}

/* i due riquadri di testo, dentro e fuori */
.riquadro{
  width:100%;resize:vertical;min-height:150px;padding:14px 15px;border:0;border-radius:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.7;
  color:#fff;background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  white-space:pre;overflow-wrap:normal;overflow-x:auto;
  transition:box-shadow .3s var(--ease);
}
.riquadro::placeholder{color:var(--ink-4);font-family:var(--f-body)}
.riquadro:focus{outline:0;box-shadow:inset 0 0 0 1px var(--arancio-2)}

/* la riga da → a */
.lingue-riga{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end}
.freccia{padding-bottom:12px;color:var(--arancio);font-size:15px}

/* l'avanzamento della traduzione */
.progresso{height:3px;margin-top:16px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.07)}
.progresso i{display:block;height:100%;width:0;border-radius:2px;background:var(--arancio);
  transition:width .35s var(--ease-out)}
.progresso__testo{margin:9px 0 0;min-height:16px;font-size:11.5px;letter-spacing:.04em;color:var(--ink-4)}

/* i messaggi: uno stile solo per tutta la pagina */
.nota{margin:8px 0 0;min-height:16px;font-size:12px;line-height:1.6;color:var(--ink-4)}
.nota--si{color:var(--arancio)}
.nota--no{color:#ffb28a}

.avviso{
  margin:0 0 clamp(22px,3vw,34px);padding:15px 18px;border-radius:14px;
  font-size:12.5px;line-height:1.7;color:var(--ink-3);
  background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.avviso--no{color:#ffb28a;background:var(--arancio-4);box-shadow:inset 0 0 0 1px var(--arancio-3)}
.avviso[hidden]{display:none}

.btn--mini:disabled{opacity:.4;cursor:default}
.btn--mini:disabled:hover{color:var(--ink-3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

@media (max-width:620px){
  .lingue-riga{grid-template-columns:1fr}
  .freccia{display:none}
}