/* ============================================================================
   MundaApp · Munda Flow — the load board, the fair-price check, the split.

   This sheet only adds what the transport screen needs. Everything structural
   (the overlay, the bar, the hero, cards, buttons, nav, sheets) is the .zm
   family already on the phone, so Flow looks like the rest of the app rather
   than a page bolted on beside it.

   Colour carries meaning, and only one meaning each:
     green  = the price sits inside the fair band
     amber  = it is outside the band, or there is not enough to check yet
     red    = it is under the haulier's own cost floor
   ========================================================================== */

.flow .zm-nav{grid-template-columns:repeat(5,1fr)}

/* ---------- role switch ---------------------------------------------------- */
.fl-roles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  margin:14px 0 0;padding:4px;border-radius:16px;
  background:#EFE7D4;border:1px solid #E1D7C0;
}
.fl-roles button{
  border:0;background:transparent;border-radius:12px;padding:9px 4px 8px;min-height:56px;
  font-size:.74rem;font-weight:700;letter-spacing:.02em;color:#5A665F;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:background .16s,color .16s,box-shadow .16s;
}
.fl-roles button svg{width:16px;height:16px;opacity:.75}
.fl-roles button[aria-pressed="true"]{
  background:#FFFDF8;color:#0E5B22;
  box-shadow:0 1px 2px rgba(10,10,10,.06),0 8px 16px -14px rgba(10,10,10,.5);
}
.fl-roles button[aria-pressed="true"] svg{opacity:1}

