/* ============================================================
   sale_log.components.css · สมุดขายทุเรียน (grower sale log)
   ------------------------------------------------------------
   The first WRITE tool. EXTENDS the shipped Atlas language + the
   calm-grower surfaces (grower.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 + position, never hue alone).

   Loaded LAST, after:
     fonts.css → supply.tokens.css → supply.components.css →
     shell.chrome.css → sourcing.components.css → trade.components.css →
     passport.components.css → farm.components.css → grower.components.css

   REUSES verbatim (no restyle): the calm stage (.gstage/.gwrap/.g-seclbl),
   greeting (.gh-greet), the bottom-sheet (.drawer/.dr-*), form grammar
   (.offerfield/.fieldgrid/.segfield/.fr-req/.fr-opt/.fr-help), states
   (.statebox/.skelcard), the confirm sheet (.scrim/.sheet/.fr-conf*),
   buttons (.btn.*), the provenance ladder (.pv.*), .metric, .band,
   .disc, .pptoast, and the destructive-confirm grammar.

   MINTS new (sl-*) ONLY the things with no shipped analogue:
     · the season summary strip (self-only, private)
     · the HONEST-DATA tambon farm-gate card — the number nobody has —
       in its three first-class states (k<5 hero · unlocked · self-only)
     · the k<5 "nearly there / bring a neighbour" progress + recruit
     · the price-first 30-second entry (big amount field + slip photo)
     · the sale history rows + the shareable season card
   ============================================================ */

/* the [hidden] attribute must win over component display:flex/grid */
[hidden]{ display:none !important; }

/* ============================================================
   SEASON SUMMARY — the grower's OWN running totals. Private, self-only
   (never an aggregate). Calm strip under the greeting; mono figures.
   ============================================================ */
.sl-season{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-sm); overflow:hidden; }
.sl-season .sl-seasonhd{ display:flex; align-items:center; gap:.6rem; padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line); background:var(--surface2); }
.sl-season .sl-seasonhd .yr{ font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--ink); letter-spacing:-.01em; }
.sl-season .sl-seasonhd .grow{ flex:1; }
/* a private/self-only tag — 🔒 grammar, this is nobody else's business */
.sl-selftag{ 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:.12rem .55rem; border-radius:var(--r-pill);
  background:var(--pv-private-bg); color:var(--pv-private); border:1px solid var(--pv-private-ln); }
.sl-selftag .g{ font-weight:var(--fw-x); }
.sl-season .sl-seasonbody{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.sl-sfig{ padding:var(--s4); border-left:1px solid var(--line); }
.sl-sfig:first-child{ border-left:0; }
.sl-sfig .k{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:var(--fw-bold); }
.sl-sfig .v{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1.3rem; font-weight:var(--fw-bold);
  color:var(--ink); margin-top:.15rem; line-height:1.1; }
.sl-sfig .v .u{ font-family:var(--font); font-size:var(--fs-xs); color:var(--muted); font-weight:var(--fw-semi); margin-left:.15rem; }
.sl-sfig .v .tilde{ color:var(--pv-est); }
@media (max-width:480px){
  .sl-season .sl-seasonbody{ grid-template-columns:1fr; }
  .sl-sfig{ border-left:0; border-top:1px solid var(--line); display:flex; align-items:baseline; justify-content:space-between; }
  .sl-sfig:first-child{ border-top:0; }
  .sl-sfig .v{ margin-top:0; }
}

/* ============================================================
   TAMBON FARM-GATE CARD — the honest-data hero. The number nobody in
   Thailand has: the REAL price growers received at the shed, from what
   growers logged themselves. It ALWAYS carries how many real sales it
   was computed from and over what window, and is visibly DISTINCT from
   the official national reference (different source, different tier).
   Three first-class states: .locked (k<5) · .open (k≥5) · .selfonly.
   ============================================================ */
.sl-tambon{ position:relative; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--sh-sm); overflow:hidden; }
.sl-tambon .sl-thd{ display:flex; align-items:flex-start; gap:.7rem; padding:var(--s5) var(--s5) var(--s4); }
.sl-tambon .sl-tglyph{ width:40px; height:40px; flex:0 0 40px; border-radius:11px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-ink); border:1px solid var(--brand); }
.sl-tambon .sl-tglyph svg{ width:22px; height:22px; display:block; }
.sl-tambon .sl-thm{ flex:1; min-width:0; }
.sl-tambon .sl-teyebrow{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); font-weight:var(--fw-bold); }
.sl-tambon .sl-ttitle{ font-size:var(--fs-lg); font-weight:var(--fw-x); letter-spacing:-.015em; color:var(--ink);
  line-height:1.15; margin-top:.15rem; }

