/* ============================================================
   trade.components.css · Trade Actions layer (ปิดดีลให้ครบวง)
   ------------------------------------------------------------
   EXTENDS Atlas + the shipped Sourcing Desk. Loaded LAST, after
   supply.tokens.css → supply.components.css → shell.chrome.css →
   sourcing.components.css. Every value resolves to a supply.tokens.css
   variable (no new colour/font/radius minted). Zero-dependency,
   greyscale-safe (glyph + edge cues, not colour alone).

   NEW here (everything else is reused live classes):
     · offer-status chips  (.stchip + 5 offer states — shipped had 4 RFQ states)
     · negotiation THREAD  (.thread — append-only counter = a row, never an edit)
     · sell-side OFFER-INBOX (.inboxcard — §B build-new, degradable)
     · order LIFELINE stepper (.lifeline — who-must-act-next state machine)
     · 409 "sold to someone else" (.conflictbox / .stalebar — kind, non-blaming)
     · 2-col form grid (.fieldgrid) for RFQ-create / listing-manage
   ============================================================ */

/* ============================================================
   OFFER-STATUS CHIPS — extend .stchip onto the offer states.
   Maps to the provenance palette so meaning is colour+word, and
   the dashed border on terminal states reads in greyscale.
   ============================================================ */
.stchip.pending{ background:var(--pv-official-bg); color:var(--pv-official); border-color:var(--pv-official-ln); }
.stchip.countered{ background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand); }
.stchip.accepted{ background:var(--pv-verified-bg); color:var(--pv-verified); border-color:var(--pv-verified-ln); }
.stchip.rejected{ background:var(--pv-stale-bg); color:var(--pv-stale); border-color:var(--pv-stale-ln); border-style:dashed; }
.stchip.withdrawn{ background:var(--surface2); color:var(--muted); border-color:var(--line2); border-style:dashed; }
/* order lifecycle */
.stchip.agreed{ background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand); }
.stchip.acknowledged{ background:var(--pv-official-bg); color:var(--pv-official); border-color:var(--pv-official-ln); }
.stchip.delivered{ background:var(--pv-est-bg); color:var(--pv-est); border-color:var(--pv-est-ln); }
.stchip.settled{ background:var(--pv-verified-bg); color:var(--pv-verified); border-color:var(--pv-verified-ln); }
.stchip.disputed{ background:var(--bad-bg); color:var(--bad); border-color:color-mix(in srgb,var(--bad) 40%, transparent); }
.stchip.cancelled{ background:var(--pv-stale-bg); color:var(--pv-stale); border-color:var(--pv-stale-ln); border-style:dashed; }

/* a "demand" tchip on a listing card (neutral count, N≥2) + the auction bid variant */
.tchip.demand{ background:var(--pv-est-bg); color:var(--pv-est); border-color:var(--pv-est-ln); font-weight:var(--fw-bold); }
.tchip.bid{ background:var(--pv-official-bg); color:var(--pv-official); border-color:var(--pv-official-ln); font-weight:var(--fw-bold); }

/* ============================================================
   NEGOTIATION THREAD — append-only. counter = a NEW row; the old
   row is immutable (brief §1). A left-rail timeline of nodes.
   buyer nodes lean brass; seller nodes lean ink. Latest = emphasised.
   ============================================================ */
.thread{ position:relative; display:flex; flex-direction:column; gap:var(--s3);
  margin:var(--s2) 0 var(--s3); padding-left:var(--s5); }
.thread::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px;
  background:var(--line2); border-radius:2px; }
.tnode{ position:relative; }
.tnode::before{ content:""; position:absolute; left:-22px; top:6px; width:14px; height:14px;
  border-radius:50%; background:var(--surface); border:2px solid var(--line2); }
