/* ============================================================
   parcels.components.css · Parcel-coordinates layer
   (พิกัดรายแปลง · admin / Field-Ops — Surface C, EO accuracy review)
   ------------------------------------------------------------
   EXTENDS Atlas. Loaded LAST, after supply.tokens.css →
   supply.components.css → shell.chrome.css → sourcing.components.css →
   trade.components.css. Every value resolves to a supply.tokens.css
   variable — NO new colour / font / radius minted. The map IMAGERY
   tones (canopy greens/browns on .pm-canvas) are photographic
   placeholder fills, not brand tokens. Zero-dependency; greyscale-safe
   (every state carries a glyph / dash / shape cue, not colour alone).

   NEW here (everything else reuses live Atlas classes):
     · scope picker            .pm-picker      (extends .filterbar)
     · coverage strip          .pm-cov         (honest counts, mono)
     · map card + toolbar      .pm-mapcard .pm-toolbar .pm-tgroup
     · satellite placeholder   .pm-canvas .pm-scale .pm-attr .pm-phcap
     · the PIN LANGUAGE        .pm-poly .pm-pin (.verified/.conflict/.review/.sel)
     · legend                  .pm-legend      (extends .legend)
     · parcel table            .pm-table       (extends .ledger + select col)
     · prediction-vs-truth     .pm-vs .pm-confbar .pm-gtpick .pm-thumb
     · selection basket        .pm-basket
     · admin coord lock        .pm-coordlock
     · toast                   .pm-toast
   ============================================================ */

/* ============================================================
   SCOPE PICKER — pick province → amphoe → tambon → sweep, then load.
   Reuses .filterbar / .fctl; adds a load button + count.
   ============================================================ */
.pm-picker{ align-items:flex-end; }
.pm-picker .fctl{ min-width:150px; }
.pm-picker .pm-loadbtn{ flex:0 0 auto; }
.pm-picker .pm-pickhint{ flex:1 1 100%; order:5; font-size:var(--fs-2xs); color:var(--muted);
  display:flex; align-items:center; gap:.4rem; margin-top:.1rem; }
.pm-picker .pm-pickhint .ic{ width:13px; height:13px; color:var(--brand2); display:inline-flex; }
.pm-picker .pm-pickhint .ic svg{ width:100%; height:100%; display:block; }

/* ============================================================
   COVERAGE STRIP — honest roll-up counts for the loaded tambon.
   ============================================================ */
.pm-cov{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--s2);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-sm); padding:var(--s2); }
.pm-covcell{ padding:.55rem .7rem; border-radius:var(--r); background:var(--surface2); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:.15rem; }
.pm-covcell .ck{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  font-weight:var(--fw-bold); display:flex; align-items:center; gap:.3rem; }
.pm-covcell .cv{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1.45rem;
  font-weight:var(--fw-bold); line-height:1.05; color:var(--ink); letter-spacing:-.01em; }
.pm-covcell .cv .u{ font-size:var(--fs-xs); color:var(--muted); font-weight:var(--fw-semi); margin-left:.15rem; }
.pm-covcell .cv .g{ font-size:.8em; margin-right:.1rem; }
.pm-covcell.verified .cv, .pm-covcell.verified .ck .g{ color:var(--pv-verified); }
.pm-covcell.conflict .cv, .pm-covcell.conflict .ck .g{ color:var(--bad); }
.pm-covcell.review .cv, .pm-covcell.review .ck .g{ color:var(--pv-est); }

/* ============================================================
   MAP CARD = toolbar + satellite canvas. The canvas is the ONE
   vendored-Leaflet surface — mocked as a styled placeholder.
   ============================================================ */
.pm-mapcard{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); box-shadow:var(--sh-sm); position:relative; }

/* --- toolbar --------------------------------------------------- */
.pm-toolbar{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  padding:.55rem var(--s3); background:var(--surface2); border-bottom:1px solid var(--line); }
.pm-tgroup{ display:flex; align-items:center; gap:.45rem; }
.pm-tgroup .tlbl{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:var(--fw-bold); }
.pm-toolbar .grow{ flex:1; }
/* basemap segmented control (reuses .seg look) */
.pm-seg{ display:inline-flex; border:1px solid var(--line2); border-radius:var(--r-pill); overflow:hidden; background:var(--surface); }
.pm-seg button{ display:inline-flex; align-items:center; gap:.3rem; border:0; background:var(--surface); color:var(--ink2);
  cursor:pointer; padding:.36rem .62rem; font:inherit; font-size:var(--fs-xs); line-height:1; white-space:nowrap; }
