/* ============================================================================
   MundaApp · Munda Flow — the load card, in Munda's own colours.

   Additive sheet: it loads after css/flow.css and restyles only the card a
   shipper or a driver scans on Flow. No markup, no behaviour, no data.

   The frame is the mark. The four-stripe ribbon that runs along the top of the
   brand cards (brand.css) is used here as the card's border, so a load on Flow
   belongs to the same product as the market hero and Backhaul.

   Colour keeps one meaning each — the card tint never replaces the words:
     green  = inside the fair band
     amber  = over the band
     red    = under the haulier's cost floor
     cream  = not enough to check yet, or a sample
   ========================================================================== */

/* the brand ribbon, once, so the border and the logo cannot drift apart */
.fl-load{
  --fl-ribbon: linear-gradient(90deg,
    #198A00 0 58%, #DE2010 58% 72%, #111 72% 86%, #EF7D00 86% 100%);
  --fl-wash: rgba(198,178,132,.22);
  --fl-accent: #7E8A7F;
  --fl-edge: rgba(112,98,66,.30);
}

.fl-list{display:flex;flex-direction:column;gap:17px;margin-top:15px}

/* ---------- the card: coloured paper inside a striped frame ---------------- */
.fl-load{
  position:relative;
  border:0;
  border-radius:20px;
  background:
    radial-gradient(126% 96% at 2% 0%, var(--fl-wash), transparent 64%),
    linear-gradient(172deg, #FFFDF8, #FFFCF3);
  box-shadow:
    0 0 0 1px rgba(255,252,242,.95),
    0 1px 1px rgba(10,20,14,.04),
    0 10px 20px -18px rgba(8,30,18,.38);
}

/* the ribbon becomes the frame: 3px, painted on the paper, rounded with it */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)){
  .fl-load::after{
    content:'';position:absolute;inset:0;border-radius:inherit;padding:3px;
    background:var(--fl-ribbon);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude;
    pointer-events:none;
  }
}