.tnode.buyer::before{ border-color:var(--brand); }
.tnode.seller::before{ border-color:var(--ink2); }
.tnode.accepted::before{ border-color:var(--pv-verified); background:var(--pv-verified-bg); }
.tcard{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:.55rem .7rem; box-shadow:var(--sh-sm); }
.tnode.last .tcard{ border-color:var(--brand); box-shadow:var(--sh-md); }
.tnode.buyer .tcard{ background:color-mix(in srgb,var(--brand-soft) 30%, var(--surface)); }
.thead{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.thead .twho{ font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--ink); }
.thead .tkind{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:var(--fw-bold); }
.thead .tat{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--muted); }
.tfig{ display:flex; align-items:baseline; gap:.5rem; margin-top:.25rem; }
.tfig .tprice{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1.2rem; font-weight:var(--fw-bold); color:var(--ink); }
.tfig .tprice .d{ color:var(--brand2); font-weight:var(--fw-x); font-size:.85em; margin-right:.15rem; }
.tfig .tunit{ font-size:var(--fs-xs); color:var(--muted); }
.tfig .tqty{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--ink2); }
.tnote{ font-size:var(--fs-xs); color:var(--ink2); margin-top:.3rem; line-height:1.4; }
.tnode.accepted .tcard{ background:var(--pv-verified-bg); border-color:var(--pv-verified-ln); }
.threadcap{ display:flex; gap:.4rem; align-items:center; font-size:var(--fs-2xs); color:var(--muted);
  margin:-.2rem 0 var(--s2); }
.threadcap .ic{ color:var(--brand2); font-weight:var(--fw-x); }

/* ============================================================
   SELL-SIDE OFFER-INBOX  (§B BUILD-NEW; degradable — see notes)
   each card = one of MY listings + the offers stacked under it.
   reuses .ledger row tempo + .qrow figure idiom.
   ============================================================ */
.inboxcard{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-sm); overflow:hidden; }
.inboxcard .ib-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3);
  padding:var(--s4); background:var(--surface2); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.ib-head .ib-ttl{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.ib-head .ib-ttl .vname{ font-weight:var(--fw-bold); font-size:var(--fs-md); }
.ib-head .ib-where{ font-size:var(--fs-xs); color:var(--muted); margin-top:1px; }
.ib-head .ib-aside{ display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; text-align:right; }
.ib-head .ib-ask{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:var(--fw-bold); }
.ib-head .ib-ask .punit{ font-size:var(--fs-2xs); color:var(--muted); font-weight:var(--fw-semi); }
.ib-head .ib-count{ font-size:var(--fs-xs); color:var(--ink2); }
.ib-head .ib-count b{ font-family:var(--mono); color:var(--ink); }

/* the contention note (multi-buyer / atomic-accept reality) */
.contendnote{ display:flex; gap:.5rem; align-items:flex-start; padding:.55rem var(--s4);
  background:var(--pv-est-bg); border-bottom:1px solid var(--pv-est-ln);
  font-size:var(--fs-xs); color:var(--pv-est); line-height:1.4; }
.contendnote .ic{ font-weight:var(--fw-x); }

.ib-offers{ display:flex; flex-direction:column; }
.offerline{ display:grid; grid-template-columns:1fr auto auto; gap:var(--s3); align-items:center;
  padding:var(--s3) var(--s4); border-top:1px solid var(--line); }
.offerline:first-child{ border-top:0; }
.offerline .ol-main{ min-width:0; }
.offerline .ol-buyer{ font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--ink); display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.offerline .ol-meta{ font-size:var(--fs-2xs); color:var(--muted); font-family:var(--mono); margin-top:1px; }
.offerline .ol-note{ font-size:var(--fs-xs); color:var(--ink2); margin-top:2px; }
.offerline .ol-fig{ text-align:right; }
.offerline .ol-price{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:var(--fw-bold); font-size:var(--fs-md); color:var(--ink); }
.offerline .ol-price .punit{ font-size:var(--fs-2xs); color:var(--muted); font-weight:var(--fw-semi); display:block; }
.offerline .ol-qty{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--ink2); }
.offerline .ol-act{ display:flex; flex-direction:column; gap:.3rem; }
.offerline .ol-act .btn{ justify-content:center; }
.offerline.lead{ background:color-mix(in srgb,var(--pv-verified-bg) 45%, var(--surface)); }
.offerline.dimmed{ opacity:.55; }
@media (max-width:560px){
  .offerline{ grid-template-columns:1fr auto; }
  .offerline .ol-act{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; }
  .offerline .ol-act .btn{ flex:1; }
}

