/* ============================================================
   farm.components.css · Grower onboarding layer (ลงทะเบียนสวน + ความยินยอม)
   ------------------------------------------------------------
   EXTENDS Atlas + the shipped grower surfaces. Loaded LAST, after
   supply.tokens.css → supply.components.css → shell.chrome.css →
   sourcing.components.css → trade.components.css → passport.components.css
   → export.components.css. Every value resolves to a supply.tokens.css
   variable — NO new colour / font / radius / shadow / provenance hue is
   minted. Zero-dependency, greyscale-safe (glyph + edge + weight cues,
   never colour alone).

   This surface lives at the grower workbench (สวนของฉัน). It REUSES
   verbatim the shipped form/modal grammar — .drawer/.drawerscrim/.dr-head/
   .dr-eyebrow/.dr-body/.dr-foot/.panelclose · .fieldgrid(.full)/.offerfield ·
   .drawerok/.okmk · .statebox/.skelcard · .btn(.full/.sm/.ghost/.secondary) ·
   .pv ladder · .scrim/.sheet · .gapseal. It MINTS new (fr-*) ONLY:
     1. the mobile-first WIZARD progress (.fr-steps — a tap-back stepper)
     2. the CONSENT LADDER (.fr-ladder — the PDPA heart: per-deal, opt-in,
        default off, with a live "who sees what" preview)
   plus the small connective tissue the grower flow needs (grower-side
   orchard card, optional-field affordances, training switch, GAP card,
   withdraw/reduce-disclosure confirm).

   NOTE: .btn.danger is already defined in export.components.css (loaded
   earlier) — it is NOT redefined here to avoid a duplicate. The confirm
   bits .fr-confic/.fr-confnote/.fr-confacts have no shipped analogue and
   are defined here (token-bound).
   ============================================================ */

/* ============================================================
   REGISTER ENTRY · empty-state (no farm yet) — the first big CTA.
   Reuses the .statebox shape; warms it for a low-literacy hero.
   ============================================================ */
.fr-empty{ align-self:center; width:min(520px,100%); text-align:center;
  border:1.5px dashed var(--brand); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--brand-soft), color-mix(in srgb,var(--brand-soft) 35%, var(--surface)));
  padding:var(--s7) var(--s5); display:flex; flex-direction:column; align-items:center; gap:var(--s3); }
.fr-empty .fr-emk{ width:62px; height:62px; opacity:.95; }
.fr-empty .fr-emk svg{ width:100%; height:100%; display:block; }
.fr-empty h2{ margin:0; font-size:var(--fs-xl); font-weight:var(--fw-x); letter-spacing:-.01em; color:var(--brand-ink); }
.fr-empty p{ margin:0; color:var(--brand2); font-size:var(--fs-sm); max-width:42ch; line-height:1.55; }
.fr-empty .btn.full{ margin-top:var(--s2); max-width:340px; }
.fr-empty .fr-emnote{ display:flex; align-items:center; gap:.4rem; font-size:var(--fs-2xs); color:var(--brand2); }
.fr-empty .fr-emnote .ic{ width:14px; height:14px; flex:0 0 14px; color:var(--pv-verified); display:inline-flex; }
.fr-empty .fr-emnote .ic svg{ width:100%; height:100%; display:block; }

/* ============================================================
   REGISTER ENTRY · list head (has farms) — count + "เพิ่มแปลง".
   ============================================================ */