/* --- the DUAL comparison: official reference vs real farm-gate ---
   This side-by-side IS the honest-data story made concrete. */
.sl-compare{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); padding:0 var(--s5) var(--s5); }
.sl-cmp{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface2); padding:var(--s4);
  display:flex; flex-direction:column; gap:.4rem; }
.sl-cmp .sl-cmplbl{ display:flex; align-items:center; gap:.4rem; font-size:var(--fs-2xs); color:var(--muted);
  font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.04em; line-height:1.3; }
.sl-cmp .sl-cmpband{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:var(--fw-bold);
  font-size:1.5rem; letter-spacing:-.01em; line-height:1; color:var(--ink); }
.sl-cmp .sl-cmpband .tilde{ color:var(--pv-est); font-weight:var(--fw-bold); }
.sl-cmp .sl-cmpband .u{ font-family:var(--font); font-size:var(--fs-xs); color:var(--muted); font-weight:var(--fw-semi); }
.sl-cmp .sl-cmpsrc{ font-size:var(--fs-2xs); color:var(--muted); line-height:1.4; }
/* the REAL cell is the star: solid verified ring + brass-warm ground */
.sl-cmp.real{ border-color:var(--pv-verified-ln); background:var(--pv-verified-bg);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pv-verified) 22%, transparent); }
.sl-cmp.real .sl-cmpband{ color:var(--pv-verified); }
.sl-cmp.real .sl-cmpband .tilde{ color:var(--pv-verified); }
.sl-cmp.real .sl-cmpsrc b{ color:var(--pv-verified); font-weight:var(--fw-bold); }
/* the official cell is the calm baseline (◆ blue) */
.sl-cmp.official .sl-cmplbl .g{ color:var(--pv-official); font-weight:var(--fw-x); }
@media (max-width:440px){ .sl-compare{ grid-template-columns:1fr; } }

/* the "what this range is" honest note under the compare */
.sl-tnote{ margin:0 var(--s5) var(--s5); display:flex; gap:.55rem; align-items:flex-start;
  background:var(--pv-verified-bg); border:1px solid var(--pv-verified-ln); border-radius:var(--r);
  padding:.6rem .7rem; font-size:var(--fs-xs); color:var(--ink2); line-height:1.5; }
.sl-tnote .g{ color:var(--pv-verified); font-weight:var(--fw-x); flex:0 0 auto; font-family:var(--mono); }
.sl-tnote b{ color:var(--pv-verified); font-weight:var(--fw-bold); }

/* ============================================================
   k<5 — THE MAKE-OR-BREAK STATE. NOT a locked door, NOT a punishment.
   "You're nearly there, and bringing a neighbour gets you there."
   Warm brass invitation ground; a progress meter of orchards; a recruit
   CTA. The real farm-gate range is genuinely withheld (k-anon floor) —
   but the copy explains WHY in a grower's words, and gives value now
   (your own log + the national reference stay visible).
   ============================================================ */
.sl-tambon.locked{ border-color:var(--brand);
  background:linear-gradient(180deg, var(--brand-soft), color-mix(in srgb,var(--brand-soft) 30%, var(--surface)) 60%); }
.sl-tambon.locked .sl-tglyph{ background:var(--surface); }

/* the progress block — "3 of 5 orchards in your tambon have logged" */
.sl-klock{ margin:0 var(--s5) var(--s5); border:1px solid var(--brand); border-radius:var(--r);
  background:var(--surface); padding:var(--s4) var(--s4) var(--s5); box-shadow:var(--sh-sm); }
