/* ============================================================
   grower_demand.components.css · "ใครกำลังหาของ" — grower-facing DEMAND surface
   Ported from docs/design/handoff_out/grower_demand/ — component rules only
   (the prototype's demo scaffold, nav-placement preview and inline reviewer
   wrapper do NOT port).

   REUSES verbatim (mints nothing new of its own): .rfqrow/.rfq-*/.qcount/.stchip
   (sourcing.components.css) · .buyrep/.br-* (buyer_rep.components.css — the SAME
   band, re-plugged, RECONCILIATION §10) · .drawer/.offerfield/.fieldgrid/.drawerok
   (sourcing + trade) · .statebox (empty) · .br-sk (loading) · .tchip · .btn · .pv

   🔴 RULE (grower_intel.py precedent): the buyer-rep band is NOT hung on list rows —
   that would rebuild a market-wide ล้ง-reputation lookup, exactly what we forbid.
   It appears ONLY at the "เข้าไปคุยจริง" moment (the quote drawer).
   ⛔ RULE (FR-R12): the buyer's target price / per-grade unit price is NEVER shown —
   the router strips it and the UI adds no path that reconstructs it.

   Loaded AFTER trade.components.css + buyer_rep.components.css.
   ============================================================ */

/* ---- the surface frame (grower-voiced) ---- */
.gd-surf{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg2); overflow:hidden; box-shadow:var(--sh-sm); }
.gd-surf .gs-head{ display:flex; align-items:flex-start; gap:var(--s3); flex-wrap:wrap; justify-content:space-between;
  padding:var(--s4) var(--s5); background:var(--surface); border-bottom:1px solid var(--line); }
.gd-surf .gs-head .gs-h{ min-width:200px; }
.gd-surf .gs-head h3{ margin:0; font-size:var(--fs-xl); font-weight:var(--fw-x); letter-spacing:-.01em; }
.gd-surf .gs-head .gs-sub{ margin:.15rem 0 0; font-size:var(--fs-xs); color:var(--muted); }
.gd-surf .gs-here{ display:inline-flex; align-items:center; gap:.35rem; align-self:center; white-space:nowrap;
  font-size:var(--fs-2xs); font-weight:var(--fw-bold); color:var(--brand2); background:var(--brand-soft);
  border:1px solid var(--brand); border-radius:var(--r-pill); padding:.18rem .6rem; }
.gd-surf .gs-here .ic{ width:13px; height:13px; display:inline-flex; }
.gd-surf .gs-here .ic svg{ width:100%; height:100%; display:block; }
.gd-surf .gs-body{ padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3); }

/* honest "near you" locator caption — aggregate area, never a parcel */
.gd-nearcap{ display:flex; align-items:center; gap:.4rem; font-size:var(--fs-xs); color:var(--muted); }
.gd-nearcap .ic{ width:15px; height:15px; flex:0 0 15px; color:var(--brand2); display:inline-flex; }
.gd-nearcap .ic svg{ width:100%; height:100%; display:block; }

/* ---- DEMAND ROW — reuses the shipped .rfqrow grammar.
   Adds a round buyer-TYPE avatar (a FACT: ล้ง/exporter — no check glyph, no band). ---- */
.rfqrow .rfq-lead{ width:42px; height:42px; flex:0 0 42px; border-radius:var(--r); display:grid; place-items:center;
  background:var(--surface2); color:var(--ink2); border:1px solid var(--line2); }
.rfqrow .rfq-lead .ic{ width:22px; height:22px; display:inline-flex; }
.rfqrow .rfq-lead .ic svg{ width:100%; height:100%; display:block; }
.rfqrow .rfq-ttl{ line-height:1.3; }
.rfqrow .rfq-said{ display:block; font-weight:var(--fw-bold); font-size:var(--fs-md); letter-spacing:-.005em; }
.rfqrow .rfq-facts{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .6rem; margin-top:.35rem; }
.rfqrow .rfq-facts .rf{ display:inline-flex; align-items:center; gap:.3rem; font-size:var(--fs-xs); color:var(--ink2); }
.rfqrow .rfq-facts .rf .ic{ width:14px; height:14px; flex:0 0 14px; color:var(--muted); display:inline-flex; }
.rfqrow .rfq-facts .rf .ic svg{ width:100%; height:100%; display:block; }
.rfqrow .rfq-facts .rf .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:var(--fw-semi); color:var(--ink); }
.rfqrow .rfq-side{ min-width:104px; }
.rfqrow .rfq-side .cta{ margin-top:.1rem; }
/* a plain hint sits where a price would — the row never reveals the buyer's hand */
.rfqrow .rfq-noprice{ display:inline-flex; align-items:center; gap:.3rem; font-size:var(--fs-2xs); color:var(--muted); }
@media (max-width:560px){
  .rfqrow{ grid-template-columns:auto 1fr; }
  .rfqrow .rfq-side{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between;
    text-align:left; border-top:1px solid var(--line); padding-top:.6rem; }
  .rfqrow .rfq-side .cta{ margin-top:0; }
}

/* ---- the "เข้าไปคุยจริง" drawer: why-cue → the SAME .buyrep band → short quote form ---- */
.gd-drawer .dr-body{ gap:var(--s4); }
.gd-demand{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface2); padding:var(--s3) var(--s4); }
.gd-demand .gd-said{ font-weight:var(--fw-bold); font-size:var(--fs-md); line-height:1.35; }
.gd-demand .drow{ padding:.45rem 0; }
.gd-demand .drow:nth-of-type(1){ border-top:1px solid var(--line); margin-top:.5rem; }

/* the honest "why the record shows now" cue (brass, calm) */
.gd-whycue{ display:flex; gap:.55rem; align-items:flex-start; background:var(--brand-soft); color:var(--brand-ink);
  border:1px solid var(--brand); border-radius:var(--r); padding:.6rem .75rem; font-size:var(--fs-xs); line-height:1.5; }
.gd-whycue .ic{ width:17px; height:17px; flex:0 0 17px; margin-top:1px; color:var(--brand2); display:inline-flex; }
.gd-whycue .ic svg{ width:100%; height:100%; display:block; }
.gd-whycue b{ font-weight:var(--fw-bold); }

/* the short quote-back form — the grower proposes their OWN price */
.gd-form .fhelp{ font-size:var(--fs-2xs); color:var(--muted); margin-top:.25rem; line-height:1.45; }
.gd-form .offerfield input.num{ font-size:1.15rem; font-weight:var(--fw-bold); }
.gd-form .unitcap{ font-size:var(--fs-2xs); color:var(--muted); font-family:var(--mono); }

/* loading skeleton rows (reduced-motion safe via .br-sk) */
.gd-skrow{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--s4); align-items:center;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:var(--s4); }
.gd-skrow .sav{ width:42px; height:42px; border-radius:var(--r); }
.gd-skrow .sside{ width:90px; }