.fr-listhead{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; }
.fr-listhead .fr-count{ font-size:var(--fs-sm); color:var(--ink2); }
.fr-listhead .fr-count b{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.fr-listhead .fr-farm{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:var(--fw-bold); }

/* ============================================================
   GROWER-SIDE ORCHARD CARD (extends .wbcard) — the OWNER's view of
   one of their plots. Unlike the public passport card, this surfaces
   the CONSENT STATE up front + a "ตั้งความยินยอม / แก้ไข" action.
   ============================================================ */
.fr-orchcard{ gap:.7rem; }
.fr-orchcard .fr-octop{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3); }
.fr-orchcard .fr-oclabel{ font-weight:var(--fw-bold); font-size:var(--fs-md); letter-spacing:-.01em; }
.fr-orchcard .fr-ocwhere{ display:flex; align-items:center; gap:.35rem; font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }
.fr-orchcard .fr-ocwhere .pin{ width:13px; height:13px; flex:0 0 13px; color:var(--brand2); display:inline-flex; }
.fr-orchcard .fr-ocwhere .pin svg{ width:100%; height:100%; display:block; }
.fr-orchcard .fr-ocfacts{ display:flex; flex-wrap:wrap; gap:.35rem var(--s4); }
.fr-orchcard .fr-ocf{ display:flex; flex-direction:column; }
.fr-orchcard .fr-ocf .k{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:var(--fw-bold); }
.fr-orchcard .fr-ocf .v{ font-size:var(--fs-sm); color:var(--ink); font-weight:var(--fw-semi); }
.fr-orchcard .fr-ocf .v .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.fr-orchcard .fr-ocf .v.blank{ color:var(--muted); font-weight:var(--fw-reg); font-style:italic; }

/* the consent status line — the new "what's disclosed right now" row */
.fr-consentline{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding-top:.6rem; margin-top:.1rem; border-top:1px solid var(--line); }
.fr-consentline .cl-lbl{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:var(--fw-bold); }
.fr-consentline .grow{ flex:1; }
/* a consent-state chip: closed = withheld(🔒 private), open = brass scope */
.fr-cchip{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;
  font-size:var(--fs-2xs); font-weight:var(--fw-bold); line-height:1.5;
  padding:.14rem .55rem; border-radius:var(--r-pill); border:1px solid transparent; }
.fr-cchip.closed{ background:var(--pv-private-bg); color:var(--pv-private); border-color:var(--pv-private-ln); }
.fr-cchip.open{ background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand); }
.fr-cchip .g{ font-weight:var(--fw-x); }

/* ============================================================
   WIZARD PROGRESS · .fr-steps — a tap-back stepper.
   Echoes the shipped .lifeline grammar (done ✓ / current brass / todo)
   but numbered, with ≥44px tap targets and a clickable BACK affordance.
   ============================================================ */
.fr-steps{ display:flex; align-items:flex-start; gap:0; padding:var(--s2) 0 var(--s3); }
.fr-step{ display:flex; flex-direction:column; align-items:center; gap:.4rem; flex:1; min-width:0;
  text-align:center; position:relative; background:transparent; border:0; font:inherit; cursor:default; padding:0; color:inherit; }
.fr-step .fr-sdot{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-size:var(--fs-sm); font-weight:var(--fw-bold); font-family:var(--mono);
  background:var(--surface2); border:1.5px solid var(--line2); color:var(--muted); z-index:1; transition:background .14s, border-color .14s, color .14s; }
.fr-step .fr-slab{ font-size:var(--fs-2xs); color:var(--muted); font-weight:var(--fw-semi); line-height:1.2; }
.fr-step::after{ content:""; position:absolute; top:16px; left:50%; right:-50%; height:2px; background:var(--line2); z-index:0; }
.fr-step:last-child::after{ display:none; }
.fr-step.done .fr-sdot{ background:var(--pv-verified-bg); border-color:var(--pv-verified); color:var(--pv-verified); }
.fr-step.done::after{ background:var(--pv-verified); }
.fr-step.done .fr-slab{ color:var(--ink2); }
.fr-step.done{ cursor:pointer; }
.fr-step.current .fr-sdot{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 0 0 3px var(--brand-soft); }
.fr-step.current .fr-slab{ color:var(--brand-ink); font-weight:var(--fw-bold); }
.fr-step.done:hover .fr-sdot{ border-color:var(--brand); }
.fr-step:focus-visible{ outline:none; }
.fr-step:focus-visible .fr-sdot{ outline:2px solid var(--ring); outline-offset:2px; }

/* a tiny "step N of 3" caption + the step's one-line goal */
.fr-stepcap{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:var(--fw-bold); }
.fr-stepgoal{ font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ink); letter-spacing:-.01em; margin-top:.1rem; }

/* ============================================================
   FORM ergonomics for low-literacy — required mark, optional tag,
   kind helper + validation. Reuses .offerfield / .fieldgrid.
   ============================================================ */