.sl-klock .sl-khd{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.sl-klock .sl-kcount{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:var(--fw-x);
  font-size:1.7rem; color:var(--brand-ink); letter-spacing:-.01em; line-height:1; }
.sl-klock .sl-kcount .of{ color:var(--muted); font-weight:var(--fw-bold); }
.sl-klock .sl-klbl{ font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--ink2); }
/* the dot meter — 5 orchards, filled = logged. Position + fill, not hue. */
.sl-kmeter{ display:flex; gap:.5rem; margin:var(--s4) 0 var(--s3); }
.sl-kdot{ flex:1; height:12px; border-radius:var(--r-pill); background:var(--surface2);
  border:1.5px solid var(--line2); position:relative; }
.sl-kdot.on{ background:var(--brand); border-color:var(--brand); }
.sl-kdot.you{ background:var(--brand-soft); border:2px dashed var(--brand); }
.sl-kdot.you::after{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:9px; font-weight:var(--fw-x); color:var(--brand-ink); font-family:var(--mono); }
.sl-kmeterlbl{ display:flex; justify-content:space-between; font-size:var(--fs-2xs); color:var(--muted);
  font-family:var(--mono); }
/* the plain-words explanation (the k≥5 rule, no jargon) */
.sl-kwhy{ font-size:var(--fs-sm); color:var(--ink2); line-height:1.55; margin:var(--s3) 0 0; }
.sl-kwhy b{ color:var(--brand-ink); font-weight:var(--fw-bold); }

/* the recruit CTA — "bring a neighbour" as the flywheel move */
.sl-recruit{ display:flex; align-items:center; gap:.7rem; margin:var(--s4) var(--s5) var(--s5);
  border:1px solid var(--brand); border-radius:var(--r); background:var(--brand-soft); padding:.7rem .8rem; }
.sl-recruit .ic{ width:26px; height:26px; flex:0 0 26px; color:var(--brand-ink); display:inline-flex; }
.sl-recruit .ic svg{ width:100%; height:100%; display:block; }
.sl-recruit .rm{ flex:1; min-width:0; }
.sl-recruit .rm b{ display:block; font-size:var(--fs-sm); color:var(--brand-ink); font-weight:var(--fw-bold); }
.sl-recruit .rm span{ display:block; font-size:var(--fs-2xs); color:var(--brand2); line-height:1.4; margin-top:1px; }

/* selfonly — the grower has logged, tambon still needs others OR they
   just want to see only their own. A calm one-cell (no real range yet). */
.sl-tambon.selfonly .sl-compare{ grid-template-columns:1fr 1fr; }

/* ============================================================
   LOG-A-SALE primary entry button — the big calm CTA that opens the
   30-second drawer. Brass, generous, un-missable but not shouting.
   ============================================================ */
.sl-add{ display:flex; align-items:center; gap:.8rem; width:100%; cursor:pointer; font:inherit; text-align:left;
  border:1px solid var(--brand); border-radius:var(--r-lg); background:var(--brand-fill); color:var(--brand-fill-ink);
  padding:var(--s4) var(--s5); box-shadow:var(--sh-sm); transition:background .14s, box-shadow .14s, transform .05s; }
.sl-add:hover{ background:var(--brand-fill-hov); box-shadow:var(--sh-md); }
.sl-add:active{ transform:translateY(1px); }
.sl-add:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.sl-add .ic{ width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center;
  border-radius:9px; background:rgba(255,255,255,.16); }
.sl-add .ic svg{ width:20px; height:20px; display:block; }
.sl-add .am{ flex:1; min-width:0; }
.sl-add .am b{ display:block; font-size:var(--fs-lg); font-weight:var(--fw-bold); letter-spacing:-.01em; }
.sl-add .am span{ display:block; font-size:var(--fs-2xs); opacity:.86; margin-top:1px; }
.sl-add .ar{ font-size:1.3rem; opacity:.9; }

/* a resume-draft banner (half-finished sale saved) — never lose work */
.sl-draft{ display:flex; align-items:center; gap:.7rem; width:100%; cursor:pointer; font:inherit; text-align:left;
  border:1.5px dashed var(--pv-est-ln); border-radius:var(--r); background:var(--pv-est-bg); color:var(--ink2);
  padding:.7rem .9rem; }
