@import url("fonts.css");

/* ============================================================================
   Chomkar — production design system. Khmer-first (Kantumruy Pro) + Inter Latin,
   self-hosted/offline. ONE token table, one enforced type scale, mobile-first
   30rem canvas. Plain CSS, zero network.
   ========================================================================== */
:root{
  /* surfaces & ink */
  --bg:#f3f6f2; --surface:#ffffff; --surface-2:#f7faf6;
  --ink:#13231a; --ink-2:#3d4d44; --muted:#5b6a61;          /* muted darkened for WCAG AA on white (>=4.5:1) */
  /* brand & semantic colour. RULE: green=brand + confirmed/ready ONLY; amber=pending/price-not-agreed; never green for raw counts */
  --accent:#1f7a4d; --accent-d:#176040; --accent-soft:#e7f1ea; --accent-tint:#f1f8f3;
  --confirm:#1f7a4d;                                          /* = success; "go / confirmed" state */
  --line:#e7ece6; --line-2:#eff3ee;
  --success:#1f7a4d; --success-soft:#e7f1ea;  /* confirmed/ready = GREEN always, independent of per-portal --accent */
  --warn:#b4661f; --warn-soft:#fbf0e2; --warn-ink:#8a4a15; /* warn-ink = AA on warn-soft/white */
  --error:#bf3b30; --error-soft:#fbe9e6;
  --locked:#6a786f; --available:#1f7a4d; --pending:#b4661f;
  /* radius ladder */
  --r-lg:18px; --r:14px; --r-md:12px; --r-sm:10px; --r-xs:6px;
  /* elevation ladder: page(none) -> card -> raised -> modal */
  --sh-1:0 1px 2px rgba(18,38,28,.05),0 1px 3px rgba(18,38,28,.04);
  --sh-2:0 6px 22px rgba(18,38,28,.09);
  --sh-card:0 1px 2px rgba(18,38,28,.05),0 8px 24px rgba(18,38,28,.05);
  --sh-raised:0 12px 30px rgba(18,38,28,.11);
  --sh-emboss:0 8px 20px rgba(18,38,28,.18);
  /* identity avatar size (one chip across topbar / operator-match / buyer-review) */
  --av:40px;
  /* fonts. --en carries a Khmer fallback so mixed "Latin · ខ្មែរ" tags never tofu */
  --font:"Kantumruy Pro","Inter",system-ui,-apple-system,"Segoe UI","Khmer OS",sans-serif;
  --en-font:"Inter","Kantumruy Pro",ui-sans-serif,sans-serif;
  --mono:"Inter",ui-monospace,"SF Mono",Menlo,monospace;
  /* type scale (px). Khmer headings keep line-height >=1.45 so diacritics never clip */
  --t-display:30px; --t-h1:24px; --t-h2:20px; --t-h3:16px;
  --t-title:15.5px; --t-body:15px; --t-label:13px; --t-cap:12.5px; --t-micro:11.5px;
}
/* ---- per-persona accent themes (chrome only; brand green + semantic green are protected).
   --accent is the button-bg with white text, so each is the AA-passing DARK shade
   (white-on-accent >=4.5:1: farmer 5.32 / operator 7.42 / buyer 5.33). The brighter
   persona hues (#2196a6 teal, #dca233 gold) are used for icons/soft-bg only.
   Set via document.body.dataset.portal on login + portal screens; cleared on splash/home. */