.offerfield label .fr-req{ color:var(--bad); font-weight:var(--fw-bold); margin-left:.15rem; }
.offerfield label .fr-opt{ color:var(--muted); font-weight:var(--fw-reg); margin-left:.3rem; font-size:var(--fs-2xs); }
.fr-help{ font-size:var(--fs-2xs); color:var(--muted); line-height:1.4; margin-top:.1rem; }
.fr-help.warn{ color:var(--bad); display:none; align-items:center; gap:.3rem; }
.offerfield.invalid input, .offerfield.invalid select{ border-color:var(--bad); background:var(--bad-bg); }
.offerfield.invalid .fr-help.warn{ display:flex; }

/* coords are OPTIONAL (FR-M6-2) — a calm "ระบุภายหลัง" affordance, never forced */
.fr-coordskip{ display:flex; align-items:flex-start; gap:.6rem; grid-column:1 / -1;
  border:1.5px dashed var(--line2); border-radius:var(--r); background:var(--surface2); padding:.7rem .8rem; }
.fr-coordskip .ic{ width:18px; height:18px; flex:0 0 18px; color:var(--brand2); margin-top:1px; display:inline-flex; }
.fr-coordskip .ic svg{ width:100%; height:100%; display:block; }
.fr-coordskip .cmain b{ display:block; font-size:var(--fs-sm); color:var(--ink); }
.fr-coordskip .cmain span{ display:block; font-size:var(--fs-2xs); color:var(--muted); margin-top:1px; line-height:1.45; }

/* ============================================================
   CONSENT · the per-deal reassurance banner (THE framing).
   Opening disclosure is NOT a public broadcast — only a ล้ง with an
   ACCEPTED DEAL sees the disclosed slice, and only after the deal.
   Brand-soft (invitation, not warning) + lock-handshake glyph.
   ============================================================ */
.fr-pdpa{ display:flex; gap:.7rem; align-items:flex-start;
  border:1px solid var(--brand); border-radius:var(--r-lg);
  background:linear-gradient(100deg, var(--brand-soft), color-mix(in srgb,var(--brand-soft) 50%, var(--surface)));
  padding:var(--s4); }
.fr-pdpa .ic{ width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid; place-items:center;
  background:var(--surface); color:var(--brand-ink); border:1px solid var(--brand); }
.fr-pdpa .ic svg{ width:17px; height:17px; display:block; }
.fr-pdpa .pmain b{ display:block; font-size:var(--fs-md); color:var(--brand-ink); font-weight:var(--fw-bold); letter-spacing:-.01em; }
.fr-pdpa .pmain p{ margin:.25rem 0 0; font-size:var(--fs-sm); color:var(--brand2); line-height:1.5; }
.fr-pdpa .pmain p b{ color:var(--brand-ink); font-weight:var(--fw-bold); }

/* a consent sub-section: header label + the control beneath it */
.fr-section{ display:flex; flex-direction:column; gap:var(--s3); }
.fr-seclbl{ display:flex; align-items:center; gap:.5rem; }
.fr-seclbl .st{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:var(--fw-bold); }
.fr-seclbl .ln{ flex:1; height:1px; background:var(--line); }
.fr-secintro{ font-size:var(--fs-sm); color:var(--ink2); line-height:1.5; margin:-.2rem 0 0; }

/* ============================================================
   CONSENT LADDER · .fr-ladder — the heart.
   A radio list, ordered by INCREASING disclosure (rung 0 = OFF =
   default). Each rung concretely states "a ล้ง you've closed a deal
   with will see ___" + a precision meter. Selecting drives the live
   preview below. opt-in, default off, never opt-out.
   ============================================================ */
.fr-ladder{ display:flex; flex-direction:column; gap:var(--s2); }
.fr-rung{ display:grid; grid-template-columns:24px 1fr; gap:.7rem; align-items:start;
  border:1.5px solid var(--line2); border-radius:var(--r); background:var(--surface);
  padding:var(--s3) var(--s4); cursor:pointer; text-align:left; width:100%; font:inherit; color:inherit;
  transition:border-color .12s, background .12s, box-shadow .12s; }
.fr-rung:hover{ border-color:var(--brand); background:var(--surface2); }
.fr-rung .fr-rdot{ width:22px; height:22px; flex:0 0 22px; border-radius:50%; margin-top:1px;
  border:2px solid var(--line2); background:var(--surface); display:grid; place-items:center; }