.sl-draft:hover{ border-color:var(--pv-est); }
.sl-draft .ic{ width:20px; height:20px; flex:0 0 20px; color:var(--pv-est); display:inline-flex; }
.sl-draft .ic svg{ width:100%; height:100%; display:block; }
.sl-draft .dm{ flex:1; min-width:0; }
.sl-draft .dm b{ font-size:var(--fs-sm); color:var(--ink); font-weight:var(--fw-bold); }
.sl-draft .dm span{ display:block; font-size:var(--fs-2xs); color:var(--muted); margin-top:1px; }
.sl-draft .ar{ color:var(--pv-est); font-weight:var(--fw-bold); }

/* ============================================================
   THE 30-SECOND ENTRY — price-first. The ONE required field (บาท/กก.)
   is a big mono amount; everything else is optional/deferred/inferred.
   Reuses .offerfield/.fieldgrid for the rest.
   ============================================================ */
.sl-amount{ border:1px solid var(--brand); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-sm); padding:var(--s4) var(--s5) var(--s5); }
.sl-amount .sl-amlbl{ display:flex; align-items:center; gap:.4rem; font-size:var(--fs-sm); font-weight:var(--fw-bold);
  color:var(--ink); }
.sl-amount .sl-amlbl .fr-req{ color:var(--bad); font-weight:var(--fw-bold); }
.sl-amount .sl-amrow{ display:flex; align-items:baseline; gap:.5rem; margin-top:var(--s3); }
.sl-amount .sl-aminput{ flex:1; min-width:0; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:3rem; font-weight:var(--fw-bold); letter-spacing:-.02em; color:var(--ink); line-height:1;
  border:0; background:transparent; padding:0; width:100%; }
.sl-amount .sl-aminput::placeholder{ color:var(--line2); }
.sl-amount .sl-aminput:focus-visible{ outline:none; }
.sl-amount .sl-amunit{ font-size:var(--fs-md); color:var(--muted); font-weight:var(--fw-semi); white-space:nowrap; flex:0 0 auto; }
.sl-amount .sl-amrule{ height:2px; background:var(--brand); border-radius:2px; margin-top:.3rem;
  transition:background .14s; }
.sl-amount.invalid{ border-color:var(--bad); }
.sl-amount.invalid .sl-amrule{ background:var(--bad); }
.sl-amount .sl-amhint{ font-size:var(--fs-2xs); color:var(--muted); margin-top:.5rem; line-height:1.45; }
.sl-amount .sl-amwarn{ font-size:var(--fs-2xs); color:var(--bad); margin-top:.5rem; display:none; align-items:center; gap:.3rem; }
.sl-amount.invalid .sl-amwarn{ display:flex; }
.sl-amount.invalid .sl-amhint{ display:none; }

/* a collapsible "more details" — keeps the 30-sec path clean; these are
   all optional/deferred so a grower can save with price alone. */
.sl-more{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.sl-morebtn{ display:flex; align-items:center; gap:.6rem; width:100%; cursor:pointer; font:inherit; text-align:left;
  border:0; background:var(--surface2); color:var(--ink2); padding:.7rem .9rem; }
.sl-morebtn:hover{ background:var(--surface); }
.sl-morebtn .l{ flex:1; min-width:0; font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--ink); }
.sl-morebtn .opt{ font-size:var(--fs-2xs); color:var(--muted); font-weight:var(--fw-reg); }
.sl-morebtn .cv{ color:var(--muted); transition:transform .14s; }
.sl-morebtn[aria-expanded="true"] .cv{ transform:rotate(180deg); }
.sl-morebody{ padding:var(--s4); display:flex; flex-direction:column; gap:var(--s4); border-top:1px solid var(--line); }
.sl-morebody[hidden]{ display:none !important; }

/* the buyer (ล้ง) field carries a hard private note — third-party
   personal data: stays in the private store, NEVER enters any aggregate. */