/* ---------- what this page is, in one line -------------------------------- */
.fl-intro{
  display:flex;gap:11px;align-items:flex-start;
  margin-top:14px;padding:13px 14px;border-radius:16px;
  background:linear-gradient(112deg,#FFF8E8,#FFFDF8 62%);
  border:1px solid #EADFC3;
}
.fl-intro__ico{
  width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:#0E5B22;color:#EAF6E1;box-shadow:0 8px 16px -12px rgba(14,91,34,.9);
}
.fl-intro__ico svg{width:17px;height:17px}
.fl-intro p{font-size:.83rem;line-height:1.5;color:#4E5B54}
.fl-intro b{color:#0A3D1C}

/* ---------- a load -------------------------------------------------------- */
.fl-list{display:flex;flex-direction:column;gap:11px;margin-top:12px}

.fl-load{
  position:relative;background:var(--zm-card);border:1px solid var(--zm-line);
  border-radius:18px;box-shadow:var(--zm-shadow);overflow:hidden;
}
.fl-load__body{padding:14px 14px 12px}

.fl-route{display:flex;align-items:center;gap:8px;min-width:0}
.fl-route b{
  font-family:var(--zm-display);font-size:1.12rem;font-weight:600;letter-spacing:-.015em;
  color:#0A3D1C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42%;
}
.fl-route svg{width:26px;height:12px;flex:none;color:#9AA79E}
.fl-route .fl-when{
  margin-left:auto;flex:none;font-size:.68rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#6B776F;
}

.fl-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.fl-chip{
  font-size:.7rem;font-weight:600;color:#44524A;background:#F5F0E2;
  border:1px solid #E7DCC3;border-radius:999px;padding:3px 9px;white-space:nowrap;
}
.fl-chip--ghost{background:transparent;color:#7A857E;border-style:dashed}
.fl-chip--truck{background:#EAF4E2;border-color:#D2E6C4;color:#215A2C}

.fl-buy{display:flex;align-items:flex-end;gap:10px;margin-top:12px;padding-top:11px;border-top:1px dashed #E4DAC4}
.fl-buy small{display:block;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:#7A857E;font-weight:700}
/* the price column only — the verdict beside it has its own type scale */
.fl-buy > div:first-child > b{
  font-family:var(--zm-display);font-size:1.42rem;font-weight:600;color:#0A3D1C;
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.fl-buy > div:first-child > i{font-style:normal;font-size:.7rem;color:#7A857E;margin-left:2px}

/* ---------- the verdict --------------------------------------------------- */
.fl-verdict{
  margin-left:auto;text-align:right;font-size:.7rem;font-weight:700;line-height:1.25;max-width:52%;
}
.fl-verdict span{display:block;font-weight:600;font-size:.64rem;color:#6B776F;margin-top:2px}
.fl-verdict--fair{color:#14721F}
.fl-verdict--high{color:#B4550B}
.fl-verdict--low{color:#B32014}
.fl-verdict--none{color:#6B776F}
.fl-verdict b{display:inline-flex;align-items:center;gap:4px;font-family:var(--zm-font);font-size:.7rem;font-weight:700}
.fl-verdict b svg{width:12px;height:12px}

.fl-pill{
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;
  font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
}
.fl-pill svg{width:11px;height:11px}
.fl-pill--fair{background:#E7F5E4;color:#14721F;border:1px solid #BFE3B6}
.fl-pill--sample{background:#F1ECE0;color:#6B6350;border:1px solid #E0D6BF}
.fl-pill--live{background:#0E5B22;color:#EAF6E1;border:1px solid #0E5B22}
.fl-pill--trip{background:#FFF1DC;color:#A85A0A;border:1px solid #F2D9B4}
.fl-pill--done{background:#EDF3EA;color:#2F5A33;border:1px solid #CFE0C6}

.fl-load__acts{display:flex;gap:7px;padding:0 14px 14px}
.fl-load__acts .zm-btn{flex:1;height:38px;font-size:.78rem}
.fl-load__acts .zm-btn--ghost{flex:0 0 auto;padding:0 13px}

/* progress toward a corridor that can be priced */
.fl-need{display:flex;align-items:center;gap:6px;font-size:.66rem;color:#7A857E}
.fl-need i{width:5px;height:5px;border-radius:999px;background:#D8CEB6;display:block}
.fl-need i[data-on="1"]{background:#198A00}

/* ---------- the fair-price meter ----------------------------------------- */
.fl-meter{margin-top:14px}
.fl-meter__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fl-meter__head h4{font-size:.95rem}
.fl-meter__hi{font-family:var(--zm-display);font-size:1.34rem;font-weight:600;color:#0A3D1C;font-variant-numeric:tabular-nums}
.fl-track{
  position:relative;height:11px;margin:11px 0 6px;border-radius:999px;overflow:visible;
  background:linear-gradient(90deg,#F0E6D2,#EBE1CC 50%,#F0E6D2);
  box-shadow:inset 0 0 0 1px #E3D7BC;
}
.fl-track__band{
  position:absolute;top:0;bottom:0;background:rgba(25,138,0,.16);
  border-left:1px solid rgba(25,138,0,.45);border-right:1px solid rgba(25,138,0,.45);
}
.fl-track__pin{
  position:absolute;top:-4px;width:3px;height:19px;border-radius:2px;background:#0A3D1C;
  box-shadow:0 0 0 3px rgba(255,253,248,.9);transform:translateX(-1.5px);
  transition:left .28s cubic-bezier(.3,1,.4,1);
}
.fl-scale{display:flex;justify-content:space-between;font-size:.6rem;color:#7A857E;letter-spacing:.02em}

.fl-break{margin-top:12px;border-top:1px dashed #E4DAC4;padding-top:9px}
.fl-break div{display:flex;justify-content:space-between;gap:10px;font-size:.76rem;padding:3px 0;color:#4E5B54}
.fl-break div b{font-variant-numeric:tabular-nums;font-weight:700;color:#22322A}
.fl-break div.is-total{border-top:1px solid #E4DAC4;margin-top:4px;padding-top:7px;font-weight:700;color:#0A3D1C}
.fl-break div.is-total b{font-family:var(--zm-display);font-size:1.02rem}
.fl-break__why{font-size:.68rem;color:#7A857E;margin-top:7px;line-height:1.5}

/* ---------- form rows ---------------------------------------------------- */
.fl-form{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.fl-form .fl-wide{grid-column:1 / -1}
.fl-field{
  display:flex;flex-direction:column;gap:3px;padding:9px 11px;border-radius:13px;
  background:#FFFDF8;border:1px solid #E4DAC4;
}
.fl-field:focus-within{border-color:#198A00;box-shadow:0 0 0 3px rgba(25,138,0,.12)}
.fl-field label{font-size:.6rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#7A857E}
.fl-field input,.fl-field select{
  border:0;background:transparent;font:inherit;font-size:.92rem;font-weight:600;color:#0A3D1C;
  padding:0;width:100%;min-width:0;outline:none;appearance:none;
}
.fl-field input::placeholder{color:#A8B0AA;font-weight:500}
.fl-field select{
  padding-right:16px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A857E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right center/11px 11px no-repeat;
}
.fl-field__hint{font-size:.62rem;color:#8B958E;font-weight:500;letter-spacing:0;text-transform:none}

.fl-split{display:flex;align-items:center;gap:8px;margin-top:12px;padding:11px 13px;border-radius:14px;background:#F6F1E1;border:1px dashed #DCCFB0}
.fl-split__ico{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:#0A3D1C;color:#FFE1AE}
.fl-split__ico svg{width:15px;height:15px}
.fl-split p{font-size:.75rem;line-height:1.45;color:#5A665F}
.fl-split b{color:#0A3D1C}

/* ---------- pay slip ----------------------------------------------------- */
.fl-slip{
  position:relative;margin-top:13px;border-radius:16px;overflow:hidden;
  background:#FFFDF8;border:1px solid #DED3B8;box-shadow:0 14px 28px -26px rgba(10,10,10,.7);
}
.fl-slip::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,#198A00 0 34%,#DE2010 34% 50%,#0A0A0A 50% 66%,#EF7D00 66% 100%);
}
.fl-slip__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 15px 9px}
.fl-slip__head b{font-family:var(--zm-display);font-size:1rem;color:#0A3D1C;display:block}
.fl-slip__head small{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#8B958E;font-weight:700}
.fl-slip__no{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;color:#6B776F;text-align:right;line-height:1.35}
.fl-slip__no b{display:block;color:#0A3D1C;font-size:.76rem;letter-spacing:.03em}

.fl-slip__rows{padding:0 15px}
.fl-slip__rows div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:.79rem;color:#4E5B54}
.fl-slip__rows b{font-variant-numeric:tabular-nums;color:#22322A}
.fl-slip__rule{position:relative;height:1px;margin:8px 15px;background:repeating-linear-gradient(90deg,#D9CDB2 0 6px,transparent 6px 12px)}
.fl-slip__rule::before,.fl-slip__rule::after{
  content:"";position:absolute;top:-7px;width:14px;height:14px;border-radius:999px;background:#F7F2E6;
}
.fl-slip__rule::before{left:-22px;box-shadow:inset -1px 0 0 #DED3B8}
.fl-slip__rule::after{right:-22px;box-shadow:inset 1px 0 0 #DED3B8}

.fl-slip__net{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:2px 15px 13px}
.fl-slip__net small{font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:#7A857E;font-weight:800}
.fl-slip__net b{font-family:var(--zm-display);font-size:1.66rem;color:#0A3D1C;font-variant-numeric:tabular-nums;line-height:1}
.fl-slip__net i{font-style:normal;font-size:.68rem;color:#7A857E;display:block;margin-top:2px}

.fl-slip__foot{
  display:flex;align-items:center;gap:9px;padding:10px 15px 13px;
  background:#F8F3E5;border-top:1px solid #EDE4CE;font-size:.68rem;color:#6B776F;line-height:1.45;
}
.fl-slip__seal{
  width:30px;height:30px;flex:none;border-radius:999px;display:grid;place-items:center;
  border:1.5px dashed #C9B98D;color:#8A7A4E;font-weight:800;font-size:.58rem;letter-spacing:.04em;
}
.fl-slip--paid .fl-slip__seal{border-style:solid;border-color:#198A00;color:#14721F;background:#EAF6E4}

/* ---------- trip timeline ------------------------------------------------ */
.fl-steps{display:flex;align-items:center;gap:0;margin-top:11px}
.fl-steps__n{
  display:flex;align-items:center;gap:6px;font-size:.66rem;font-weight:700;color:#8B958E;white-space:nowrap;
}
.fl-steps__n i{
  width:9px;height:9px;border-radius:999px;background:#E2D8C1;display:block;flex:none;
}
.fl-steps__n[data-on="1"]{color:#14721F}
.fl-steps__n[data-on="1"] i{background:#198A00;box-shadow:0 0 0 3px rgba(25,138,0,.14)}
.fl-steps__bar{flex:1;height:1px;background:#E2D8C1;margin:0 7px}
.fl-steps__bar[data-on="1"]{background:#A8CF9C}

/* ---------- stats -------------------------------------------------------- */
.fl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.fl-stat{background:#FFFDF8;border:1px solid #E4DAC4;border-radius:14px;padding:10px 11px}
.fl-stat small{display:block;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#7A857E;font-weight:800;line-height:1.3}
.fl-stat b{font-family:var(--zm-display);font-size:1.24rem;color:#0A3D1C;font-variant-numeric:tabular-nums;line-height:1.15}
.fl-stat i{font-style:normal;display:block;font-size:.62rem;color:#8B958E}

/* ---------- empty states ------------------------------------------------- */
.fl-empty{
  margin-top:12px;padding:22px 16px;border-radius:18px;text-align:center;
  background:#FFFDF8;border:1px dashed #DCCFB0;
}
.fl-empty__ico{
  width:44px;height:44px;margin:0 auto 9px;border-radius:14px;display:grid;place-items:center;
  background:#EAF4E2;color:#0E5B22;border:1px solid #D2E6C4;
}
.fl-empty__ico svg{width:21px;height:21px}
.fl-empty h3{font-size:1rem;margin-bottom:4px}
.fl-empty p{font-size:.8rem;color:#6B776F;line-height:1.5;max-width:34ch;margin:0 auto}

/* ---------- filter row --------------------------------------------------- */
.fl-filters{display:flex;gap:6px;overflow-x:auto;padding:2px 0 4px;margin-top:12px;scrollbar-width:none}
.fl-filters::-webkit-scrollbar{display:none}
.fl-filters button{
  flex:none;border:1px solid #E1D7C0;background:#FFFDF8;border-radius:999px;
  padding:6px 13px;min-height:42px;font-size:.73rem;font-weight:700;color:#5A665F;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.fl-filters button[aria-pressed="true"]{background:#0E5B22;border-color:#0E5B22;color:#F4FBEF}

/* ---------- small print -------------------------------------------------- */
.fl-fine{font-size:.68rem;color:#7A857E;line-height:1.55;margin-top:10px}
.fl-fine b{color:#4E5B54}

@media (max-width:360px){
  .fl-form{grid-template-columns:1fr}
  .fl-buy b{font-size:1.28rem}
}

/* ---------- hero plate ---------------------------------------------------- */
.fl-seal{
  align-self:end;justify-self:end;width:104px;text-align:center;
  padding:12px 8px 11px;border-radius:16px;
  background:rgba(6,38,24,.55);border:1px solid rgba(255,225,174,.34);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
}
.fl-seal b{display:block;font-family:var(--zm-display);font-size:1.7rem;color:#FFC56B;line-height:1;font-weight:600}
.fl-seal span{display:block;font-size:.55rem;line-height:1.32;color:#CFE9C2;margin-top:5px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:700}
@media (max-width:420px){.fl-seal{width:92px;padding:10px 6px 9px}.fl-seal b{font-size:1.5rem}}

/* ---------- the return leg, stated --------------------------- */
.fl-return{
  display:flex;align-items:center;gap:6px;margin:8px 0 0;
  font-size:.72rem;line-height:1.35;color:#2F6B44;font-weight:600;
}
.fl-return svg{width:13px;height:13px;flex:none;color:#4E9A63}

/* ---------- both legs against one ---------------------------- */
.fl-compare{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding:8px 10px;border-radius:10px;
  background:#F1ECE0;border:1px dashed #D8CBB0;
}
.fl-compare small{
  display:block;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:#7A857E;font-weight:700;
}
.fl-compare b{
  font-family:var(--zm-display);font-size:.95rem;color:#6C7A70;
  text-decoration:line-through;text-decoration-thickness:1px;
}
.fl-compare__save{text-align:right;flex:none}
.fl-compare__save b{
  display:block;font-size:1rem;color:#0A3D1C;text-decoration:none;
}
.fl-compare__save span{display:block;font-size:.64rem;color:#5A6B5E}

/* ---------- capacity ---------------------------------------- */
.fl-cap{margin-top:9px}
.fl-cap__bar{height:5px;border-radius:3px;background:#E4DAC2;overflow:hidden}
.fl-cap__bar i{display:block;height:100%;background:#198A00;border-radius:3px}
.fl-cap__txt{font-size:.68rem;color:#5A6B5E;margin-top:4px}

/* ---------- the load photograph ------------------------------ */
.fl-shot{
  display:block;width:100%;height:132px;object-fit:cover;
  border-radius:10px;border:1pt solid #DCCFB2;margin-top:10px;
}
.fl-shot__lbl{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#7A857E;font-weight:700;margin-top:9px}

/* ---------- the pump price, from the desk -------------------------------- */
.fl-fuel-note{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:9px;padding-top:8px;border-top:1px dashed #E3D7BC;
  font-size:.68rem;line-height:1.4;color:#6B776C;
}
.fl-fuel-note b{color:#2E4034;font-weight:700}
.fl-fuel-link{
  margin-left:auto;border:0;background:none;padding:0;
  font-size:.68rem;font-weight:650;color:#0B5C39;
  text-decoration:underline;text-underline-offset:2px;
}
.fl-fuel-link:active{color:#8A3B26}

/* the strip's button must be a button, not a circle */
.fl-fuel-note + .zm-btn, .zm-card .zm-btn[data-fl="save-fuel"]{
  flex:none;min-height:42px;height:42px;padding:0 16px;align-self:flex-end;
}

/* a settled trip reports history; it does not shout */
.fl-verdict--past b{color:#51604F;font-size:.68rem;font-weight:700;letter-spacing:.01em}
.fl-verdict--past span{color:#7C8880;font-size:.64rem}

/* ---------- the credit badge -------------------------------------------- */
.fl-credit{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px 8px 11px;border-radius:999px;
  background:linear-gradient(120deg,#EAF4E2,#F6FBEF);
  border:1px solid #BBD7A6;color:#1C4A2A;
  font-size:.76rem;font-weight:650;line-height:1;
}
.fl-credit svg{width:15px;height:15px;flex:none;color:#2F7A45}
.fl-credit b{font-family:Georgia,serif;font-size:1.02rem;font-weight:600;margin-left:1px}
.fl-credit i{
  font-style:normal;font-weight:600;font-size:.66rem;color:#4C6B52;
  padding-left:8px;border-left:1px solid #CBE0BA;
}
.fl-credit--none{
  background:#F2EDE0;border-color:#E0D5BC;color:#6C7568;font-weight:600;
}
.fl-credit--none svg{color:#8A9488}

/* ---------- the route record -------------------------------------------- */
.fl-rec{padding:11px 0;border-top:1px dashed #E3D7BC}
.fl-rec:first-child{border-top:0;padding-top:4px}
.fl-rec__head{display:flex;align-items:center;gap:6px;font-size:.9rem;color:#0A3D1C}
.fl-rec__head b{font-family:Georgia,serif;font-weight:600;white-space:nowrap}
.fl-rec__head svg{width:14px;height:14px;color:#7C8B7E;flex:none}
.fl-rec__head span{margin-left:auto;font-size:.66rem;font-weight:750;color:#5E6B5D;letter-spacing:.03em;white-space:nowrap}
.fl-rec__nums{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:5px;font-size:.68rem;color:#6B776C}
.fl-rec__nums b{color:#1F3328;font-weight:700}

/* the badge opens the record */
a.fl-credit{text-decoration:none;cursor:pointer}
a.fl-credit:hover{border-color:#9CC185}
.fl-credit em{
  display:inline-flex;align-items:center;gap:3px;font-style:normal;
  font-size:.62rem;font-weight:750;color:#2F7A45;padding-left:8px;
  border-left:1px solid #CBE0BA;letter-spacing:.02em;
}
.fl-credit em svg{width:11px;height:11px;color:#2F7A45}
.fl-rec__acts{display:flex;gap:7px;margin-top:11px}
.fl-rec__acts .zm-btn{flex:1;min-width:0;justify-content:center;text-decoration:none;font-size:.78rem;padding:9px 8px}

/* white on green: .zm button{color:inherit} was beating the primary class */
.zm .zm-btn--primary{color:#fff}
.zm .zm-btn--primary svg{color:#fff}