.fr-rung .fr-rdot::after{ content:""; width:11px; height:11px; border-radius:50%; background:transparent; transition:background .12s; }
.fr-rung.on{ border-color:var(--brand); background:color-mix(in srgb,var(--brand-soft) 40%, var(--surface)); box-shadow:var(--sh-sm); }
.fr-rung.on .fr-rdot{ border-color:var(--brand); }
.fr-rung.on .fr-rdot::after{ background:var(--brand); }
/* the default/off rung reads as private (lock), not brass */
.fr-rung.off.on{ border-color:var(--pv-private); background:var(--pv-private-bg); box-shadow:var(--sh-sm); }
.fr-rung.off.on .fr-rdot{ border-color:var(--pv-private); }
.fr-rung.off.on .fr-rdot::after{ background:var(--pv-private); }

.fr-rmain{ min-width:0; }
.fr-rtop{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.fr-rname{ font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ink); letter-spacing:-.01em; }
.fr-rtag{ font-size:var(--fs-2xs); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
  color:var(--muted); background:var(--surface2); border:1px solid var(--line2); border-radius:var(--r-pill); padding:.05rem .45rem; }
.fr-rdefault{ font-size:var(--fs-2xs); font-weight:var(--fw-bold); color:var(--pv-private); white-space:nowrap;
  background:var(--pv-private-bg); border:1px solid var(--pv-private-ln); border-radius:var(--r-pill); padding:.05rem .45rem; }
/* the per-deal consequence — "ล้งคู่ดีลจะเห็น: ___" */
.fr-rwho{ font-size:var(--fs-sm); color:var(--ink2); line-height:1.45; margin-top:.3rem; }
.fr-rwho .who{ color:var(--brand2); font-weight:var(--fw-semi); }
.fr-rung.off .fr-rwho .who{ color:var(--pv-private); }

/* precision meter — honest "how identifying is this" (0–4 filled) */
.fr-meter{ display:flex; gap:3px; margin-top:.5rem; }
.fr-meter .seg{ height:5px; flex:1; border-radius:2px; background:var(--line2); }
.fr-meter .seg.on{ background:var(--brand); }
.fr-rung.off .fr-meter .seg.on{ background:var(--pv-private); }

/* ============================================================
   CONSENT · live preview — "ตอนนี้ ล้งคู่ดีลจะเห็น: ___" updates with
   the selected rung. Makes the abstract choice concrete + reversible.
   ============================================================ */
.fr-preview{ display:flex; gap:.6rem; align-items:flex-start;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface2); padding:.7rem .8rem; }
.fr-preview .ic{ width:18px; height:18px; flex:0 0 18px; color:var(--brand2); margin-top:1px; display:inline-flex; }
.fr-preview .ic svg{ width:100%; height:100%; display:block; }
.fr-preview .pv-main .pk{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:var(--fw-bold); }
.fr-preview .pv-main .pvv{ font-size:var(--fs-sm); color:var(--ink); font-weight:var(--fw-semi); margin-top:1px; line-height:1.45; }
.fr-preview.closed .ic{ color:var(--pv-private); }

/* ============================================================
   CONSENT · the SEPARATOR before training — these are TWO DISTINCT
   PDPA purposes (disclosure ≠ training). Make the break legible.
   ============================================================ */
.fr-sep{ display:flex; align-items:center; gap:var(--s3); margin:var(--s2) 0; }
.fr-sep .ln{ flex:1; height:1px; background:var(--line2); }
.fr-sep .lbl{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:var(--fw-bold);
  border:1px dashed var(--line2); border-radius:var(--r-pill); padding:.12rem .6rem; background:var(--surface); }

/* ============================================================
   SWITCH ROW · .fr-switch — accessible toggle for an opt-in consent
   (training; reusable). Default OFF. Greyscale-safe: knob position +
   ✓ glyph, not colour alone.
   ============================================================ */