.sl-privnote{ display:flex; gap:.5rem; align-items:flex-start;
  background:var(--pv-private-bg); border:1px solid var(--pv-private-ln); border-radius:var(--r-sm);
  padding:.5rem .6rem; font-size:var(--fs-2xs); color:var(--ink2); line-height:1.45; margin-top:.3rem; }
.sl-privnote .ic{ width:14px; height:14px; flex:0 0 14px; color:var(--pv-private); margin-top:1px; display:inline-flex; }
.sl-privnote .ic svg{ width:100%; height:100%; display:block; }
.sl-privnote b{ color:var(--pv-private); font-weight:var(--fw-bold); }

/* ============================================================
   SLIP PHOTO — the EVIDENCE affordance (the third gap: "argue the grade
   cut, you have no evidence"). Photo-as-evidence precedent (OrderEvidence):
   file on disk, party-gated, explicitly NO AI reads it. Optional.
   ============================================================ */
.sl-slip{ border:1.5px dashed var(--line2); border-radius:var(--r); background:var(--surface2);
  padding:var(--s4); display:flex; align-items:center; gap:.8rem; cursor:pointer; transition:border-color .12s, background .12s; }
.sl-slip:hover{ border-color:var(--brand); background:var(--surface); }
.sl-slip .ic{ width:34px; height:34px; flex:0 0 34px; border-radius:9px; display:grid; place-items:center;
  background:var(--surface); color:var(--brand2); border:1px solid var(--line2); }
.sl-slip .ic svg{ width:20px; height:20px; display:block; }
.sl-slip .sm{ flex:1; min-width:0; }
.sl-slip .sm b{ display:block; font-size:var(--fs-sm); color:var(--ink); font-weight:var(--fw-bold); }
.sl-slip .sm span{ display:block; font-size:var(--fs-2xs); color:var(--muted); line-height:1.4; margin-top:1px; }
/* attached state — a thumb + remove */
.sl-slip.on{ border-style:solid; border-color:var(--pv-verified-ln); background:var(--pv-verified-bg); cursor:default; }
.sl-slipthumb{ width:44px; height:56px; flex:0 0 44px; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--line2); background:
    repeating-linear-gradient(135deg, var(--surface) 0 6px, var(--surface2) 6px 12px); position:relative; }
.sl-slipthumb::after{ content:"🧾"; position:absolute; inset:0; display:grid; place-items:center; font-size:1.3rem; }
.sl-slip.on .ic{ color:var(--pv-verified); border-color:var(--pv-verified-ln); }
.sl-slipremove{ flex:0 0 auto; border:1px solid var(--line2); background:var(--surface); color:var(--muted);
  border-radius:var(--r-pill); cursor:pointer; font:inherit; font-size:var(--fs-2xs); font-weight:var(--fw-bold);
  padding:.35rem .7rem; min-height:36px; }
.sl-slipremove:hover{ border-color:var(--bad); color:var(--bad); }
/* the evidence-privacy note under the slip */
.sl-slipnote{ display:flex; gap:.5rem; align-items:flex-start; font-size:var(--fs-2xs); color:var(--muted);
  line-height:1.45; margin-top:.4rem; }
.sl-slipnote .g{ color:var(--pv-private); font-weight:var(--fw-x); flex:0 0 auto; font-family:var(--mono); }

/* The sale saved, the slip did not attach — a FOOTER notice.
   Deliberately NOT `.statebox.err`: that is the surface-level "nothing here"
   empty state (dashed border, 2rem icon, h3 + p, big padding), and dropping one
   into a two-button drawer footer renders as a broken layout. A DOM assertion
   cannot see that — the screenshot in tests/e2e/verify_slip_failure.mjs can, and
   did. Shape follows .sl-privnote / .sl-slipnote, coloured with the --bad pair
   which is defined in BOTH themes. */
.sl-sliperr{ display:flex; gap:.5rem; align-items:flex-start; width:100%;
  background:var(--bad-bg); border:1px solid color-mix(in srgb,var(--bad) 45%, var(--line2));
  border-radius:var(--r-sm); padding:.5rem .6rem;
  font-size:var(--fs-xs); color:var(--ink); line-height:1.45; }
