/* ==========================================================================
   MiMuovo · pagina Margine per targa (classi mg-*, vedi _src/f/margine.mjs)
   Testata: il piazzale; chiuso il viaggio del 21/10 la card di FL483KT si
   aggiorna. Passi: viaggi, scontrino, scontrino = riga di fattura, ricavi meno
   diretti meno indiretti, storia del mezzo con le foto.
   Movimento: solo transform e opacity, --ease-out.
   ========================================================================== */
.scene .mg{container:mg / inline-size;position:relative}
.scene .mg-sub{margin:12px 0 8px}
/* stretto (telefono): le righe vanno a capo invece di tagliarsi */
@container mg (max-width: 360px){
  .scene .mg .row{align-items:flex-start}
  .scene .mg .row .tx b,.scene .mg .row .tx span{white-space:normal}
  .scene .mg .row .am{padding-top:2px}
}

/* piazzale: distribuzione dei 62 mezzi */
.scene .mg-dist{display:flex;gap:3px;height:8px;border-radius:4px;overflow:hidden;margin:2px 0 8px}
.scene .mg-dist i{display:block;border-radius:2px}
.scene .mg-dist .pos,.scene .mg-lgd .pos{background:#529900}
.scene .mg-dist .mid,.scene .mg-lgd .mid{background:#E8A500}
.scene .mg-dist .neg,.scene .mg-lgd .neg{background:#D64533}
.scene .mg-lgd{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11px;font-weight:600;color:#5b655f;margin-bottom:12px}
.scene .mg-lgd span{display:inline-flex;align-items:center;gap:6px}
.scene .mg-lgd i{width:8px;height:8px;border-radius:2px}
@container mg (max-width: 560px){
  .scene .mg .yard2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scene .mg .vf{flex-direction:column;gap:2px}
  .scene .mg .vf > span{display:flex;justify-content:space-between;gap:6px}
}
.scene .mg .vcd{min-width:0}
.scene .mg .vf{overflow:hidden}
.scene[data-step="2"] .vcd.mg-live{border-color:#BFE0A0;box-shadow:0 0 0 3px #EAF6DF;transform:translateY(-2px)}
/* testata larga: card più grandi, come la dashboard vera */
@container mg (min-width: 760px){
  .scene .mg .ui-h h4{font-size:18px}
  .scene .mg-dist{height:10px;margin-top:4px}
  .scene .mg-lgd{font-size:12px;margin-bottom:16px}
  .scene .mg .yard2{gap:14px}
  .scene .mg .vcd{padding:14px;border-radius:14px}
  .scene .mg .vv{padding:16px 12px 10px;border-radius:11px}
  .scene .mg .vv svg{height:72px}
  .scene .mg .vr{margin-top:12px}
  .scene .mg .vp{font-size:14px}
  .scene .mg .vk{font-size:11.5px;padding:3px 8px}
  .scene .mg .vf{font-size:11px;margin-top:9px}
  .scene .mg .vm{font-size:10px;padding:7px 10px;margin-top:10px}
  .scene .mg .vm b{font-size:13px}
  .scene .mg-trip{margin-top:16px;padding:14px 18px;gap:10px 28px}
  .scene .mg-trip-ic{width:36px;height:36px}
  .scene .mg-trip-tx b{font-size:14px}
  .scene .mg-trip-tx small{font-size:12px}
  .scene .mg-trip-n b{font-size:15px}
}

/* il viaggio chiuso che aggiorna la card */
.scene .mg-trip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:12px;padding:11px 14px;border-radius:14px;border:1px solid #BFE0A0;background:#F4FAEE}
.scene .mg-trip-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#fff;color:#3B6E00;flex-shrink:0}
.scene .mg-trip-ic svg{width:15px;height:15px}
.scene .mg-trip-tx{flex:1 1 220px;min-width:0}
.scene .mg-trip-tx b{display:block;font-size:12.5px;font-weight:700}
.scene .mg-trip-tx small{display:block;font-size:11px;color:#5b655f;margin-top:1px}
.scene .mg-trip-n small{display:block;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#7E8882}
.scene .mg-trip-n b{display:block;font:700 13px/1.2 var(--mono);white-space:nowrap;margin-top:2px}
.scene .mg-trip-n.ok b{color:#2F6B12}
@container mg (max-width: 560px){
  .scene .mg-trip{gap:8px 14px;padding:10px 12px}
  .scene .mg-trip-tx{flex-basis:calc(100% - 44px)}
  .scene .mg-trip-n{flex:1 1 0}
  .scene .mg-trip-n b{font-size:12px}
}

/* scheda mezzo: foto vera del camion nella testata */
.scene .mg-ph img{object-position:30% 66%;transform:scale(2.1);transform-origin:32% 66%}

/* viaggi: totale del mese */
.scene .mg-sum{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:10px;padding:10px 12px;border-top:1.5px solid #121712;font-size:12px;font-weight:700}
.scene .mg-sum b{font:800 15px/1 var(--mono);letter-spacing:-.02em;color:#2F6B12}

/* scontrino dalla foto dell'autista */
.scene .row .ic.mg-rc{background:#F1F3EF;overflow:hidden;padding:0}
.scene .row .ic.mg-rc img{width:100%;height:100%;object-fit:cover;object-position:center 30%}

/* scontrino e riga di fattura: lo stesso numero */
.scene .mg-match{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-items:stretch}
.scene .mg-doc{display:grid;gap:3px;padding:12px 14px;border-radius:14px;border:1px solid #E6EAE2;background:#fff;box-shadow:0 1px 2px rgba(18,23,18,.04),0 12px 26px -20px rgba(18,23,18,.3)}
.scene .mg-dh{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#5b655f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene .mg-dh svg{width:14px;height:14px;color:#3B6E00;flex-shrink:0}
.scene .mg-dh img{width:16px;height:16px;object-fit:contain;flex-shrink:0}
.scene .mg-doc b{font:800 20px/1.15 var(--mono);letter-spacing:-.03em;margin-top:4px}
.scene .mg-doc small{font-size:11px;color:#7E8882}
.scene .mg-eq{justify-self:center;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#EAF6DF;color:#2F6B12}
.scene .mg-eq svg{width:14px;height:14px}
@container mg (min-width: 360px){.scene .mg-match{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}.scene .mg-doc{padding:11px 12px}}
.scene .mg-ok{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;font-size:11.5px;color:#2F6B12}
.scene .vis .mg-doc:last-child{animation:mg-in .5s var(--ease-out) .25s both}
.scene .vis .mg-eq{animation:mg-pop .4s var(--ease-out) .55s both}
.scene .vis .mg-ok{animation:mg-in .45s var(--ease-out) .75s both}
@keyframes mg-in{from{opacity:0;transform:translateY(6px)}}
@keyframes mg-pop{from{opacity:0;transform:scale(.85)}}

/* rendimento: ricavi meno diretti meno indiretti, quello che resta è il margine */
.scene .mg-big{margin-bottom:14px}
.scene .mg-big small{display:block;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8B948E}
.scene .mg-big b{display:block;font:800 26px/1.1 var(--mono);letter-spacing:-.03em;color:#2F6B12;margin-top:4px}
.scene .mg-big span{display:block;font-size:11.5px;color:#5b655f;margin-top:3px}
.scene .mg-wf{display:grid;gap:11px}
.scene .mg-wt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px;font-weight:700}
.scene .mg-wt span{min-width:0}
.scene .mg-wt small{display:block;font-size:10.5px;font-weight:500;color:#7E8882;margin-top:1px}
.scene .mg-wt b{font:700 12.5px/1 var(--mono);white-space:nowrap}
.scene .mg-wl.wm .mg-wt b{color:#2F6B12;font-weight:800}
.scene .mg-tr{position:relative;height:12px;border-radius:4px;background:#F3F5F0;margin-top:6px;overflow:hidden}
.scene .mg-tr i{position:absolute;top:0;bottom:0;left:calc(var(--l) * 100%);width:calc(var(--w) * 100%);border-radius:4px;background:#B9DC98;transform:scaleX(0);transform-origin:right center;transition:transform .7s var(--ease-out)}
.scene .mg-wl.wr i,.scene .mg-wl.wm i{transform-origin:left center}
.scene .mg-wl.wd i{background:#E9A598}
.scene .mg-wl.wi i{background:#F2C8BC}
.scene .mg-wl.wm i{background:#4E9A1B}
.scene .vis .mg-tr i{transform:none}
.scene .vis .mg-wl:nth-child(2) i{transition-delay:.18s}
.scene .vis .mg-wl:nth-child(3) i{transition-delay:.36s}
.scene .vis .mg-wl:nth-child(4) i{transition-delay:.54s}

/* storia del mezzo: foto vere, una accanto all'altra, mai sovrapposte */
@container mg (max-width: 360px){.scene .mg .card{padding:10px}.scene .mg .card .row{padding:8px 9px}}
.scene .mg-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.scene .mg-photos figure{position:relative;margin:0;aspect-ratio:4 / 3;border-radius:10px;overflow:hidden;background:#EEF1EA}
.scene .mg-photos img{display:block;width:100%;height:100%;object-fit:cover}
.scene .mg-photos figure:first-child img{object-position:35% 70%}
.scene .mg-photos figure:last-child img{object-position:45% 35%}
.scene .mg-photos figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 7px 5px;font-size:9.5px;font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(18,23,18,.62));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------------------------------------------------------------- bento */
.mg-pair{display:grid;gap:6px}
.mg-pair span{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:#fff;border:1px solid var(--border);font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.mg-pair span svg{width:14px;height:14px;flex-shrink:0;color:var(--green-deep)}
.mg-pair b{margin-left:auto;font-size:12.5px;color:var(--ink);white-space:nowrap}
.mg-pair .ok{border-color:#CFE6B4;color:var(--green-deep)}
.mg-split{display:flex;gap:3px;height:14px;border-radius:5px;overflow:hidden}
.mg-split i{display:block;background:#E9A598;border-radius:2px}
.mg-split i.si{background:#F2C8BC}
.mg-split i.sm{background:var(--green)}
.mg-split-l{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--ink-soft)}
.mg-split-l span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:#E9A598;margin-right:6px;vertical-align:0}
.mg-split-l .si::before{background:#F2C8BC}
.mg-split-l .sm::before{background:var(--green)}
.mg-chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--ink-dim)}
.mg-chain > svg{width:14px;height:14px}
.mg-chain span{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}
.mg-chain span.on{background:var(--green-soft);border-color:#CFE6B4;color:var(--green-deep);font-weight:700}
.mg-shot{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:16 / 7;background:var(--paper-soft)}
.mg-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* 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)}
}

/* movimento ridotto: stati finali */
@media (prefers-reduced-motion: reduce){
  .scene .mg *{animation:none!important}
  .scene .mg-tr i{transform:none;transition:none}
  .scene[data-step="2"] .vcd.mg-live{transform:none}
}