.pm-seg button .ic{ width:13px; height:13px; display:inline-flex; }
.pm-seg button .ic svg{ width:100%; height:100%; display:block; }
.pm-seg button[aria-pressed="true"]{ background:var(--brand-soft); color:var(--brand-ink); font-weight:var(--fw-bold); }
/* layer toggle checkbox */
.pm-toggle{ display:inline-flex; align-items:center; gap:.4rem; font-size:var(--fs-xs); color:var(--ink2);
  font-weight:var(--fw-semi); cursor:pointer; user-select:none; padding:.28rem .5rem; border-radius:var(--r-pill);
  border:1px solid var(--line2); background:var(--surface); white-space:nowrap; }
.pm-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.pm-toggle .box{ width:15px; height:15px; border-radius:4px; border:1.5px solid var(--line2); background:var(--surface2);
  display:grid; place-items:center; color:#fff; flex:0 0 15px; }
.pm-toggle .box svg{ width:11px; height:11px; opacity:0; }
.pm-toggle input:checked + .box{ background:var(--brand); border-color:var(--brand); }
.pm-toggle input:checked + .box svg{ opacity:1; }
.pm-toggle input:focus-visible + .box{ outline:2px solid var(--ring); outline-offset:1px; }
/* agreement filter chips */
.pm-fchip{ border:1px solid var(--line2); background:var(--surface); color:var(--ink2); border-radius:var(--r-pill);
  padding:.3rem .7rem; font-size:var(--fs-xs); font-weight:var(--fw-semi); cursor:pointer;
  display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; }
.pm-fchip .g{ font-weight:var(--fw-x); }
.pm-fchip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--surface); }
.pm-fchip[aria-pressed="true"] .g{ color:var(--surface); }
/* icon-only zoom / fullscreen */
.pm-iconbtn{ width:30px; height:30px; border-radius:var(--r-sm); border:1px solid var(--line2); background:var(--surface);
  color:var(--ink2); cursor:pointer; display:grid; place-items:center; font-family:var(--mono); font-weight:var(--fw-bold); }