.sl-sliperr .ic{ color:var(--bad); font-weight:var(--fw-bold); flex:0 0 auto; }

/* ============================================================
   SALE HISTORY — the ledger a grower builds. One calm row per sale:
   date · price/kg (the star, mono) · weight · buyer(private) · slip ·
   contributed-to-tambon dot. Tap → detail drawer (edit / delete).
   ============================================================ */
.sl-logs{ display:flex; flex-direction:column; gap:var(--s2); }
.sl-logrow{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--s3); align-items:center;
  width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--sh-sm);
  padding:var(--s3) var(--s4); transition:border-color .12s, box-shadow .12s, transform .05s; }
.sl-logrow:hover{ border-color:var(--brand); box-shadow:var(--sh-md); }
.sl-logrow:active{ transform:translateY(1px); }
.sl-logrow:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
/* the date chip on the left — mono day + month */
.sl-logdate{ display:flex; flex-direction:column; align-items:center; justify-content:center; flex:0 0 44px;
  width:44px; border-radius:var(--r-sm); background:var(--surface2); border:1px solid var(--line);
  padding:.3rem 0; }
.sl-logdate .d{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-md);
  font-weight:var(--fw-bold); color:var(--ink); line-height:1; }
.sl-logdate .m{ font-size:var(--fs-2xs); color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-top:2px; }
.sl-logmid{ min-width:0; display:flex; flex-direction:column; gap:.2rem; }
.sl-logprice{ display:flex; align-items:baseline; gap:.35rem; }
.sl-logprice .p{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-lg);
  font-weight:var(--fw-bold); color:var(--ink); letter-spacing:-.01em; line-height:1; }
.sl-logprice .u{ font-size:var(--fs-2xs); color:var(--muted); font-weight:var(--fw-semi); }
.sl-logmeta{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; font-size:var(--fs-2xs); color:var(--muted); }
.sl-logmeta .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink2); font-weight:var(--fw-semi); }
.sl-logmeta .sep{ color:var(--line2); }
/* a tiny private-buyer chip (name kept, never aggregated) */
.sl-logmeta .buyer{ display:inline-flex; align-items:center; gap:.25rem; color:var(--pv-private); font-weight:var(--fw-semi); }
.sl-logmeta .buyer .g{ font-weight:var(--fw-x); }
/* a slip-attached glyph */
.sl-logmeta .slip{ color:var(--pv-verified); font-weight:var(--fw-bold); }
.sl-logright{ display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; flex:0 0 auto; }
/* contributed-to-tambon dot: on = counted in the aggregate (brass), off = private-only */
.sl-logfeed{ display:inline-flex; align-items:center; gap:.3rem; font-size:var(--fs-2xs); color:var(--muted); }
.sl-logfeed .d{ width:7px; height:7px; border-radius:50%; flex:0 0 7px; background:var(--pv-private-ln); }
.sl-logfeed.on .d{ background:var(--brand); }
.sl-logfeed.on{ color:var(--brand2); }
.sl-logrow .sl-loggo{ color:var(--muted); font-size:1.2rem; }
.sl-logrow:hover .sl-loggo{ color:var(--brand2); }
@media (max-width:480px){
  .sl-logright .sl-logfeed span{ display:none; }
}

/* the detail drawer's fact list reuses .drow; the delete lives under a
   quiet danger divider (reuses .fr-sep + .btn.danger.ghost + .scrim/.sheet) */
.sl-logbig{ display:flex; align-items:baseline; gap:.5rem; }
.sl-logbig .p{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:2.4rem; font-weight:var(--fw-bold);
  color:var(--ink); letter-spacing:-.02em; line-height:1; }
.sl-logbig .u{ font-size:var(--fs-sm); color:var(--muted); font-weight:var(--fw-semi); }

/* ============================================================
   SHAREABLE SEASON CARD — a card a grower can screenshot into a LINE
   group. Shows their season totals + (once unlocked) the tambon real
   range — never a buyer name, never another grower's figure.
   Reuses the .scrim/.sheet modal + an OG-like card.
   ============================================================ */
