/* ==========================================================================
   MiMuovo · pagina Fatture e costi (classi ft-*, vedi _src/f/fatture.mjs)
   Ogni riga di fattura con il suo mezzo e, sotto, il viaggio; le fatture senza
   targa ripartite sui mezzi e sul viaggio, con il totale che torna.
   ========================================================================== */
.scene .ft-tbl td{vertical-align:middle}
.scene .ft-tbl td.ft-v{white-space:normal;line-height:1.3}
.scene .ft-tbl td.ft-v small{display:block;font-size:10.5px;color:#7E8882;margin-top:2px}
.scene .ft-tbl tr.hl td.ft-v small{color:#2F6B12;font-weight:600}
.scene .ft-tbl .plate{font-size:11px;padding:4px 6px}
.scene .ft-tbl tr.hl td:first-child{box-shadow:inset 3px 0 0 #4E9A1B}

/* telefono: le righe vanno a capo invece di tagliarsi */
@media (max-width: 600px){
  .scene.ft-s .row{align-items:flex-start}
  .scene.ft-s .row .tx b,.scene.ft-s .row .tx span{white-space:normal}
  .scene.ft-s .row .am{padding-top:2px}
}

/* ripartizione di una fattura senza targa */
.scene .ft-rule{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:#5b655f;margin:-4px 0 6px}
.scene .ft-rule svg{width:14px;height:14px;color:#3B6E00;flex-shrink:0}
.scene .ft-oth{font-size:11.5px;font-weight:700;color:#5b655f;white-space:nowrap}
.scene .ft-trip{display:flex;align-items:center;gap:8px;margin-top:8px;padding:9px 11px;border-radius:11px;border:1px dashed #BFE0A0;background:#F8FCF4;font-size:11.5px;color:#2F6B12;font-weight:600}
.scene .ft-trip svg{width:14px;height:14px;flex-shrink:0}
.scene .ft-trip span{min-width:0}
.scene .ft-trip b{margin-left:auto;font-size:12.5px;white-space:nowrap}
.scene .vis .ft-trip{animation:ft-in .45s var(--ease-out) .35s both}
.scene .vis .ft-trip + .recon{animation:ft-in .45s var(--ease-out) .6s both}
@keyframes ft-in{from{opacity:0;transform:translateY(6px)}}

/* ---------------------------------------------------------------- bento */
.ft-chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--ink-dim)}
.ft-chain > svg{width:14px;height:14px}
.ft-chain span{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:#fff;border:1px solid var(--border);font-size:12.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.ft-chain span b{font-size:12px;color:var(--ink)}
.ft-chain span.on{background:var(--green-soft);border-color:#CFE6B4;color:var(--green-deep);font-weight:700}
.ft-chain span.on b{color:var(--green-deep)}

/* loghi delle reti: sul telefono le 8 caselle restano in 4 colonne dentro la
   card (prima il contenuto minimo le spingeva fuori, Shell e Telepass tagliati) */
@media (max-width: 600px){
  .logo-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .logo-row span{height:48px;padding:6px;min-width:0}
  .logo-row img{max-width:100%;max-height:26px}
}

/* flusso: sotto i 900 px la frase dell'agente va a capo invece di tagliarsi
   con i puntini; l'altezza minima evita salti quando la frase cambia */
@media (max-width: 899px){
  .flow-say{align-items:flex-start}
  .flow-say b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
}
@media (max-width: 640px){.flow-say b{min-height:calc(1.35em * 2)}}
@media (max-width: 480px){
  .flow-say .fdots{display:none}
  .flow-say b{min-height:calc(1.35em * 3)}
}

@media (prefers-reduced-motion: reduce){
  .scene .vis .ft-trip,.scene .vis .ft-trip + .recon{animation:none}
}