.pm-iconbtn .ic{ width:15px; height:15px; display:inline-flex; }
.pm-iconbtn .ic svg{ width:100%; height:100%; display:block; }
.pm-iconbtn:hover{ border-color:var(--muted); background:var(--surface2); }
.pm-asof{ font-size:var(--fs-2xs); color:var(--muted); display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.pm-asof .num{ font-family:var(--mono); color:var(--ink2); font-weight:var(--fw-semi); }
.pm-asof .dot{ width:7px; height:7px; border-radius:50%; background:var(--pv-verified); flex:0 0 7px; }

/* --- satellite canvas placeholder ------------------------------ */
.pm-canvas{ position:relative; height:440px; overflow:hidden; isolation:isolate;
  /* isolate = a stacking context: Leaflet's internal z-index (panes/controls up to
     1000) is CONFINED here, so the page-level review drawer + its scrim (and the
     legend sibling above) always paint above the map instead of being covered. */
  /* photographic placeholder imagery — canopy greens over earth (NOT brand tokens) */
  background-color:#27331f;
  background-image:
    radial-gradient(60px 52px at 18% 28%, rgba(120,150,86,.55), transparent 70%),
    radial-gradient(74px 60px at 64% 22%, rgba(96,128,70,.5), transparent 72%),
    radial-gradient(54px 48px at 86% 44%, rgba(130,156,92,.5), transparent 70%),
    radial-gradient(80px 64px at 34% 66%, rgba(88,118,64,.55), transparent 72%),
    radial-gradient(60px 54px at 74% 78%, rgba(112,140,80,.45), transparent 70%),
    radial-gradient(46px 40px at 50% 46%, rgba(150,124,78,.4), transparent 72%),
    linear-gradient(118deg, #2b3a22 0%, #222d1b 50%, #2e3a26 100%);
}
.pm-canvas::after{ /* faint tile-seam grid — reads as a slippy-map */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.13;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size:64px 64px; }
.pm-canvas[data-base="plan"]{ background-color:var(--surface2); background-image:
  repeating-linear-gradient(135deg, color-mix(in srgb,var(--bg2) 60%, var(--surface)) 0 12px, var(--surface) 12px 24px); }
.pm-canvas[data-base="plan"]::after{ opacity:.5; background-image:
  linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); }
.pm-canvas[data-base="ndvi"]{ background-color:#1c2a1c; background-image:
  radial-gradient(80px 64px at 30% 30%, rgba(80,150,60,.7), transparent 72%),
  radial-gradient(70px 56px at 70% 64%, rgba(180,170,40,.55), transparent 72%),
  linear-gradient(120deg,#22331f,#2a2f17); }

.pm-mapsvg{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* the PIN LANGUAGE — polygons (field boundaries) + centroid pins.
   class = letter glyph (canonical) · confidence = pin fill (ramp, set
   inline) · agreement state = stroke/dash/glyph (the provenance ladder). */
.pm-poly{ fill-opacity:.32; stroke-width:1.6; cursor:pointer; transition:fill-opacity .12s, stroke-width .12s; }
.pm-poly:hover{ fill-opacity:.5; }
.pm-poly.verified{ stroke:var(--pv-verified); }
.pm-poly.conflict{ stroke:var(--bad); stroke-dasharray:4 3; }
.pm-poly.review{ stroke:var(--pv-est); stroke-dasharray:2 3; }
.pm-poly.sel{ stroke:#fff; stroke-width:2.6; fill-opacity:.6; }
.pm-canvas[data-base="plan"] .pm-poly.sel{ stroke:var(--ink); }

.pm-pin{ cursor:pointer; }
.pm-pin .pin-body{ stroke:#fff; stroke-width:1.4; }
.pm-pin .pin-letter{ font-family:var(--mono); font-weight:var(--fw-bold); font-size:9px; fill:#1d1a12;
  text-anchor:middle; dominant-baseline:central; pointer-events:none; }
.pm-pin .pin-badge{ stroke:#fff; stroke-width:1; }
.pm-pin .pin-badge-g{ font-size:8px; font-weight:700; text-anchor:middle; dominant-baseline:central;
  fill:#fff; pointer-events:none; }
.pm-pin.review .pin-body{ stroke-dasharray:2.5 2; }
.pm-pin.sel .pin-body{ stroke:var(--ink); stroke-width:2.6; }
.pm-pinlabel{ font-family:var(--mono); font-size:8.5px; fill:#fff; text-anchor:middle; paint-order:stroke;
  stroke:rgba(20,28,16,.85); stroke-width:2.6px; font-weight:600; pointer-events:none; }
.pm-canvas[data-base="plan"] .pm-pinlabel{ fill:var(--ink2); stroke:var(--surface); }

/* markercluster bubbles → Atlas (override the vendored default GREEN; markercluster
   is used ONLY on this surface in greenfield). Scoped under .pm-canvas so the higher
   specificity beats MarkerCluster.Default.css even though it's lazy-injected LATER.
   Warmth ∝ density: more parcels in a cluster reads warmer (echoes the data ramp). */
.pm-canvas .marker-cluster{ background:transparent; }
.pm-canvas .marker-cluster div{ border:2px solid var(--brand); box-shadow:var(--sh-sm); background:var(--brand-soft); }
.pm-canvas .marker-cluster span{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:var(--fw-bold); color:var(--brand-ink); }
.pm-canvas .marker-cluster-small div{ background:var(--brand-soft); }
.pm-canvas .marker-cluster-medium div{ background:color-mix(in srgb, var(--ramp-3) 55%, var(--surface)); }
.pm-canvas .marker-cluster-large div{ background:color-mix(in srgb, var(--ramp-4) 60%, var(--surface)); border-color:var(--brand2); }

/* scale bar + attribution + placeholder caption, overlaid on the canvas */
.pm-scale{ position:absolute; left:var(--s4); bottom:var(--s3); display:flex; flex-direction:column; gap:2px; z-index:3; }
.pm-scale .bar{ height:5px; width:72px; background:#fff; border:1px solid rgba(20,28,16,.6);
  border-top-width:0; box-shadow:0 1px 2px rgba(0,0,0,.4);
  background-image:linear-gradient(90deg,#fff 0 50%, #1d1a12 50% 100%); }
.pm-scale .sl{ font-family:var(--mono); font-size:var(--fs-2xs); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.7); }
.pm-canvas[data-base="plan"] .pm-scale .sl{ color:var(--ink2); text-shadow:none; }

.pm-attr{ position:absolute; right:0; bottom:0; z-index:3; font-size:9px; color:#e9ecdf;
  background:rgba(20,28,16,.6); padding:.12rem .45rem; border-top-left-radius:var(--r-sm);
  font-family:var(--mono); max-width:62%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-phcap{ position:absolute; left:50%; top:var(--s3); transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; max-width:80%; pointer-events:none; }
.pm-phcap .l1{ font-family:var(--mono); font-size:var(--fs-2xs); color:#eef0e4; letter-spacing:.02em;
  background:rgba(20,28,16,.62); border:1px solid rgba(255,255,255,.18); border-radius:var(--r-pill); padding:.22rem .7rem; }
.pm-phcap .l2{ font-size:9px; color:rgba(255,255,255,.7); text-shadow:0 1px 2px rgba(0,0,0,.6); }
.pm-canvas[data-base="plan"] .pm-phcap .l1{ color:var(--ink2); background:var(--surface); border-color:var(--line2); }
.pm-canvas[data-base="plan"] .pm-phcap .l2{ color:var(--muted); text-shadow:none; }

/* ============================================================
   LEGEND — extends .legend; three blocks (state · confidence · class).
   ============================================================ */
.pm-legend{ position:absolute; right:var(--s4); bottom:var(--s3); z-index:4; max-width:208px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-md);
  padding:.6rem .7rem; }
.pm-legend .lt{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
  font-weight:var(--fw-bold); margin:.5rem 0 .3rem; }
.pm-legend .lt:first-child{ margin-top:0; }
.pm-legend .lkey{ display:flex; align-items:center; gap:.45rem; font-size:var(--fs-2xs); color:var(--ink2); padding:1px 0; }
.pm-legend .lkey .lg{ font-weight:var(--fw-x); width:13px; text-align:center; flex:0 0 13px; }
.pm-legend .lkey .lg.verified{ color:var(--pv-verified); }
.pm-legend .lkey .lg.conflict{ color:var(--bad); }
.pm-legend .lkey .lg.review{ color:var(--pv-est); }
.pm-legend .ramp{ display:flex; height:9px; border-radius:3px; overflow:hidden; border:1px solid var(--line); }
.pm-legend .ramp i{ flex:1; }
.pm-legend .scl{ display:flex; justify-content:space-between; font-size:var(--fs-2xs); color:var(--muted); margin-top:2px; }
.pm-legend .classkeys{ display:flex; flex-wrap:wrap; gap:.25rem .5rem; }
.pm-legend .ckey{ display:inline-flex; align-items:center; gap:.3rem; font-size:var(--fs-2xs); color:var(--ink2); }
.pm-legend .cdot{ width:14px; height:14px; border-radius:4px; flex:0 0 14px; display:grid; place-items:center;
  font-family:var(--mono); font-size:7.5px; font-weight:700; color:#1d1a12; border:1px solid rgba(20,28,16,.25); }
@media (max-width:880px){ .pm-legend{ position:static; max-width:none; margin:var(--s3); box-shadow:none; } }

/* ============================================================
   PARCEL TABLE — extends .ledger; adds a select column + agreement.
   Each .pv chip carries its glyph so the ladder survives greyscale.
   ============================================================ */
.pm-table{ }
.pm-table .lr{ grid-template-columns:30px 1.2fr 1fr .7fr 1.3fr 1.3fr auto .7fr .8fr; gap:var(--s3); }
.pm-table .lr.sel{ background:color-mix(in srgb,var(--brand-soft) 30%, var(--surface)); }
.pm-table .lr.bodyrow{ cursor:pointer; }
.pm-table .lr.bodyrow:hover{ background:var(--surface2); }
.pm-table .lr.bodyrow.sel:hover{ background:color-mix(in srgb,var(--brand-soft) 45%, var(--surface)); }
.pm-table .pid{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--ink); font-weight:var(--fw-semi); }
.pm-table .cls{ display:inline-flex; align-items:center; gap:.4rem; }
.pm-table .cls .pred-conf{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--muted); }
.pm-table .gtcell.unset{ color:var(--muted); font-style:italic; font-size:var(--fs-xs); }
.pm-table .ndvi-cell{ display:flex; align-items:center; gap:.4rem; }
.pm-table .ndvi-bar{ width:34px; height:6px; border-radius:var(--r-pill); background:var(--bg2); overflow:hidden; flex:0 0 34px; }
.pm-table .ndvi-bar i{ display:block; height:100%; }
.pm-checkbox{ width:17px; height:17px; border-radius:4px; border:1.5px solid var(--line2); background:var(--surface);
  display:grid; place-items:center; cursor:pointer; color:#fff; }
.pm-checkbox svg{ width:12px; height:12px; opacity:0; }
.pm-checkbox.on{ background:var(--brand); border-color:var(--brand); }
.pm-checkbox.on svg{ opacity:1; }
/* a compact class swatch+letter used in cells */
.pm-classdot{ width:18px; height:18px; border-radius:5px; flex:0 0 18px; display:grid; place-items:center;
  font-family:var(--mono); font-size:8.5px; font-weight:700; color:#1d1a12; border:1px solid rgba(20,28,16,.22); }
.pm-classname{ font-weight:var(--fw-semi); font-size:var(--fs-sm); }

/* a tiny dense .pv variant for table cells */
.pv.mini{ padding:.06rem .42rem; font-size:var(--fs-2xs); }

/* conflict provenance chip — gt ≠ pred (a model-error signal). The provenance
   ladder has no "bad" tier, so conflict deliberately uses the semantic red
   (design_notes_parcels §6.3) rather than a provenance hue. Glyph ⚠ + this class
   keep it greyscale-safe; JS uses `.pv.conflict` instead of inline styling. */
.pv.conflict{ background:var(--bad-bg); color:var(--bad);
  border-color:color-mix(in srgb,var(--bad) 40%, transparent); }

/* review-queue ledger (active-learning tab) — reuses .ledger/.pm-table grammar */
.pm-queue .lr{ grid-template-columns:46px 1.1fr 1.7fr 1.4fr 1fr auto; gap:var(--s3); }
@media (max-width:980px){ .pm-queue .lr{ grid-template-columns:38px 1fr 1.2fr auto; } }
/* province scope picker — point the queue at one province (desk-VHR focus) */
.pm-queuescope{ display:flex; align-items:center; gap:var(--s2); margin:var(--s2) 0 var(--s3); }
.pm-select{ font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r2,8px); padding:var(--s1) var(--s2); cursor:pointer; }
.pm-select:focus-visible{ outline:2px solid var(--brass,#b8860b); outline-offset:1px; }

/* desk-VHR progress readout — momentum + on-demand precision / gate status */
.pm-qprog{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4);
  margin:0 0 var(--s3); padding:var(--s2) var(--s3); border:1px solid var(--line);
  border-radius:var(--r-sm,8px); background:var(--surface2,var(--surface)); font-size:var(--fs-sm); }
.pm-qprog-c b{ color:var(--pv-verified,var(--brand2)); }
.pm-qprog-acc{ display:inline-flex; align-items:center; gap:var(--s2); }
.pm-accbtn{ font:inherit; font-size:var(--fs-xs); color:var(--brand2); background:none;
  border:1px solid var(--line2,var(--line)); border-radius:var(--r-pill); padding:.2rem .6rem; cursor:pointer; }
.pm-accbtn:hover{ background:var(--brand-soft,var(--surface)); }
.pm-gatechip{ font-size:var(--fs-2xs); font-weight:var(--fw-bold); padding:.12rem .5rem; border-radius:var(--r-pill); }
.pm-gatechip.pub{ color:var(--pv-verified,#1f7a3f); background:color-mix(in srgb,var(--pv-verified,#1f7a3f) 14%, transparent); }
.pm-gatechip.held{ color:var(--warn,#b9770e); background:color-mix(in srgb,var(--warn,#b9770e) 14%, transparent); }

@media (max-width:980px){
  .pm-table .lr{ grid-template-columns:26px 1fr 1fr auto; }
  .pm-table .lr .hide-narrow,
  .pm-table .lr.bodyrow .hide-narrow{ display:none; }
  .pm-table .lr:first-child{ grid-template-columns:26px 1fr 1fr auto; }
}

/* ============================================================
   PREDICTION-vs-GROUND-TRUTH block (drawer) — the heart of review.
   ============================================================ */
.pm-vs{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.pm-vs .vs-head{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
  font-weight:var(--fw-bold); padding:var(--s3) var(--s4); background:var(--surface2); border-bottom:1px solid var(--line); }
.pm-vs .vs-row{ display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4); }
.pm-vs .vs-row + .vs-row{ border-top:1px solid var(--line); }
.pm-vs .vs-k{ flex:0 0 116px; font-size:var(--fs-xs); color:var(--muted); display:flex; flex-direction:column; gap:.2rem; }
.pm-vs .vs-k .pv{ align-self:flex-start; }
.pm-vs .vs-main{ flex:1; min-width:0; display:flex; align-items:center; gap:.5rem; }
.pm-vs .vs-cls{ display:flex; align-items:center; gap:.45rem; font-weight:var(--fw-bold); font-size:var(--fs-md); }
.pm-vs .vs-unset{ color:var(--muted); font-style:italic; font-weight:var(--fw-semi); font-size:var(--fs-sm); }
/* confidence bar (the model's OWN stated number — honest, not authoritative) */
.pm-confbar{ display:flex; align-items:center; gap:.5rem; width:100%; }
.pm-confbar .track{ flex:1; height:8px; border-radius:var(--r-pill); background:var(--bg2); overflow:hidden; }
.pm-confbar .track i{ display:block; height:100%; border-radius:var(--r-pill); }
.pm-confbar .pct{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:var(--fw-bold);
  font-size:var(--fs-sm); color:var(--ink); white-space:nowrap; }
.pm-confbar .pct .t{ color:var(--pv-est); }

/* ground-truth picker (correct the label) */
.pm-gtpick{ border:1.5px dashed var(--line2); border-radius:var(--r); background:var(--surface2); padding:var(--s3) var(--s4); }
.pm-gtpick .gp-h{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  font-weight:var(--fw-bold); margin-bottom:.5rem; }
.pm-gtopts{ display:flex; flex-wrap:wrap; gap:.4rem; }
.pm-gtopt{ display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--line2); background:var(--surface);
  color:var(--ink2); border-radius:var(--r-pill); padding:.32rem .6rem; font:inherit; font-size:var(--fs-xs);
  font-weight:var(--fw-semi); cursor:pointer; }
.pm-gtopt[aria-pressed="true"]{ border-color:var(--brand); background:var(--brand-soft); color:var(--brand-ink); }
.pm-gtnote{ margin-top:.55rem; font-size:var(--fs-2xs); line-height:1.45; }
.pm-gtnote.match{ color:var(--pv-verified); }
.pm-gtnote.diff{ color:var(--pv-est); }

/* parcel chip thumbnail (cropped imagery placeholder) */
.pm-thumb{ position:relative; height:104px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  background-color:#27331f;
  background-image:radial-gradient(50px 40px at 35% 40%, rgba(120,150,86,.6), transparent 70%),
    radial-gradient(46px 38px at 70% 64%, rgba(96,128,70,.55), transparent 72%),
    linear-gradient(120deg,#2b3a22,#222d1b); }
.pm-thumb .tlab{ position:absolute; left:6px; bottom:6px; font-family:var(--mono); font-size:9px; color:#eef0e4;
  background:rgba(20,28,16,.6); border-radius:var(--r-sm); padding:.1rem .4rem; }
.pm-thumb svg{ position:absolute; inset:0; width:100%; height:100%; }

/* admin-only coordinate lock note */
.pm-coordlock{ display:flex; gap:.5rem; align-items:flex-start; 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:.4rem .55rem; line-height:1.45; }
.pm-coordlock .ic{ flex:0 0 auto; }
.pm-coordval{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); font-weight:var(--fw-semi); }

/* ============================================================
   SELECTION BASKET — floating bar; drives the CSV export.
   ============================================================ */
.pm-basket{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(16px); z-index:70;
  display:flex; align-items:center; gap:var(--s4); background:var(--ink); color:var(--surface);
  border-radius:var(--r-pill); box-shadow:var(--sh-lg); padding:.5rem .6rem .5rem 1.1rem;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; max-width:calc(100vw - 32px); }
.pm-basket.on{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.pm-basket .bk-fig{ display:flex; align-items:baseline; gap:.4rem; white-space:nowrap; }
.pm-basket .bk-n{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1.15rem; font-weight:var(--fw-bold); }
.pm-basket .bk-lbl{ font-size:var(--fs-xs); color:color-mix(in srgb,var(--surface) 72%, transparent); }
.pm-basket .bk-sep{ width:1px; height:22px; background:color-mix(in srgb,var(--surface) 30%, transparent); }
.pm-basket .btn.sm{ white-space:nowrap; }
.pm-basket .bk-clear{ border:0; background:transparent; color:color-mix(in srgb,var(--surface) 80%, transparent);
  cursor:pointer; font:inherit; font-size:var(--fs-xs); font-weight:var(--fw-semi); padding:.4rem .6rem; border-radius:var(--r-pill); }
.pm-basket .bk-clear:hover{ background:color-mix(in srgb,var(--surface) 14%, transparent); color:var(--surface); }
@media (max-width:560px){
  .pm-basket{ left:12px; right:12px; transform:translateY(16px); justify-content:space-between; gap:var(--s3); padding-left:.9rem; }
  .pm-basket.on{ transform:translateY(0); }
  /* (the gt-review drawer's mobile-clip fix now lives in the SHARED .drawer rule via
     the --sheet-max-h token — see supply.tokens.css; no per-page override needed.) */
}

/* CSV export modal column list (reuses .scrim / .sheet) */
.pm-csvcols{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.2rem 0 var(--s3); }
.pm-csvcols code{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--ink2); background:var(--surface2);
  border:1px solid var(--line2); border-radius:var(--r-sm); padding:.16rem .45rem; }
.pm-csvnote{ display:flex; gap:.5rem; align-items:flex-start; 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:.45rem .55rem; line-height:1.45; margin-bottom:var(--s4); }
.pm-csvacts{ display:flex; gap:var(--s3); }
.pm-csvacts .btn{ flex:1; justify-content:center; }

/* ============================================================
   MAP-FAIL FALLBACK (the vendored-Leaflet canon exception state).
   Replaces the canvas; table below stays usable.
   ============================================================ */
.pm-mapfail{ height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; text-align:center; padding:var(--s5); background:
  repeating-linear-gradient(135deg, var(--surface2) 0 12px, var(--surface) 12px 24px); }
.pm-mapfail .mf-ic{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--pv-stale-bg); color:var(--pv-stale); font-size:1.4rem; }
.pm-mapfail h3{ margin:.2rem 0 0; font-size:var(--fs-md); }
.pm-mapfail p{ margin:0; color:var(--muted); font-size:var(--fs-sm); max-width:44ch; }

/* skeleton map block (loading) */
.pm-skelmap{ height:300px; border-radius:var(--r-lg); }

/* ============================================================
   TOAST (reuses the ink pill idiom)
   ============================================================ */
.pm-toast{ position:fixed; left:50%; bottom:84px; transform:translateX(-50%) translateY(10px); z-index:200;
  background:var(--ink); color:var(--surface); font-size:var(--fs-sm); font-weight:var(--fw-semi);
  padding:.6rem 1.05rem; border-radius:var(--r-pill); box-shadow:var(--sh-lg);
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; max-width:90vw; text-align:center; }
.pm-toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:880px){
  .pm-canvas{ height:340px; }
}