/* the verdict sets the colour of the paper */
.fl-load:has(.fl-verdict--fair){--fl-wash:rgba(25,138,0,.22);--fl-accent:#14721F}
.fl-load:has(.fl-verdict--high){--fl-wash:rgba(239,125,0,.26);--fl-accent:#9A4E00}
.fl-load:has(.fl-verdict--low){--fl-wash:rgba(222,32,16,.20);--fl-accent:#9F1B10}
.fl-load:has(.fl-verdict--none){--fl-wash:rgba(198,178,132,.26);--fl-accent:#6E7A66}
.fl-load:has(.fl-verdict--past){--fl-wash:rgba(120,140,110,.18);--fl-accent:#4E5B4F}

.fl-load__body{padding:15px 15px 0}

/* ---------- route ---------------------------------------------------------- */
.fl-route{gap:9px}
.fl-route b{font-size:1.17rem;letter-spacing:-.02em;color:#0A2E17}
.fl-route svg{width:26px;height:12px;color:var(--fl-accent);opacity:.9;stroke-width:1.5}
.fl-route .fl-when{
  margin-left:auto;flex:none;
  padding:4px 9px;border-radius:9px;
  font-size:.6rem;font-weight:800;letter-spacing:.08em;
  color:#44504A;background:rgba(255,255,255,.62);
  border:1px solid rgba(10,10,10,.08);
}

/* ---------- the facts, as chips -------------------------------------------- */
.fl-chips{gap:6px;margin-top:10px}
.fl-chip{
  font-size:.68rem;font-weight:650;letter-spacing:.005em;
  padding:4px 10px;border-radius:999px;
  color:#41503F;background:rgba(255,253,248,.92);
  border:1px solid rgba(112,98,66,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.fl-chip--truck{background:#EBF6E2;border-color:#CCE3BC;color:#1C5527}
.fl-chip--time{
  background:rgba(10,10,10,.05);border-color:rgba(10,10,10,.07);
  color:#3B473F;font-variant-numeric:tabular-nums;
}
.fl-chip--ghost{background:transparent;border-style:dashed;color:#7A857E}

.fl-pill{letter-spacing:.06em;padding:4px 9px}
.fl-pill--sample{background:#F3EEE1;border-color:#E2D8C1;color:#6B6350}

.fl-return{margin-top:9px;font-size:.71rem;color:#2F6B44}
.fl-return svg{color:var(--fl-accent);opacity:.75}

/* ---------- the price band: a receipt line through the card ---------------- */
.fl-buy{
  display:flex;align-items:flex-end;gap:12px;
  margin:14px -15px 0;padding:12px 15px 13px;
  background:linear-gradient(180deg, rgba(255,253,248,.45), rgba(255,253,248,.95));
  border-top:1px dashed var(--fl-edge);
}
.fl-buy small{
  font-size:.575rem;letter-spacing:.17em;color:#7C877C;
}
.fl-buy > div:first-child > b{
  font-size:1.62rem;letter-spacing:-.022em;color:#08260F;line-height:1.02;
}
.fl-buy > div:first-child > i{font-size:.67rem;color:#7C877C}

/* ---------- the verdict: a chip, not a shout ------------------------------- */
.fl-verdict{
  margin-left:auto;max-width:54%;align-self:center;
  display:flex;flex-direction:column;align-items:flex-end;gap:3px;
  text-align:right;
}
.fl-verdict b{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 9px;border-radius:999px;
  font-family:var(--zm-font);font-size:.67rem;font-weight:800;letter-spacing:.01em;
  border:1px solid transparent;line-height:1.1;
}
.fl-verdict b svg{width:11px;height:11px}
.fl-verdict span{margin-top:0;font-size:.615rem;color:#6D786F}
.fl-verdict--fair b{color:#12701E;background:#E8F6E0;border-color:#BFE3B2}
.fl-verdict--high b{color:#8F4900;background:#FFF2DF;border-color:#F0D5AE}
.fl-verdict--low b{color:#98180D;background:#FCEAE6;border-color:#F4C6BC}
.fl-verdict--none b{color:#5C6253;background:#F3EEE1;border-color:#E2D8C1}
.fl-verdict--past b{color:#4E5B4F;background:#EFF1E9;border-color:#DBDFD0;font-size:.65rem}

/* ---------- one leg against two, as a ledger row --------------------------- */
.fl-compare{
  margin-top:11px;padding:9px 11px;border-radius:12px;
  background:linear-gradient(180deg, rgba(247,242,230,.85), rgba(253,250,242,.65));
  border:1px dashed var(--fl-edge);
}
.fl-compare small{font-size:.565rem;letter-spacing:.13em;color:#7F8A7D}
.fl-compare b{font-size:.98rem;color:#6E7A66}
.fl-compare__save b{font-size:1.04rem;color:#0F5124;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.fl-compare__save span{font-size:.63rem;color:#5E6B5D}

.fl-cap{margin-top:10px}
.fl-cap__bar{height:6px;border-radius:4px;background:rgba(112,98,66,.16)}
.fl-cap__bar i{background:linear-gradient(90deg,#1E9A06,#157303)}
.fl-cap__txt{font-size:.66rem;color:#5C6B5E}

.fl-shot{border-radius:12px;border:1px solid rgba(112,98,66,.22);margin-top:11px}

/* ---------- the one action ------------------------------------------------ */
.fl-load__acts{padding:12px 15px 15px;gap:8px}
.fl-load__acts .zm-btn{
  height:46px;font-size:.83rem;font-weight:750;letter-spacing:.005em;
}
.fl-load__acts .zm-btn--primary{
  color:#fff;
  background:linear-gradient(180deg,#1E9A06 0%,#137002 100%);
  border:1px solid #0F5C01;
  box-shadow:
    0 7px 14px -12px rgba(15,90,20,.55),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.fl-load__acts .zm-btn--primary svg{color:#fff}
.fl-load__acts .zm-btn--primary:active{
  background:linear-gradient(180deg,#1B8B05,#106301);
}
.fl-load__acts .zm-btn--ghost{
  background:rgba(255,253,248,.92);
  border:1px solid rgba(112,98,66,.26);
  color:#2E4034;
}

/* ---------- variant B: the ribbon on the top edge only --------------------
   The frame is the default. If the four colours round the whole card read too
   loud on a small phone, put data-fl-cards="ribbon" on <html> and the stripe
   moves to the top edge, with a quiet accent hairline for the rest.
   -------------------------------------------------------------------------- */
html[data-fl-cards="ribbon"] .fl-load{
  border:1px solid var(--fl-edge);
  padding-top:5px;
  background:
    radial-gradient(126% 96% at 2% 0%, var(--fl-wash), transparent 64%),
    linear-gradient(172deg, #FFFDF8, #FFFCF3);
  box-shadow:
    0 1px 1px rgba(10,20,14,.05),
    0 18px 30px -26px rgba(8,30,18,.5),
    0 2px 5px rgba(10,20,14,.04);
}
html[data-fl-cards="ribbon"] .fl-load::after{display:none}
html[data-fl-cards="ribbon"] .fl-load::before{
  content:'';position:absolute;top:-1px;left:-1px;right:-1px;height:6px;
  border-radius:20px 20px 0 0;
  background:var(--fl-ribbon);
}

/* no mask support: the frame falls back to the border-box gradient */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){
  .fl-load{
    border:2px solid transparent;
    background:
      radial-gradient(126% 96% at 2% 0%, var(--fl-wash), transparent 64%) padding-box,
      linear-gradient(172deg, #FFFDF8, #FFFCF3) padding-box,
      var(--fl-ribbon) border-box;
  }
  .fl-load::after{display:none}
}

@media (max-width:360px){
  .fl-buy > div:first-child > b{font-size:1.45rem}
  .fl-verdict b{font-size:.64rem}
}