/* ============================================================
   grower_listing.css · "มีของขาย" — grower-initiated listing
   ADDITIVE ONLY. Everything structural is borrowed:
     .gd-surf/.gs-head/.gs-body/.gd-sec/.gd-form (grower_demand)
     .gh-plotrow/.gh-pswatch (grower.components)
     .mlrow/.inboxcard/.ib-*/.matchedcap/.fieldgrid/.offerfield/
     .lifeline/.lstep/.drawer/.dr-*/.drawerok/.statebox/.btn (trade+shell)
   New gl-* exists only for the four things this surface introduces:
     the known-already block · the EO hint beside a field ·
     the no-price explainer · the LINE-unreachable gate.
   ============================================================ */

/* ---- entry point on the orchard card (§3.1) ---- */
.gl-plotmain{ min-width:0; }
.gl-pttl{ font-weight:var(--fw-bold); display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.gl-pmeta{ font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }
.gl-pmeta .num{ font-family:var(--mono); color:var(--ink2); }
.gl-pact{ display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; }
.gl-pact .sublbl{ font-size:var(--fs-2xs); color:var(--muted); }

/* ---- "ระบบรู้อยู่แล้ว" — the confirm block, not a form (§2 / canon 5) ---- */
.gl-known{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface2); overflow:hidden; }
.gl-known .gk-top{ display:flex; align-items:center; gap:.5rem; padding:.6rem var(--s4);
  border-bottom:1px solid var(--line); font-size:var(--fs-xs); font-weight:var(--fw-semi); color:var(--ink2); }
.gl-known .gk-top .ic{ width:16px; height:16px; color:var(--pv-verified); }
.gl-known .gk-top .ic svg{ width:100%; height:100%; display:block; }
.gl-krow{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:.55rem var(--s4); border-top:1px solid var(--line); }
.gl-krow:first-of-type{ border-top:0; }
.gl-krow .kk{ font-size:var(--fs-xs); color:var(--muted); }
.gl-krow .kv{ font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--ink); text-align:right; }
.gl-krow .kv .fixed{ font-size:var(--fs-2xs); color:var(--muted); font-weight:var(--fw-semi); display:block; }
.gl-klink{ background:none; border:0; font:inherit; font-size:var(--fs-xs); color:var(--brand-ink);
  font-weight:var(--fw-semi); cursor:pointer; padding:.35rem .1rem; min-height:44px; }
.gl-klink:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; border-radius:var(--r-sm); }

/* ---- the EO hint — BESIDE the field, never inside it (§3.3) ---- */
.gl-hint{ display:flex; gap:.55rem; align-items:flex-start; margin-top:.5rem;
  border:1px dashed var(--pv-est-ln); border-radius:var(--r-sm); background:var(--pv-est-bg);
  padding:.6rem .7rem; }
.gl-hint .ic{ width:17px; height:17px; flex:0 0 17px; color:var(--pv-est); margin-top:1px; }
.gl-hint .ic svg{ width:100%; height:100%; display:block; }
.gl-hint .hmain{ min-width:0; font-size:var(--fs-xs); color:var(--ink2); line-height:1.5; }
.gl-hint .hfig{ font-family:var(--mono); font-weight:var(--fw-bold); color:var(--ink); }
.gl-hint .hsrc{ display:block; margin-top:.2rem; font-size:var(--fs-2xs); color:var(--muted); }
.gl-hint .huse{ background:none; border:0; padding:.3rem 0 0; font:inherit; font-size:var(--fs-2xs);
  color:var(--brand-ink); font-weight:var(--fw-bold); cursor:pointer; text-decoration:underline; }

/* ---- the sentence this surface exists for (§1 / VALUES §5) ---- */
.gl-noprice{ border:1.5px solid var(--brand); border-radius:var(--r-lg);
  background:var(--brand-soft); padding:var(--s4); display:flex; gap:.7rem; align-items:flex-start; }
.gl-noprice .lk{ width:24px; height:24px; flex:0 0 24px; color:var(--brand-ink); }
.gl-noprice .lk svg{ width:100%; height:100%; display:block; }
.gl-noprice h4{ margin:0 0 .25rem; font-size:var(--fs-md); font-weight:var(--fw-x); color:var(--brand-ink); }
.gl-noprice p{ margin:0; font-size:var(--fs-sm); color:var(--ink2); line-height:1.55; text-wrap:pretty; }
.gl-noprice p + p{ margin-top:.4rem; }

/* ---- grade = mixed, stated not selected (§3.4) ---- */
.gl-gradenote{ display:flex; gap:.5rem; align-items:flex-start; font-size:var(--fs-xs);
  color:var(--ink2); line-height:1.5; border-left:0; }
.gl-gradenote .ic{ width:16px; height:16px; flex:0 0 16px; color:var(--muted); margin-top:1px; }
.gl-gradenote .ic svg{ width:100%; height:100%; display:block; }