.fr-switchrow{ display:flex; align-items:flex-start; gap:var(--s3);
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:var(--s4); }
.fr-switchrow .sw-main{ flex:1; min-width:0; }
.fr-switchrow .sw-main b{ display:block; font-size:var(--fs-md); color:var(--ink); font-weight:var(--fw-bold); letter-spacing:-.01em; }
.fr-switchrow .sw-main p{ margin:.25rem 0 0; font-size:var(--fs-sm); color:var(--muted); line-height:1.5; }
.fr-switchrow .sw-main .purpose{ display:inline-flex; align-items:center; gap:.3rem; margin-top:.45rem;
  font-size:var(--fs-2xs); font-weight:var(--fw-bold); color:var(--pv-est);
  background:var(--pv-est-bg); border:1px solid var(--pv-est-ln); border-radius:var(--r-pill); padding:.1rem .5rem; }
.fr-switchrow.on{ border-color:var(--pv-verified-ln); background:var(--pv-verified-bg); }

.fr-switch{ flex:0 0 auto; position:relative; width:52px; height:30px; border-radius:var(--r-pill);
  background:var(--line2); border:1px solid var(--line2); cursor:pointer; padding:0;
  transition:background .16s, border-color .16s; }
.fr-switch::after{ content:""; position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%;
  background:var(--surface); box-shadow:var(--sh-sm); transition:transform .16s; }
.fr-switch[aria-checked="true"]{ background:var(--pv-verified); border-color:var(--pv-verified); }
.fr-switch[aria-checked="true"]::after{ transform:translateX(22px); }
.fr-switch:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.fr-switch .swglyph{ position:absolute; top:50%; transform:translateY(-50%); left:8px; color:#fff;
  font-size:.8rem; font-weight:var(--fw-x); opacity:0; transition:opacity .16s; }
.fr-switch[aria-checked="true"] .swglyph{ opacity:1; }

/* ============================================================
   GAP VERIFY CARD · .fr-gapcard — OPTIONAL, lookup-only.
   The grower's OWN 13-digit id is used to look up the GAP registry
   and is NEVER stored / logged. The shield note must make that
   believable. On success the shipped .gapseal renders.
   ============================================================ */
.fr-gapcard{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
.fr-gaphead{ display:flex; align-items:flex-start; gap:.7rem; padding:var(--s4); border-bottom:1px solid var(--line); background:var(--surface2); }
.fr-gaphead .ic{ width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid; place-items:center;
  background:var(--surface); color:var(--pv-verified); border:1px solid var(--pv-verified-ln); }
.fr-gaphead .ic svg{ width:18px; height:18px; display:block; }
.fr-gaphead .gh-main b{ display:block; font-size:var(--fs-md); font-weight:var(--fw-bold); letter-spacing:-.01em; }
.fr-gaphead .gh-main span{ display:block; font-size:var(--fs-xs); color:var(--muted); margin-top:1px; line-height:1.4; }
.fr-gapbody{ padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); }

/* the 13-digit id input — mono, spaced, big tap */
.fr-idinput{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:.18em;
  font-size:var(--fs-lg); color:var(--ink); background:var(--surface2);
  border:1px solid var(--line2); border-radius:var(--r-sm); padding:.7rem .8rem; min-height:48px; width:100%; }
.fr-idinput:focus-visible{ outline:2px solid var(--ring); outline-offset:1px; }
.fr-idinput.invalid{ border-color:var(--bad); background:var(--bad-bg); }

/* the lookup-only reassurance — the privacy promise, stated hard */
.fr-shield{ display:flex; gap:.55rem; align-items:flex-start;
  background:var(--pv-private-bg); border:1px solid var(--pv-private-ln); border-radius:var(--r);
  padding:.6rem .7rem; font-size:var(--fs-xs); color:var(--ink2); line-height:1.5; }
.fr-shield .ic{ width:16px; height:16px; flex:0 0 16px; color:var(--pv-private); margin-top:1px; display:inline-flex; }
.fr-shield .ic svg{ width:100%; height:100%; display:block; }
.fr-shield b{ color:var(--pv-private); font-weight:var(--fw-bold); }

.fr-gapresult{ display:none; }
.fr-gapcard.verified .fr-gapbody .fr-gapform{ display:none; }
.fr-gapcard.verified .fr-gapbody .fr-gapresult{ display:flex; flex-direction:column; gap:var(--s3); }