/* a soft "sold" cap drawn over a matched listing in the inbox */
.matchedcap{ display:flex; align-items:center; gap:.5rem; padding:.6rem var(--s4);
  background:var(--pv-verified-bg); color:var(--pv-verified); font-size:var(--fs-sm); font-weight:var(--fw-semi);
  border-top:1px solid var(--pv-verified-ln); }

/* my-listing manage row (sell-side · listings tab) */
.mlrow{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s4); border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--sh-sm); }
.mlrow .ml-main{ min-width:0; }
.mlrow .ml-ttl{ font-weight:var(--fw-bold); display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.mlrow .ml-meta{ font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }
.mlrow .ml-meta .num{ font-family:var(--mono); color:var(--ink2); }
.mlrow .ml-act{ display:flex; gap:.4rem; flex:0 0 auto; }

/* ============================================================
   ORDER LIFELINE — the state machine, read as "who acts next".
   done ✓ · current (pulse-free, ringed) · todo (faint).
   ============================================================ */
.ordercard{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-sm); overflow:hidden; }
.ordercard.disputed{ border-color:color-mix(in srgb,var(--bad) 40%, var(--line2)); }
.oc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3);
  padding:var(--s4); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.oc-head .oc-ref{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted); }
.oc-head .oc-ttl{ font-weight:var(--fw-bold); font-size:var(--fs-md); margin-top:1px; }
.oc-head .oc-fig{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink2); font-size:var(--fs-sm); margin-top:2px; }
.oc-head .oc-aside{ display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; }

.turnchip{ display:inline-flex; align-items:center; gap:.3rem; font-size:var(--fs-2xs); font-weight:var(--fw-bold);
  padding:.16rem .55rem; border-radius:var(--r-pill); border:1px solid transparent; white-space:nowrap; }
.turnchip.you{ background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand); }
.turnchip.them{ background:var(--surface2); color:var(--muted); border-color:var(--line2); }
.turnchip .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }

.lifeline{ display:flex; align-items:flex-start; gap:0; padding:var(--s4) var(--s4) var(--s3); overflow-x:auto; }
.lstep{ display:flex; flex-direction:column; align-items:center; gap:.35rem; flex:1; min-width:64px; text-align:center; position:relative; }
.lstep .ldot{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:var(--fs-xs); font-weight:var(--fw-bold); font-family:var(--mono);
  background:var(--surface2); border:1.5px solid var(--line2); color:var(--muted); z-index:1; }
.lstep .llab{ font-size:var(--fs-2xs); color:var(--muted); font-weight:var(--fw-semi); line-height:1.2; }
.lstep::after{ content:""; position:absolute; top:13px; left:50%; right:-50%; height:2px; background:var(--line2); z-index:0; }
.lstep:last-child::after{ display:none; }
.lstep.done .ldot{ background:var(--pv-verified-bg); border-color:var(--pv-verified); color:var(--pv-verified); }
.lstep.done::after{ background:var(--pv-verified); }
.lstep.done .llab{ color:var(--ink2); }
.lstep.current .ldot{ background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 0 0 3px var(--brand-soft); }
.lstep.current .llab{ color:var(--brand-ink); font-weight:var(--fw-bold); }
.lstep.disputed .ldot{ background:var(--bad-bg); border-color:var(--bad); color:var(--bad); }
.lstep.disputed .llab{ color:var(--bad); }