/* ---- FLAG#4 — LINE unreachable, caught at post time (§5b) ---- */
.gl-linegate{ border:1.5px solid var(--pv-stale-ln); border-radius:var(--r-lg);
  background:var(--pv-stale-bg); padding:var(--s4); }
.gl-linegate .lg-top{ display:flex; gap:.6rem; align-items:flex-start; }
.gl-linegate .ic{ width:22px; height:22px; flex:0 0 22px; color:var(--pv-stale); }
.gl-linegate .ic svg{ width:100%; height:100%; display:block; }
.gl-linegate h4{ margin:0 0 .25rem; font-size:var(--fs-md); font-weight:var(--fw-x); color:var(--ink); }
.gl-linegate p{ margin:0; font-size:var(--fs-sm); color:var(--ink2); line-height:1.55; text-wrap:pretty; }
.gl-linegate .lg-act{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s4); }
.gl-linegate .lg-act .btn{ min-height:44px; }
.gl-ok{ display:flex; gap:.5rem; align-items:center; font-size:var(--fs-xs); font-weight:var(--fw-semi);
  color:var(--pv-verified); }

/* ---- closed / past-window cap on a my-listing (§3.5) ---- */
.gl-closed{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden;
  box-shadow:var(--sh-sm); }
.gl-closed .mlrow{ border:0; border-radius:0; box-shadow:none; opacity:.78; }
.gl-closedcap{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.6rem var(--s4);
  background:var(--pv-stale-bg); color:var(--ink2); font-size:var(--fs-xs);
  border-top:1px solid var(--pv-stale-ln); }
.gl-closedcap .grow{ flex:1; }
.gl-closedcap b{ color:var(--ink); }

/* ---- signal-not-figures interest line (m2.offer_received) ---- */
.gl-signal{ display:flex; gap:.5rem; align-items:flex-start; padding:.7rem var(--s4);
  border-top:1px solid var(--line); font-size:var(--fs-sm); color:var(--ink2); }
.gl-signal .ic{ width:18px; height:18px; flex:0 0 18px; color:var(--brand2); margin-top:1px; }
.gl-signal .ic svg{ width:100%; height:100%; display:block; }
.gl-signal b{ color:var(--ink); }
.gl-signal .why{ display:block; font-size:var(--fs-2xs); color:var(--muted); margin-top:.2rem; }

/* ---- the "which page am I on" separator (vs ใครกำลังหาของ) ---- */
.gl-contrast{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.gl-cbox{ border:1px solid var(--line); border-left:3px solid var(--line2); border-radius:var(--r);
  background:var(--surface); padding:var(--s4); }
.gl-cbox.here{ border-left-color:var(--brand); background:var(--surface); }
.gl-cbox .ct{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.08em;
  font-weight:var(--fw-bold); color:var(--muted); }
.gl-cbox h4{ margin:.2rem 0 .35rem; font-size:var(--fs-md); font-weight:var(--fw-x); color:var(--ink); }
.gl-cbox p{ margin:0; font-size:var(--fs-xs); color:var(--ink2); line-height:1.55; }
.gl-cbox .cprice{ margin-top:.5rem; font-size:var(--fs-xs); font-weight:var(--fw-semi); color:var(--brand-ink); }
@media (max-width:640px){ .gl-contrast{ grid-template-columns:1fr; } .fieldgrid{ grid-template-columns:1fr; } }

/* ---- skeleton row for loading ---- */
.gl-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); }

/* ---- the "why the button is waiting" line (end of .dr-body, not .dr-foot,
   which is a nowrap flex row belonging to the shipped drawer) ---- */
.gl-why{ margin-top:var(--s3); min-height:1.2em; }
.gl-why:empty{ display:none; }

/* ---- DARK-THEME CONTRAST PATCH for the two intro rule chips.
   .gd-rule.price / .band ship in grower_demand.css as --pv-private /
   --pv-est ink on their own -bg. In dark that pairing lands ~2.3:1 and
   ~2.6:1 at fs-2xs — it fails AA on the SHIPPED surface too (logged for
   Code; fix belongs in the token file, not here). These chips carry this
   surface's defining rule, so we lift the ink to the ink ramp and keep the
   provenance hue on border + glyph. Additive, dark only. ---- */
[data-theme="dark"] .gd-intro .gd-rule.price{ color:var(--ink); background:var(--pv-private-bg);
  border-color:var(--pv-private); }
[data-theme="dark"] .gd-intro .gd-rule.band{ color:var(--ink); background:var(--pv-est-bg);
  border-color:var(--pv-est); }

/* Inline form feedback. A toast can be missed, scrolled past, or — as happened
   here — swallowed entirely; the form itself must say what is wrong. */
.gl-note{ margin:.5rem 0 0; font-size:var(--fs-xs); color:var(--ink2); line-height:1.5; }
.gl-note.bad{ color:var(--bad); font-weight:var(--fw-semi); }