/* ============================================================
   SUCCESS summary chips (inside the .drawerok body) — what was set.
   ============================================================ */
.fr-okwrap{ display:flex; flex-direction:column; gap:var(--s4); padding:0 var(--s5) var(--s5); }
.fr-summary{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.fr-summary .sm-row{ display:flex; align-items:center; gap:var(--s3); padding:.6rem var(--s4); border-top:1px solid var(--line); }
.fr-summary .sm-row:first-child{ border-top:0; }
.fr-summary .sm-k{ flex:0 0 auto; font-size:var(--fs-xs); color:var(--muted); min-width:78px; }
.fr-summary .sm-v{ flex:1; font-size:var(--fs-sm); color:var(--ink); font-weight:var(--fw-semi); text-align:right;
  display:flex; align-items:center; justify-content:flex-end; gap:.4rem; flex-wrap:wrap; }

/* ============================================================
   WITHDRAW / REDUCE-DISCLOSURE CONFIRM (destructive · PDPA) —
   reuses .scrim/.sheet. Reducing scope or turning disclosure OFF on an
   already-consented orchard is destructive → confirm. It stops FUTURE
   disclosure only (FR-M6-14); closed deals stand. (.btn.danger is
   already shipped in export.components.css — not redefined here.)
   ============================================================ */
.fr-confic{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; margin-bottom:.6rem;
  background:var(--pv-private-bg); color:var(--pv-private); font-size:1.3rem; }
.fr-confnote{ display:flex; gap:.5rem; align-items:flex-start; text-align:left; margin-top:var(--s3);
  background:var(--surface2); border:1px solid var(--line); border-radius:var(--r); padding:.6rem .7rem;
  font-size:var(--fs-xs); color:var(--ink2); line-height:1.5; }
.fr-confnote b{ color:var(--ink); font-weight:var(--fw-semi); }
.fr-confacts{ display:flex; gap:var(--s3); margin-top:var(--s5); }
.fr-confacts .btn{ flex:1; justify-content:center; }
@media (max-width:560px){ .fr-confacts{ flex-direction:column-reverse; } }

/* ============================================================
   The wizard drawer is a touch roomier than the 440px offer drawer
   (the consent step is content-dense). Still a bottom-sheet < 560px.
   ============================================================ */
.drawer.fr-wizard{ width:min(480px,100%); }
.drawer.fr-wizard .dr-body{ gap:var(--s5); }

@media (pointer:coarse){
  .fr-rung, .fr-switchrow, .btn{ min-height:44px; }
  .fr-step{ min-height:44px; }
}
@media (max-width:480px){
  .fr-empty{ padding:var(--s6) var(--s4); }
  .fr-rung{ grid-template-columns:22px 1fr; gap:.6rem; }
}

/* add-plot wizard · optional pin picker (real Leaflet satellite map + GPS) */
.fr-pinmap{ height:190px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line2); isolation:isolate; margin-top:10px; background:#27331f; }
.fr-pinmap.leaflet-container{ cursor:grab; }
.fr-pinmap .leaflet-control-attribution{ font-size:9px; background:color-mix(in srgb,var(--surface) 82%, transparent); color:var(--muted); }
.fr-pinmap .leaflet-bar a{ background:var(--surface); color:var(--ink); border-bottom-color:var(--line2); }
.fr-lpin svg{ width:30px; height:30px; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.fr-coordread{ display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-top:8px; font-size:var(--fs-sm); }
.fr-coordread .ck{ color:var(--muted); }
.fr-coordread .cv{ font-family:var(--mono); font-weight:var(--fw-bold); }
.fr-coordread.empty .cv{ color:var(--muted); font-family:inherit; font-weight:normal; }

/* recommended variant — pin is a Tier-1 service input (own GDD/spray clock),
   framed value-first + private, NOT an "optional, don't-have-to-share" skip */
.fr-coordskip.rec{ border:1.5px solid color-mix(in srgb,var(--brand) 38%, var(--line2)); background:color-mix(in srgb,var(--brand-soft) 45%, var(--surface)); }
.fr-coordskip.rec .ic{ color:var(--brand); }
.fr-coordskip.rec .cmain b{ color:var(--ink); }
.fr-coordskip.rec .cmain span{ color:var(--ink2); }