body[data-portal="farmer"]{ --accent:#1f7a4d; --accent-d:#135e3a; --accent-soft:#e3efe7; --accent-tint:#f1f8f3; }
body[data-portal="op"]{     --accent:#125e69; --accent-d:#0d4a53; --accent-soft:#e0f2f4; --accent-tint:#eef8f9; }
body[data-portal="buyer"]{  --accent:#946012; --accent-d:#73490a; --accent-soft:#fbf0d9; --accent-tint:#fdf8ee; }

*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:var(--font);color:var(--ink);
  font-size:var(--t-body);line-height:1.72;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:
    radial-gradient(820px 460px at 102% -4%, #e3efe7 0%, transparent 56%),
    radial-gradient(680px 480px at -12% 10%, #edf3ea 0%, transparent 52%),
    var(--bg);}
/* Khmer needs vertical room for sub/superscripts — never clip diacritics */
h1,h2,h3{line-height:1.5;margin:0;font-weight:700;letter-spacing:-.01em;}
p{margin:0;}
button{font-family:inherit;}

/* ---- enforced type scale (use classes; no inline font-sizes) ---- */
.t-display{font-size:var(--t-display);line-height:1.25;font-weight:800;letter-spacing:-.015em;}
.t-h1{font-size:var(--t-h1);line-height:1.35;font-weight:800;letter-spacing:-.01em;}
.t-h2{font-size:var(--t-h2);line-height:1.5;font-weight:700;}
.t-h3{font-size:var(--t-h3);line-height:1.5;font-weight:700;}
.t-title{font-size:var(--t-title);line-height:1.5;font-weight:700;}
.t-label{font-size:var(--t-label);line-height:1.5;font-weight:600;}
.t-cap{font-size:var(--t-cap);line-height:1.4;font-weight:500;}

#app{max-width:30rem;min-height:100dvh;margin:0 auto;background:transparent;
  display:flex;flex-direction:column;position:relative;box-shadow:0 0 60px rgba(18,38,28,.05);}
.screen{flex:1;padding:18px 20px 132px;animation:fade .3s ease both;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* icons */
.ic{display:inline-block;vertical-align:-.18em;flex:none;}
.ic.spin{animation:spin .9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* secondary English — subtle, never competes with Khmer */
.en{font-family:var(--en-font);color:var(--muted);font-weight:500;}
.sub{font-family:var(--en-font);color:var(--muted);font-size:var(--t-cap);font-weight:500;letter-spacing:.01em;line-height:1.4;display:block;margin-top:1px;}
.muted{color:var(--muted);} .small{font-size:var(--t-label);} .center{text-align:center;}
.mono{font-family:var(--mono);font-feature-settings:"tnum";}

/* top bar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;
  padding:13px 14px;min-height:58px;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);}
.topbar .back{width:44px;height:44px;border:0;background:none;color:var(--ink-2);
  display:grid;place-items:center;border-radius:var(--r-sm);cursor:pointer;}
.topbar .back:hover{background:var(--surface-2);}
.topbar .title{flex:1;min-width:0;}
.topbar .title b{font-size:var(--t-h3);font-weight:700;display:block;}
.topbar .avatar{width:var(--av);height:var(--av);border-radius:50%;background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:15px;flex:none;}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  border:0;border-radius:var(--r-sm);background:var(--accent);color:#fff;font-weight:700;
  font-size:15.5px;padding:0 18px;height:54px;cursor:pointer;line-height:1.2;
  box-shadow:0 1px 0 rgba(0,0,0,.04);transition:transform .07s,background .15s,box-shadow .15s;}
.btn:hover{background:var(--accent-d);}
.btn:active{transform:scale(.985);}
.btn:disabled{background:var(--surface-2);color:var(--muted);border:1px solid var(--line);cursor:not-allowed;box-shadow:none;}
.btn.secondary{background:var(--surface);color:var(--accent);border:1.5px solid var(--accent-soft);box-shadow:var(--sh-1);}
.btn.secondary:hover{background:var(--accent-tint);border-color:var(--accent);}
.btn.ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--line);box-shadow:var(--sh-1);}
.btn.danger{background:var(--error);} .btn.danger:hover{filter:brightness(.95);}
.btn.sm{height:44px;font-size:14px;width:auto;padding:0 14px;border-radius:var(--r-sm);}
.btn.md{height:48px;font-size:14px;width:auto;padding:0 16px;border-radius:var(--r-sm);}
.dock{position:sticky;bottom:0;padding:14px 20px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,var(--bg) 26%);}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;box-shadow:var(--sh-card);}
.card+.card{margin-top:16px;}
.card.done{opacity:.72;box-shadow:var(--sh-1);}      /* completed operator step, de-emphasised */
.section{font-size:var(--t-label);font-weight:700;color:var(--ink-2);margin:26px 4px 12px;
  letter-spacing:.01em;display:flex;align-items:baseline;gap:8px;}
.section .en{font-weight:500;font-size:var(--t-micro);}

/* key-value */
.kv{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-2);}
.kv:last-child{border-bottom:0;}
.kv .k{color:var(--muted);font-size:14px;}
.kv .v{font-weight:600;text-align:right;font-size:14px;}
.kv .v.warn{color:var(--warn-ink);}
.kv .v.strong{font-weight:800;color:var(--accent);}    /* the counted supply number */

/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  padding:6px 11px 6px 9px;border-radius:999px;line-height:1.25;white-space:nowrap;}
.badge .ic{margin-top:-1px;}
.badge.locked{background:#eef1ee;color:var(--locked);}
.badge.available{background:var(--success-soft);color:var(--success);}
.badge.pending{background:var(--warn-soft);color:var(--warn-ink);}
.badge.complete{background:var(--success-soft);color:var(--success);}
.badge.rejected{background:var(--error-soft);color:var(--error);}

/* legacy home tiles (kept for compatibility; home now uses .portal below) */
.brand{padding:30px 0 22px;}
.brand .logo{width:62px;height:62px;border-radius:var(--r-lg);background:linear-gradient(150deg,var(--accent),var(--accent-d));
  color:#fff;display:grid;place-items:center;box-shadow:var(--sh-emboss);}
.brand .logo-img{width:64px;height:64px;border-radius:var(--r-lg);display:block;box-shadow:var(--sh-emboss);}
.brand h1{font-size:var(--t-display);margin:18px 0 0;display:flex;align-items:baseline;gap:10px;}
.brand h1 .en{font-size:var(--t-h3);font-weight:600;}
.brand .tag{color:var(--ink-2);font-size:var(--t-h3);margin-top:8px;}
.brand .tag .sub{font-size:var(--t-label);margin-top:2px;}

.role{display:flex;gap:14px;align-items:center;padding:16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);cursor:pointer;width:100%;text-align:left;
  box-shadow:var(--sh-1);transition:border-color .15s,box-shadow .15s,transform .07s;}
.role:hover{border-color:var(--accent-soft);box-shadow:var(--sh-2);}
.role:active{transform:scale(.99);}
.role .ic-box{width:48px;height:48px;border-radius:var(--r);background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;flex:none;}
.role .txt{flex:1;min-width:0;}
.role .txt b{font-size:var(--t-h3);display:block;}
.role .txt .sub{font-size:var(--t-cap);}
.role .go{color:var(--muted);flex:none;}

.feat{display:flex;gap:13px;align-items:flex-start;padding:11px 0;}
.feat .ic-box{width:44px;height:44px;border-radius:var(--r);background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;flex:none;}
.feat .ft{font-size:14px;line-height:1.55;padding-top:3px;}
.feat .ft .sub{margin-top:2px;}

/* progress meter */
.meter{height:9px;background:#e8ece8;border-radius:999px;overflow:hidden;}
.meter>i{display:block;height:100%;background:linear-gradient(90deg,var(--success),#2c9a64);
  border-radius:999px;transition:width .55s cubic-bezier(.4,0,.2,1);}

/* module cards (state rail) */
.mod{display:flex;gap:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1);cursor:pointer;
  transition:box-shadow .15s,transform .07s,background .12s;}
.mod:not(.locked):hover{box-shadow:var(--sh-2);}
.mod:not(.locked):active{transform:scale(.995);background:var(--surface-2);}
.mod.locked{opacity:.7;cursor:default;box-shadow:none;}
/* the single next action — the ONE module the farmer should tap — stands out */
.mod.available{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft),var(--sh-2);}
.mod.available h3{font-weight:800;}
.mod .rail{width:5px;flex:none;}
.mod.available .rail{width:6px;}
.mod .rail.locked{background:var(--locked);} .mod .rail.available{background:var(--available);}
.mod .rail.pending{background:var(--pending);} .mod .rail.complete{background:var(--success);}
.mod .rail.rejected{background:var(--error);}
.mod .body{flex:1;padding:15px 14px 15px 15px;min-width:0;}
.mod .row1{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;}
.mod .ph{font-size:12px;color:var(--muted);font-weight:600;display:inline-flex;align-items:center;gap:5px;min-width:0;}
.mod .ph b{color:var(--ink-2);}
.mod h3{font-size:var(--t-title);margin:0 0 3px;}
.mod .sum{font-size:var(--t-label);color:var(--muted);margin:0;line-height:1.5;}
.mod .meta{display:flex;gap:14px;margin-top:9px;font-size:var(--t-cap);color:var(--muted);}
.mod .meta span{display:inline-flex;align-items:center;gap:5px;}
.mod .gate{margin-top:9px;display:inline-flex;gap:6px;align-items:center;background:var(--surface-2);
  padding:7px 11px;border-radius:var(--r-sm);font-size:var(--t-cap);color:var(--muted);}
.mod .chev{align-self:center;color:#c4cdc6;padding:0 12px 0 2px;flex:none;}

/* banners */
.banner{border-radius:var(--r-md);padding:12px 14px;font-size:var(--t-label);line-height:1.55;display:flex;gap:10px;}
.banner .ic{margin-top:2px;}
.banner.info{background:var(--accent-tint);border:1px solid var(--accent-soft);color:var(--ink-2);}
.banner.warn{background:var(--warn-soft);border:1px solid #f0dcc0;color:#7a4a1c;}
.banner b{color:inherit;}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:7px 10px;font-size:var(--t-cap);color:var(--ink-2);}
.chip .ic{color:var(--muted);}

/* video */
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(140deg,var(--accent) 0%,var(--accent-d) 70%,#0f4a2e 100%);
  display:grid;place-items:center;box-shadow:var(--sh-1);}
.video::after{content:"";position:absolute;inset:0;opacity:.16;
  background-image:radial-gradient(circle at 22% 24%,#fff 1px,transparent 1px);background-size:20px 20px;}
.video .play{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.96);border:0;cursor:pointer;
  color:var(--accent);display:grid;place-items:center;z-index:1;box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .1s;}
.video .play:hover{transform:scale(1.04);}
.video .play:active{transform:scale(.96);}
.video .tag{position:absolute;left:12px;top:12px;z-index:1;display:inline-flex;align-items:center;gap:5px;
  background:rgba(0,0,0,.3);color:#fff;font-size:12px;padding:5px 9px;border-radius:8px;backdrop-filter:blur(4px);}
.video .cap{position:absolute;inset:auto 0 0 0;z-index:1;padding:14px 14px 12px;color:#fff;font-size:var(--t-label);font-weight:600;
  background:linear-gradient(transparent,rgba(0,0,0,.6));display:flex;justify-content:space-between;gap:8px;align-items:flex-end;}
.video .cap .dur{font-family:var(--mono);font-size:12px;background:rgba(0,0,0,.35);padding:2px 7px;border-radius:6px;flex:none;}

/* proof states */
.proof{border-radius:var(--r);padding:18px;border:1px solid var(--line);background:var(--surface);}
.proof.busy{background:var(--warn-soft);border-color:#f0dcc0;}
.proof.complete{background:var(--accent-tint);border-color:var(--accent-soft);}
.proof.rejected{background:var(--error-soft);border-color:#f1ccc6;}
.proof .head{display:flex;align-items:center;gap:9px;font-weight:700;font-size:var(--t-title);}
.proof.complete .head{color:var(--success);} .proof.rejected .head{color:var(--error);} .proof.busy .head{color:var(--pending);}
.checkrow{display:flex;align-items:center;gap:9px;font-size:14px;padding:6px 0;color:var(--ink);font-weight:600;}
.checkrow .ic{color:var(--success);}
.linklike{display:block;width:100%;min-height:44px;background:none;border:0;color:var(--muted);text-decoration:underline;
  text-underline-offset:4px;cursor:pointer;font-family:inherit;font-size:12px;padding:6px;}

/* passport */
.passport{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-2);}
.pp-head{background:linear-gradient(135deg,#1f7a4d,#176040);color:#fff;padding:18px 20px;  /* passport = brand artifact: stays brand green */
  display:flex;align-items:center;gap:12px;}
.pp-head .tier b{font-size:var(--t-title);display:block;} .pp-head .tier .sub{color:rgba(255,255,255,.85);}
.pp-body{background:var(--surface);padding:20px;}
.tier-banner{display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,#1f7a4d,#176040);
  color:#fff;padding:18px 20px;}
.tier-banner b{font-size:var(--t-h3);display:block;} .tier-banner .sub{color:rgba(255,255,255,.88);}

/* QR (real SVG render injected by app.js) */
.qr{width:128px;height:128px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:9px;}
.qr svg{display:block;width:100%;height:100%;}

/* evidence trail */
.ev{display:flex;gap:12px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-md);padding:13px;}
.ev .num{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--success);
  display:grid;place-items:center;flex:none;}
.ev .et b{font-size:14px;}
.ev .et .ph{font-size:var(--t-cap);color:var(--ink-2);font-weight:600;}
.ev .chips .chip:first-child{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft);} /* media-type chip colour-coded */

/* progressive disclosure — native <details>, zero JS, works over file:// */
.disclose{border:0;}
.disclose>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;}
.disclose>summary::-webkit-details-marker{display:none;}
.disclose>summary .chev{transition:transform .15s;color:var(--muted);flex:none;}
.disclose[open]>summary .chev{transform:rotate(90deg);}
.disclose-inline>summary{list-style:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:5px;color:var(--muted);}
.disclose-inline>summary::-webkit-details-marker{display:none;}

/* operator stepper */
.steps{display:flex;gap:6px;margin:14px 0 4px;}
.steps>i{flex:1;height:4px;border-radius:99px;background:#e3e9e3;transition:background .3s;}
.steps>i.on{background:var(--accent);}
.steplab{font-size:var(--t-micro);font-weight:800;color:var(--accent);letter-spacing:.04em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;}
.field{width:100%;font-family:inherit;font-size:16px;padding:13px 14px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);}
.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.field:disabled{background:var(--surface-2);color:var(--muted);}
.field.needsfix{border-color:var(--warn);box-shadow:0 0 0 3px var(--warn-soft);}
.lbl{display:block;font-size:var(--t-cap);color:var(--muted);margin:0 0 6px;font-weight:600;}
.row{display:flex;gap:10px;align-items:flex-end;}

/* seam match row */
.match{display:flex;gap:11px;align-items:center;padding:13px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);box-shadow:var(--sh-1);transition:border-color .15s,box-shadow .15s;}
/* the supply-relevant EXCEPTION (pending / self-declared, NOT counted) is the standout */
.match:has(.badge.pending){border-color:var(--warn);box-shadow:0 0 0 1px var(--warn-soft) inset;}
.match .av{width:var(--av);height:var(--av);border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:700;flex:none;}
.match .info{flex:1;min-width:0;}
.match .info .nm{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.match .info .nm b{font-size:14.5px;}
.match .info .det{font-size:var(--t-cap);color:var(--muted);margin-top:2px;}
.tierpill{font-size:10.5px;font-weight:700;padding:4px 9px;line-height:1.35;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.tierpill.self{background:var(--warn-soft);color:var(--warn-ink);}
.seam-note{font-size:var(--t-cap);color:var(--muted);display:flex;gap:7px;align-items:flex-start;line-height:1.5;}
.seam-note .ic{color:var(--accent);margin-top:1px;}

/* ============================ HOME — hero + overlapping portal sheet ============================ */
.screen.home{padding:0 0 40px;}
.home-hero{position:relative;padding:38px 24px 66px;color:#fff;overflow:hidden;
  background:linear-gradient(157deg,#1f6e44 0%,#16562f 60%,#0f3d24 100%);
  border-radius:0 0 32px 32px;box-shadow:0 16px 36px rgba(15,61,36,.28);}
.home-hero::after{content:"";position:absolute;inset:0;opacity:.13;pointer-events:none;
  background-image:radial-gradient(circle at 16% 20%,#fff 1.5px,transparent 1.6px);background-size:27px 27px;}
.home-hero .logo-img{width:64px;height:64px;border-radius:var(--r-lg);position:relative;box-shadow:0 12px 26px rgba(0,0,0,.28);}
.home-hero h1{font-size:36px;margin:18px 0 0;position:relative;letter-spacing:-.01em;}
.home-hero h1 .en{font-size:18px;color:rgba(255,255,255,.88);font-weight:700;margin-left:9px;}   /* AA on green */
.home-hero .htag{font-size:15.5px;color:#fff;margin-top:9px;position:relative;line-height:1.62;}
.home-hero .htag .sub{display:block;color:rgba(255,255,255,.9);font-size:var(--t-cap);margin-top:2px;} /* AA on deepened green */

.portals{margin:-42px 18px 0;position:relative;z-index:3;display:flex;flex-direction:column;gap:13px;}
.portal{display:flex;align-items:center;gap:15px;padding:17px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-raised);cursor:pointer;width:100%;text-align:left;
  transition:transform .12s,box-shadow .16s,background .12s;}
.portal:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(18,38,28,.15);}
.portal:active{transform:scale(.985);background:var(--accent-tint);}
.portal .pic{width:54px;height:54px;border-radius:var(--r);display:grid;place-items:center;flex:none;color:#fff;box-shadow:var(--sh-emboss);}
.portal.farmer .pic{background:linear-gradient(150deg,#2fa069,#176040);}
.portal.op .pic{background:linear-gradient(150deg,#2196a6,#125e69);}
.portal.buyer .pic{background:linear-gradient(150deg,#dca233,#a4690f);}
.portal .pt{flex:1;min-width:0;}
.portal .pt b{font-size:17px;display:block;line-height:1.4;}
.portal .pt .sub{font-size:var(--t-cap);margin-top:1px;color:var(--muted);}
.portal .tagrole{display:inline-block;font-family:var(--en-font);font-size:10px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 7px;border-radius:var(--r-xs);margin-bottom:5px;}
.portal.farmer .tagrole{background:var(--accent-soft);color:var(--accent);}
.portal.op .tagrole{background:#e0f2f4;color:#125e69;}
.portal.buyer .tagrole{background:#fbf0d9;color:#9a6210;}
.portal .go{color:#c4cdc6;flex:none;}
.home .section,.home .card,.home .btn,.home .foot{margin-left:18px;margin-right:18px;}
.home .foot{text-align:center;color:var(--muted);font-size:var(--t-cap);margin-top:20px;}
.loopcard{margin:14px 18px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:6px 18px;box-shadow:var(--sh-card);}

/* buyer portal */
.statuschip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;font-size:var(--t-label);font-weight:700;}
.statuschip.ready{background:var(--success-soft);color:var(--success);}
.statuschip.work{background:var(--warn-soft);color:var(--warn-ink);}
.contrib{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-2);}
.contrib:last-child{border-bottom:0;}
.contrib .av{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700;flex:none;}
.vrec{font-size:var(--t-label);font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:4px;
  min-height:44px;padding:6px 4px;text-decoration:underline;text-underline-offset:3px;line-height:1.4;}
.vrec:active{color:var(--accent-d);}

/* ============================ farmer: callout · capture · VLM result ============================ */
.callout{display:flex;gap:12px;align-items:flex-start;background:var(--accent-tint);border:1px solid var(--accent-soft);
  border-radius:var(--r-md);padding:13px 15px;margin-top:14px;}
.callout>.ic{color:var(--accent);margin-top:2px;flex:none;}
.callout b{font-size:14.5px;}
.capframe{aspect-ratio:4/3;border:2px dashed var(--line);border-radius:var(--r);background:var(--surface-2);display:grid;place-items:center;}
.capframe .cf-mid{display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--muted);text-align:center;padding:18px;}
.capframe .cf-mid .ic{color:var(--locked);}
.capframe .cf-mid span{font-size:13px;max-width:16rem;line-height:1.5;}
.capthumb{width:100%;aspect-ratio:16/10;border-radius:var(--r);background:linear-gradient(135deg,#e7efe9,#d6e4da);
  display:grid;place-items:center;color:var(--accent);border:1px solid var(--accent-soft);}
.vlmnote{display:flex;gap:7px;align-items:flex-start;margin-top:12px;padding-top:11px;border-top:1px solid var(--line-2);
  font-size:12.5px;line-height:1.5;color:var(--muted);}
.vlmnote .ic{color:var(--ink-2);margin-top:1px;flex:none;}
.av-lg{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:700;font-size:20px;flex:none;}

/* ============================ buyer requirement wizard ============================ */
.cropgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.cropcard{display:flex;flex-direction:column;align-items:center;gap:5px;padding:15px 6px;border:1.5px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);cursor:pointer;text-align:center;min-height:44px;
  transition:border-color .12s,box-shadow .12s;font-family:inherit;}
.cropcard .ic{color:var(--muted);}
.cropcard b{font-size:13.5px;}
.cropcard .sub{font-size:11px;}
.cropcard.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft);}
.cropcard.on .ic{color:var(--accent);}
.qtystep{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.qbtn{width:54px;height:54px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--surface);
  color:var(--accent);display:grid;place-items:center;cursor:pointer;flex:none;}
.qbtn:active{transform:scale(.95);}
.qval{flex:1;text-align:center;}
.qval b{font-size:30px;font-weight:800;}
.qval span{color:var(--muted);margin-left:6px;}
.seg{display:flex;gap:5px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px;}
.seg button{flex:1;border:0;background:none;font-family:inherit;font-size:12.5px;font-weight:700;padding:9px 4px;
  border-radius:7px;cursor:pointer;color:var(--ink-2);min-height:44px;line-height:1.3;}
.seg button.on{background:var(--surface);color:var(--accent);box-shadow:var(--sh-1);}
.pricepick{display:flex;flex-direction:column;gap:9px;}
.pricepick button{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);background:var(--surface);
  border-radius:var(--r-md);padding:13px 15px;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);
  cursor:pointer;min-height:52px;text-align:left;}
.pricepick button .ic{color:var(--muted);flex:none;}
.pricepick button.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft);}
.pricepick button.on .ic{color:var(--accent);}
.wzdone{display:flex;align-items:center;gap:9px;width:100%;border:1px solid var(--accent-soft);background:var(--accent-tint);
  border-radius:var(--r-md);padding:11px 14px;margin-bottom:10px;cursor:pointer;font-family:inherit;text-align:left;min-height:48px;}
.wzdone .ic{color:var(--accent);flex:none;}
.wzdone .wl{font-size:12.5px;color:var(--muted);}
.wzdone b{font-size:14px;margin-left:2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wzdone .ed{margin-left:auto;font-size:12px;color:var(--accent);font-weight:700;flex:none;}
.planguard{display:flex;gap:9px;align-items:flex-start;background:var(--warn-soft);border:1px solid #f0dcc0;
  border-radius:var(--r-md);padding:12px 14px;font-size:13px;line-height:1.5;color:#7a4a1c;}
.planguard .ic{color:var(--warn);margin-top:2px;flex:none;}

/* ============================ Kasekor GAP engine (rule-based, not AI) ============================ */
.gapcard{margin-top:10px;border:1px solid var(--accent-soft);background:var(--accent-tint);border-radius:var(--r-lg);padding:16px;}
.gaphead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.gapname{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14.5px;color:var(--accent-d);letter-spacing:.01em;}
.gapname .ic{color:var(--accent);}
.gapchip{font-size:10.5px;font-weight:700;color:var(--accent);background:var(--surface);border:1px solid var(--accent-soft);
  border-radius:999px;padding:5px 10px;line-height:1.2;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.gapintro{font-size:13.5px;color:var(--ink-2);margin:10px 0 2px;font-weight:700;}
.gapintro .en{font-weight:500;}
.gapgroup{margin-top:14px;}
.gapgroup .lbl{margin-bottom:7px;font-weight:700;color:var(--ink-2);}
.gapgroup .lbl .en{font-weight:500;color:var(--muted);}
.optset{display:flex;flex-direction:column;gap:8px;}
.opt{display:flex;align-items:center;gap:10px;width:100%;border:1.5px solid var(--line);background:var(--surface);
  border-radius:var(--r-sm);padding:10px 13px;font-family:inherit;color:var(--ink);cursor:pointer;text-align:left;
  min-height:48px;transition:border-color .12s,box-shadow .12s,background .12s;}
.opt>.ic{color:var(--muted);flex:none;}
.opt>span{font-size:13.5px;font-weight:600;line-height:1.3;min-width:0;}
.opt>span .sub{margin-top:1px;}
.opt.on{border-color:var(--accent);background:#fff;box-shadow:0 0 0 1px var(--accent-soft);}
.opt.on>.ic{color:var(--accent);}
.opt:active{transform:scale(.995);}
.gapnote{display:flex;gap:7px;align-items:flex-start;margin-top:13px;font-size:11.5px;line-height:1.5;color:var(--muted);}
.gapnote .ic{color:var(--ink-2);margin-top:1px;flex:none;}
.gapcard>.btn{margin-top:14px;}

/* verdict card — humble + claim-safe; tone = colour only, never a guarantee */
.verdict{border-radius:var(--r-md);padding:14px;border:1px solid;margin-top:14px;}
.verdict .vrow{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15.5px;line-height:1.4;}
.verdict .vrow .en{font-weight:600;}
.verdict .vlabel{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin:11px 0 3px;opacity:.7;}
.verdict .vsub{font-size:13px;line-height:1.62;color:var(--ink-2);margin:0;}
.verdict .vsub.en2{font-size:11.5px;color:var(--muted);margin-top:3px;}
.verdict.ok{background:#fff;border-color:var(--accent-soft);}
.verdict.ok .vrow{color:var(--success);}
.verdict.warn{background:var(--warn-soft);border-color:#f0dcc0;}
.verdict.warn .vrow{color:var(--warn-ink);}
.verdict.risk{background:var(--error-soft);border-color:#f1ccc6;}
.verdict.risk .vrow{color:var(--error);}
.verdict.done{margin-top:10px;padding:13px 14px;}
.verdict.done .vsub{margin-top:8px;display:flex;gap:7px;align-items:flex-start;}
.verdict.done .vsub .ic{color:var(--success);margin-top:2px;flex:none;}

/* buyer-facing recorded GAP self-checks (verify page) */
.gapline{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);
  background:var(--surface-2);border-radius:var(--r-md);}
.gapline .gl-k{font-size:13px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;min-width:0;}
.gapline .gl-k .ic{color:var(--muted);flex:none;}
.gapline .gl-v{font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex:none;}
.gapline .gl-v.ok{color:var(--success);}
.gapline .gl-v.warn{color:var(--warn-ink);}
.gapline .gl-v.risk{color:var(--error);}

/* ============================ entry splash (language picker) ============================ */
.splash{min-height:100dvh;display:flex;flex-direction:column;color:#fff;
  padding:0 26px calc(38px + env(safe-area-inset-bottom));
  background:
    radial-gradient(880px 520px at 50% 22%, #1d6543 0%, transparent 58%),
    linear-gradient(168deg,#103f29 0%,#0a2c1d 52%,#06160e 100%);}
.splash-top{height:7vh;}
.splash-brand{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;}
.splash-mark{border-radius:27px;box-shadow:0 22px 48px rgba(0,0,0,.5);}
.splash-word{display:flex;flex-direction:column;align-items:center;gap:3px;margin:8px 0 2px;}
.splash-word .kh{font-size:42px;font-weight:800;color:#fff;letter-spacing:.005em;line-height:1.12;}
.splash-word .lat{font-family:var(--en-font);font-size:14px;font-weight:600;letter-spacing:.46em;text-indent:.46em;
  color:rgba(255,255,255,.72);text-transform:uppercase;}
.splash-tag{font-size:14.5px;color:rgba(255,255,255,.84);max-width:18rem;line-height:1.6;margin:0;}
.splash-tag.en{font-size:12.5px;color:rgba(255,255,255,.6);font-family:var(--en-font);margin-top:-3px;}
.splash-actions{display:flex;flex-direction:column;gap:13px;}
.splash-choose{text-align:center;font-size:12.5px;color:rgba(255,255,255,.66);margin:0 0 4px;font-weight:600;letter-spacing:.02em;}
.langbtn{height:58px;border-radius:16px;border:0;background:var(--accent);color:#fff;font-family:inherit;font-weight:800;
  font-size:17px;cursor:pointer;box-shadow:0 12px 28px rgba(15,61,36,.45);transition:transform .08s,background .15s;letter-spacing:.01em;}
.langbtn:hover{background:#258a57;}
.langbtn:active{transform:scale(.985);}
.langbtn.alt{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.28);box-shadow:none;}
.langbtn.alt:hover{background:rgba(255,255,255,.14);}

/* ============================ ABA-inspired: icon-hero · numbered steplist · bottom sheet ============================ */
.hero-ic{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:10px 0 2px;}
.hero-ic .disc{width:84px;height:84px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(31,122,77,.18);}
.hero-ic h2{font-size:var(--t-h2);margin:0;}
.hero-ic p{color:var(--muted);font-size:14px;max-width:20rem;line-height:1.6;margin:0;}

.steplist{display:flex;flex-direction:column;}
.steplist .sline{display:flex;gap:14px;align-items:flex-start;position:relative;padding-bottom:18px;}
.steplist .sline:last-child{padding-bottom:0;}
.steplist .snum{width:30px;height:30px;border-radius:50%;border:1.6px solid var(--accent);color:var(--accent);font-weight:800;
  font-size:13.5px;display:grid;place-items:center;flex:none;background:var(--surface);z-index:1;}
.steplist .sline:not(:last-child)::before{content:"";position:absolute;left:14.2px;top:31px;bottom:1px;width:1.6px;
  background:repeating-linear-gradient(var(--accent) 0 4px,transparent 4px 9px);opacity:.4;}
.steplist .stxt{padding-top:3px;font-size:14px;line-height:1.5;min-width:0;}
.steplist .stxt b{display:block;font-size:14.5px;font-weight:700;}
.steplist .stxt .sub{margin-top:1px;}

/* bottom sheet — appended to <body> by openSheet(); offline, accessible */
.sheet-back{position:fixed;inset:0;z-index:60;background:rgba(10,22,15,.5);backdrop-filter:blur(2px);
  display:flex;align-items:flex-end;justify-content:center;animation:fade .2s ease both;}
.sheet{width:100%;max-width:30rem;background:var(--surface);border-radius:22px 22px 0 0;
  padding:10px 22px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(18,38,28,.24);
  animation:sheetup .26s cubic-bezier(.4,0,.2,1) both;}
@keyframes sheetup{from{transform:translateY(100%);}to{transform:none;}}
.sheet .grip{width:38px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 16px;}
.sheet .sh-ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin-bottom:13px;}
.sheet .sh-ic.ok{background:var(--accent-soft);color:var(--accent);}
.sheet .sh-ic.warn{background:var(--warn-soft);color:var(--warn-ink);}
.sheet .sh-ic.risk{background:var(--error-soft);color:var(--error);}
.sheet h3{font-size:var(--t-h2);margin:0 0 7px;}
.sheet p{color:var(--ink-2);font-size:14px;line-height:1.62;margin:0 0 18px;}
.sheet .sh-actions{display:flex;gap:11px;}
.sheet .sh-actions .btn{width:auto;}
@media (prefers-reduced-motion:reduce){ .sheet{animation:none;} }

/* ============================ account hub · settings · faq · terms · help ============================ */
/* topbar menu button (right slot) + home language quick-toggle */
.topmenu{width:44px;height:44px;border:0;background:var(--surface-2);color:var(--ink-2);display:grid;place-items:center;
  border-radius:50%;cursor:pointer;flex:none;border:1px solid var(--line);transition:background .12s;}
.topmenu:hover{background:var(--accent-tint);color:var(--accent);}
.screen.home{position:relative;}
.home-top{position:absolute;top:0;right:0;z-index:6;padding:13px 15px;}
.langpill{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 15px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.30);color:#fff;font-family:inherit;font-weight:700;
  font-size:13px;letter-spacing:.01em;backdrop-filter:blur(4px);transition:background .12s;}
.langpill:hover{background:rgba(255,255,255,.26);}
.langpill .ic{opacity:.92;}

/* profile card */
.profile-card{display:flex;align-items:center;gap:15px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-card);}
.av-xl{width:60px;height:60px;border-radius:50%;background:linear-gradient(150deg,var(--accent),var(--accent-d));color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:24px;flex:none;box-shadow:var(--sh-emboss);}
.pc-id{min-width:0;}
.pc-id b{font-size:var(--t-h3);display:block;line-height:1.4;}
.pc-id .pc-role,.pc-id .pc-line{display:flex;align-items:center;gap:6px;font-size:var(--t-cap);color:var(--muted);margin-top:3px;}
.pc-id .pc-role{color:var(--accent);font-weight:700;}
.pc-id .pc-role .ic,.pc-id .pc-line .ic{flex:none;}

/* menu list (account hub rows) */
.menulist{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-card);}
.menurow{display:flex;align-items:center;gap:14px;width:100%;border:0;background:var(--surface);cursor:pointer;
  padding:16px 16px;font-family:inherit;text-align:left;min-height:60px;border-bottom:1px solid var(--line-2);transition:background .12s;}
.menulist .menurow:last-child{border-bottom:0;}
.menurow:hover{background:var(--surface-2);}
.menurow:active{background:var(--accent-tint);}
.menurow .mr-ic{width:40px;height:40px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;flex:none;}
.menurow .mr-l{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--ink);}
.menurow .mr-l b{display:block;font-size:15px;font-weight:700;}
.menurow .mr-l .mr-sub{display:block;font-size:var(--t-cap);font-weight:500;color:var(--muted);margin-top:1px;}
.menurow .mr-go{color:#c4cdc6;flex:none;}
.menurow.switch{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-card);}
.menurow.switch .mr-ic{background:var(--surface-2);color:var(--ink-2);}

/* settings rows + demo toggle */
.settingrow{display:flex;align-items:center;gap:13px;}
.settingrow .sr-ic{width:40px;height:40px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;flex:none;}
.settingrow .sr-l{flex:1;min-width:0;}
.settingrow .sr-l b{display:block;font-size:14.5px;}
.settingrow .sr-l .sr-sub{display:block;font-size:var(--t-cap);color:var(--muted);margin-top:1px;line-height:1.45;}
.toggle.demo{width:46px;height:27px;border-radius:99px;background:#dfe5df;position:relative;flex:none;border:1px solid var(--line);}
.toggle.demo i{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);}
/* taller language segmented control (settings) */
.seg.lang{padding:5px;}
.seg.lang button{min-height:50px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.seg.lang button .ic{opacity:.7;}
.seg.lang button.on .ic{opacity:1;color:var(--accent);}

/* FAQ accordion */
.faqlist{display:flex;flex-direction:column;gap:10px;}
.faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);overflow:hidden;}
.faq>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 16px;min-height:56px;}
.faq>summary::-webkit-details-marker{display:none;}
.faq>summary .q{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.45;}
.faq>summary .chev{color:var(--muted);flex:none;transition:transform .18s;}
.faq[open]>summary .chev{transform:rotate(180deg);}
.faq[open]>summary{border-bottom:1px solid var(--line-2);}
.faq>p{margin:0;padding:13px 16px 16px;font-size:14px;line-height:1.66;color:var(--ink-2);}

/* terms / boundaries cards */
.termlist{display:flex;flex-direction:column;gap:11px;}
.termcard{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:15px;box-shadow:var(--sh-1);}
.termcard .tc-ic{width:38px;height:38px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;flex:none;}
.termcard .tc-b{min-width:0;}
.termcard .tc-b b{font-size:14.5px;display:block;line-height:1.45;}
.termcard .tc-b p{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:4px 0 0;}

/* ============================ workspace: bottom tabs · lists · dashboards ============================ */
/* a screen has EITHER a sticky .dock OR a fixed .tabbar, never both */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;max-width:30rem;margin:0 auto;
  display:flex;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);}
.tabbar a{flex:1;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.005em;padding:8px 2px;
  transition:color .12s;}
.tabbar a.on{color:var(--accent);}
.tabbar a:active{background:var(--accent-tint);}
.tabbar a .ic{opacity:.9;}
.tabbar a.on .ic{opacity:1;}
.screen.has-tabs{padding-bottom:calc(74px + env(safe-area-inset-bottom));}

/* search + filter + sort + list meta */
.searchbar{position:relative;margin:2px 0 12px;}
.searchbar>.ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;}
.searchbar input{width:100%;font-family:inherit;font-size:15px;padding:13px 14px 13px 40px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);}
.searchbar input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.filterchips{display:flex;gap:8px;overflow-x:auto;padding:6px 6px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent);}
.filterchips::-webkit-scrollbar{display:none;}
.filterchips .chip{cursor:pointer;white-space:nowrap;flex:none;min-height:44px;}
.chip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:700;}
.listmeta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 12px;
  font-size:12.5px;color:var(--muted);}
.sortbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 13px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2);font-family:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;flex:none;}
.sortbtn:active{background:var(--surface-2);}
.sortbtn .ic{color:var(--muted);}

/* tappable list row (reuses .match shell) */
.listrow{cursor:pointer;text-decoration:none;color:inherit;width:100%;
  transition:box-shadow .15s,transform .07s,border-color .15s;}
.listrow:hover{box-shadow:var(--sh-2);border-color:var(--accent-soft);}
.listrow:active{transform:scale(.995);}
.listrow.hero{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft),var(--sh-2);}
.listrow .go{color:#c4cdc6;flex:none;}
.rowend{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none;align-self:center;}
.rowstack{display:flex;flex-direction:column;gap:11px;}

/* KPI / metric cards */
.kpigrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:15px;box-shadow:var(--sh-1);}
.kpi .kn{font-size:25px;font-weight:800;line-height:1.15;letter-spacing:-.01em;color:var(--ink);}
.kpi.ok .kn{color:var(--success);}
.kpi.warn .kn{color:var(--warn-ink);}
.kpi .kl{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.4;}
.kpi .knote{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.35;}

/* commercial-spine status pill (single claim-safe source) */
.spinepill{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;font-size:12px;
  font-weight:700;white-space:nowrap;line-height:1.25;}
.spinepill .ic{margin-top:-1px;}
.spinepill.planning{background:#eef1ee;color:var(--ink-2);}
.spinepill.sourcing{background:var(--warn-soft);color:var(--warn-ink);}
.spinepill.offer{background:var(--success-soft);color:var(--success);}
.spinepill.accepted{background:var(--success-soft);color:var(--success);}
.spinepill.delivered{background:#e6eef9;color:#33527a;}
.spinepill.paid{background:#eef1ee;color:var(--ink-2);}

/* commercial-spine timeline (detail pages) */
.spineline{display:flex;flex-direction:column;margin-top:4px;}
.spineline .sl{display:flex;gap:12px;align-items:flex-start;position:relative;padding-bottom:15px;}
.spineline .sl:last-child{padding-bottom:0;}
.spineline .dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);background:var(--surface);
  display:grid;place-items:center;flex:none;z-index:1;color:var(--muted);}
.spineline .sl:not(:last-child)::before{content:"";position:absolute;left:11px;top:24px;bottom:1px;width:2px;background:var(--line);}
.spineline .sl.done .dot,.spineline .sl.current .dot{border-color:var(--accent);}
.spineline .sl.done .dot{background:var(--accent);color:#fff;}
.spineline .sl.current .dot{color:var(--accent);}
.spineline .sl.done:not(:last-child)::before{background:var(--accent);}
.spineline .st{font-size:13px;line-height:1.4;padding-top:2px;color:var(--ink-2);}
.spineline .sl.current .st{font-weight:700;color:var(--ink);}
.spineline .sl.future .st{color:var(--muted);}

/* empty state */
.emptystate{text-align:center;padding:34px 16px;}
.emptystate .disc{width:64px;height:64px;border-radius:50%;background:var(--surface-2);color:var(--muted);
  display:grid;place-items:center;margin:0 auto 13px;}
.emptystate p{color:var(--muted);font-size:14px;margin:0 0 14px;line-height:1.55;}

/* dashboard alert rows (reuse .banner, made tappable) */
a.banner{text-decoration:none;color:inherit;cursor:pointer;align-items:center;}
a.banner:active{filter:brightness(.98);}
a.banner .go{margin-left:auto;color:var(--muted);flex:none;}

/* ============================ login (per-persona mock entry; themed via body[data-portal]) ============================ */
.loginbadge{display:flex;width:fit-content;align-items:center;gap:6px;margin:4px auto 0;padding:7px 14px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:700;}
.pwrow{position:relative;}
.pwrow .field{padding-right:50px;}
.pwtog{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;
  color:var(--muted);display:grid;place-items:center;cursor:pointer;border-radius:var(--r-sm);}
.pwtog:hover{color:var(--accent);}
/* farmer login: bigger, dignified inputs (≥44px, low-literacy friendly) */
body[data-portal="farmer"] .login .field{min-height:56px;font-size:17px;}

/* ============================ a11y · responsive ============================ */
:where(button,a,input,.role,.mod,.portal,.vrec,.play):focus-visible{outline:none;
  box-shadow:0 0 0 3px var(--accent-soft),0 0 0 5px var(--accent);border-radius:12px;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}
/* small phones (<=359px): no overflow, let the operator input row wrap */
@media (max-width:359px){
  .screen{padding:16px 16px 124px;}
  .home-hero h1{font-size:30px;}
  .row{flex-wrap:wrap;} .row>*{flex:1 1 100%;} #opConfirm{width:100%;}
  .kv{gap:10px;}
}
/* desktop: frame the phone canvas intentionally */
@media (min-width:520px){
  body{background:#e9eee7;}
  #app{border-left:1px solid var(--line);border-right:1px solid var(--line);}
}