.oc-foot{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  padding:var(--s3) var(--s4) var(--s4); }
.oc-foot .feeline{ font-size:var(--fs-xs); color:var(--muted); display:flex; align-items:center; gap:.4rem; }
.oc-foot .feeline .num{ font-family:var(--mono); color:var(--brand2); font-weight:var(--fw-bold); }
.oc-foot .grow{ flex:1; }
.oc-foot .oc-acts{ display:flex; gap:.4rem; flex-wrap:wrap; }
.disputebar{ display:flex; gap:.5rem; align-items:center; padding:.6rem var(--s4);
  background:var(--bad-bg); color:var(--bad); font-size:var(--fs-xs); font-weight:var(--fw-semi);
  border-top:1px solid color-mix(in srgb,var(--bad) 30%, transparent); }

/* ============================================================
   409 / STALE-VIEW — "sold to someone else", kind & non-blaming.
   reuses .statebox shape; adds a calm (not alarming) treatment.
   ============================================================ */
.conflictbox{ border:1.5px solid var(--pv-stale-ln); border-radius:var(--r-lg); background:var(--surface2);
  padding:var(--s6) var(--s5); display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center; }
.conflictbox .cic{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line2); color:var(--muted); font-size:1.4rem; }
.conflictbox h3{ margin:.2rem 0 0; font-size:var(--fs-lg); }
.conflictbox p{ margin:0; color:var(--muted); max-width:40ch; line-height:1.5; }
.conflictbox .cacts{ display:flex; gap:var(--s3); flex-wrap:wrap; justify-content:center; margin-top:.4rem; }

/* the thin "data may lag — refresh" banner atop a contended list */
.stalebar{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  padding:.5rem .8rem; border-radius:var(--r); background:var(--pv-est-bg); border:1px solid var(--pv-est-ln);
  color:var(--pv-est); font-size:var(--fs-xs); }
.stalebar .ic{ font-weight:var(--fw-x); }
.stalebar .grow{ flex:1; }
.stalebar .btn.sm{ padding:.28rem .6rem; }

/* a soft "lost" strip on a buyer's own rejected offer (multi-buyer outcome) */
.lostnote{ font-size:var(--fs-2xs); color:var(--pv-stale); display:inline-flex; align-items:center; gap:.3rem; }

/* ============================================================
   FORM GRID — RFQ-create + listing-manage (reuses .offerfield)
   ============================================================ */
.fieldgrid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.fieldgrid .full{ grid-column:1 / -1; }
.offerfield select{ font:inherit; font-size:var(--fs-md); color:var(--ink); background:var(--surface2);
  border:1px solid var(--line2); border-radius:var(--r-sm); padding:.6rem .7rem; min-height:44px; }
.offerfield select:focus-visible{ outline:2px solid var(--ring); outline-offset:1px; }
/* inline segmented toggle inside a drawer field (mode lump/graded) */
.segfield{ display:inline-flex; border:1px solid var(--line2); border-radius:var(--r-pill); overflow:hidden; background:var(--surface); }
.segfield button{ border:0; background:var(--surface); color:var(--ink2); cursor:pointer;
  padding:.45rem .8rem; font:inherit; font-size:var(--fs-sm); white-space:nowrap; min-height:40px; }
.segfield button[aria-pressed="true"]{ background:var(--brand-soft); color:var(--brand-ink); font-weight:var(--fw-bold); }
.targethint{ font-size:var(--fs-2xs); color:var(--pv-private); background:var(--pv-private-bg);
  border:1px solid var(--pv-private-ln); border-radius:var(--r-sm); padding:.35rem .5rem; margin-top:.3rem; line-height:1.4; }

/* success tick inside a drawer foot replacement */
.drawerok{ display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center; padding:var(--s6) var(--s5); }
.drawerok .okmk{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:var(--pv-verified-bg); color:var(--pv-verified); font-size:1.8rem; border:1px solid var(--pv-verified-ln); }
.drawerok h3{ margin:0; font-size:var(--fs-lg); }
.drawerok p{ margin:0; color:var(--muted); font-size:var(--fs-sm); max-width:36ch; }

@media (max-width:560px){ .fieldgrid{ grid-template-columns:1fr; } }