.sl-sharecard{ border:1px solid var(--line2); border-radius:var(--r-lg); overflow:hidden; background:var(--surface);
  box-shadow:var(--sh-sm); }
.sl-sharecard .sc-top{ display:flex; align-items:center; gap:.6rem; padding:var(--s4) var(--s5);
  background:linear-gradient(120deg, var(--brand-soft), color-mix(in srgb,var(--brand-soft) 45%, var(--surface)));
  border-bottom:1px solid var(--line); }
.sl-sharecard .sc-mk{ width:30px; height:30px; flex:0 0 30px; }
.sl-sharecard .sc-mk svg{ width:100%; height:100%; display:block; }
.sl-sharecard .sc-wm b{ display:block; font-size:var(--fs-md); font-weight:var(--fw-x); letter-spacing:-.01em; color:var(--brand-ink); }
.sl-sharecard .sc-wm span{ display:block; font-size:var(--fs-2xs); color:var(--brand2); letter-spacing:.1em; text-transform:uppercase; margin-top:1px; }
.sl-sharecard .sc-body{ padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3); }
.sl-sharecard .sc-big{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:2rem; font-weight:var(--fw-bold);
  color:var(--pv-verified); letter-spacing:-.01em; line-height:1; }
.sl-sharecard .sc-big .u{ font-family:var(--font); font-size:var(--fs-sm); color:var(--muted); font-weight:var(--fw-semi); }
.sl-sharecard .sc-cap{ font-size:var(--fs-xs); color:var(--ink2); line-height:1.5; }
.sl-sharecard .sc-foot{ display:flex; align-items:center; gap:.4rem; padding-top:.6rem; border-top:1px solid var(--line);
  font-size:var(--fs-2xs); color:var(--muted); font-family:var(--mono); }

/* ============================================================
   OFFLINE / SAVING banners — the 30-sec entry may happen with no signal
   in a shed. Saving is optimistic; offline is stated honestly, work kept.
   ============================================================ */
.sl-savebar{ display:flex; align-items:center; gap:.6rem; }
.sl-savebar .grow{ flex:1; }
.sl-offline{ display:flex; align-items:center; gap:.6rem; border:1px solid var(--pv-stale-ln);
  background:var(--pv-stale-bg); border-radius:var(--r); padding:.6rem .8rem; font-size:var(--fs-xs);
  color:var(--ink2); line-height:1.45; }
.sl-offline .ic{ width:18px; height:18px; flex:0 0 18px; color:var(--pv-stale); display:inline-flex; }
.sl-offline .ic svg{ width:100%; height:100%; display:block; }
.sl-offline b{ color:var(--ink); font-weight:var(--fw-semi); }
.sl-saving{ display:inline-flex; align-items:center; gap:.45rem; color:var(--muted); font-size:var(--fs-sm); font-weight:var(--fw-semi); }
.sl-saving .sp{ width:15px; height:15px; border-radius:50%; border:2px solid var(--line2); border-top-color:var(--brand);
  animation:sl-spin .7s linear infinite; }
@keyframes sl-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .sl-saving .sp{ animation:none; } }

@media (pointer:coarse){
  /* PORT NOTE (2026-08-06): the delivered file listed a bare `.btn` here, which
     would set min-height on EVERY button in the whole SPA from inside a feature
     stylesheet — a silent global override, and one the design notes explicitly
     claimed not to make. It is also redundant: app.css already ships
     `button,.btn,.chip,select{min-height:44px}` under the same media query.
     Dropped; the sl-* targets below are the only ones this file owns. */
  .sl-add, .sl-logrow, .sl-draft, .sl-slip, .sl-morebtn{ min-height:44px; }
}

/* An official band measured weeks ago must LOOK different from today's, not
   only read differently — the grower comparing their own sale against it is
   making a decision, and the age of the comparison is part of the decision.
   --pv-stale is the provenance ladder's grey (AA-measured, see supply.tokens). */
.sl-cmp.official.is-stale .sl-cmpsrc{ color:var(--pv-stale); }
.sl-cmpstale{ margin-top:.2rem; font-size:var(--fs-2xs); color:var(--pv-stale);
  line-height:1.4; }