/* ============================================================
   shell.chrome.css · App-Shell navigation frame (เปลือกแอป)
   EXTENDS the approved Atlas language (tokens.css + components.css).
   Adds ONLY the frame: header chrome, primary nav (sidebar desktop /
   bottom-bar mobile), surface tabs, workbench stubs, the two doors,
   and the panel-on-cell pattern. Zero-dependency, greyscale-safe.
   Nothing here re-mockups a surface — surfaces are frame + stub.
   ============================================================ */

/* ---- density dial (one language, two tempos — not two skins) ----
   calm  = grower / public (bigger tap, more air)
   dense = ล้ง / exporter / admin (desk tempo) */
[data-density="calm"]  { --nav-fs:var(--fs-md); --rail-w:240px; --row-pad:.7rem .8rem; }
[data-density="dense"] { --nav-fs:var(--fs-sm); --rail-w:232px; --row-pad:.5rem .7rem; }

/* ============================================================
   SHELL FRAME
   ============================================================ */
.shell{ height:100vh; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); }

/* ---- header chrome ---- */
.shell-top{
  display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4);
  background:var(--surface); border-bottom:1px solid var(--line); z-index:40; flex:0 0 auto;
}
.shell-top .brand{ flex:0 0 auto; }
.shell-top .brand .wm b{ font-size:1.12rem; }
.surfacetag{
  display:inline-flex; align-items:center; gap:.45rem; margin-left:var(--s3);
  padding:.28rem .7rem; border-radius:var(--r-pill); background:var(--surface2);
  border:1px solid var(--line2); color:var(--ink2); font-size:var(--fs-sm); font-weight:var(--fw-semi); white-space:nowrap;
}
.surfacetag .ic{ width:15px; height:15px; color:var(--brand2); display:inline-flex; }
.surfacetag .ic svg{ width:100%; height:100%; display:block; }
.shell-top .grow{ flex:1; }

/* segmented controls (lang / theme) — match supply.html .seg */
.seg{ display:inline-flex; border:1px solid var(--line2); border-radius:var(--r-pill); overflow:hidden; background:var(--surface); }
.seg button{ 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; }
.seg button[aria-pressed="true"]{ background:var(--brand-soft); color:var(--brand-ink); font-weight:var(--fw-bold); }
/* header segs must never shrink/clip (e.g. "ไทย"→"ไท" on mobile) */
.shell-top .seg{ flex:0 0 auto; }

/* header control buttons: language dropdown + single theme-toggle icon.
   Compact + fixed-width so the who-chip (identity) keeps its space, and
   adding more languages just grows the dropdown list — not the header. */
.hmenu{ position:relative; flex:0 0 auto; }
.hbtn{ display:inline-flex; align-items:center; gap:.3rem; flex:0 0 auto; white-space:nowrap;
  border:1px solid var(--line2); background:var(--surface); color:var(--ink2); cursor:pointer;
  border-radius:var(--r-pill); padding:.36rem .62rem; font:inherit; font-size:var(--fs-xs); line-height:1; }
.hbtn:hover{ border-color:var(--muted); }
.hbtn:focus-visible{ outline:2px solid var(--ring); outline-offset:1px; }
.hbtn.icon{ padding:.36rem; width:34px; justify-content:center; font-size:1rem; }
.hbtn .caret{ font-size:.7em; color:var(--muted); }
/* notification bell + badge treatment lives in noti.components.css (surface A) */
.hpop{ position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:128px;
  background:var(--surface); border:1px solid var(--line2); border-radius:var(--r);
  box-shadow:var(--sh-md); padding:4px; display:flex; flex-direction:column; }
.hpop[hidden]{ display:none; }
.hopt{ text-align:left; border:0; background:transparent; cursor:pointer; font:inherit;
  font-size:var(--fs-sm); color:var(--ink); padding:.5rem .6rem; border-radius:var(--r-sm); }
.hopt:hover{ background:var(--surface2); }
.hopt.on{ color:var(--brand-ink); font-weight:var(--fw-bold); background:var(--brand-soft); }
.hscrim{ position:fixed; inset:0; z-index:55; }
/* header login button: never shrink/clip; on phones show just "LINE" */
.shell-top .line-cta{ flex:0 0 auto; }
@media (max-width:560px){
  .shell-top .line-cta .ll{ display:none; }          /* "LINE · เข้าสู่ระบบ" → "LINE" */
  .shell-top .brand .wm span{ display:none; }        /* drop the brand subtitle to free width */
}

/* profile / login cluster */
.who-chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.28rem .3rem .28rem .72rem;
  border:1px solid var(--line2); border-radius:var(--r-pill); background:var(--surface); font-size:var(--fs-sm); color:var(--ink2); }
.who-chip .meta{ display:flex; flex-direction:column; line-height:1.15; white-space:nowrap; }
.who-chip .meta .nme{ font-weight:var(--fw-semi); font-size:var(--fs-sm); }
.who-chip .av{ width:28px; height:28px; border-radius:50%; flex:0 0 28px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-ink); font-weight:var(--fw-bold); font-size:.8rem; }
.who-chip .role{ font-size:var(--fs-2xs); color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:720px){ .who-chip .meta{ display:none; } .who-chip{ padding:.28rem; } }

/* ============================================================
   SHELL BODY = rail | content
   ============================================================ */
.shell-body{ flex:1; display:flex; min-height:0; }

/* ---- primary nav · SIDEBAR (desktop) ---- */
.rail{
  flex:0 0 var(--rail-w); width:var(--rail-w); background:var(--surface);
  border-right:1px solid var(--line); display:flex; flex-direction:column;
  padding:var(--s4) var(--s3); gap:var(--s1); overflow-y:auto;
}
.rail .navgroup-lbl{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); font-weight:var(--fw-bold); padding:.4rem .55rem; margin-top:var(--s2); }
.navitem{
  display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; cursor:pointer;
  border:1px solid transparent; background:transparent; color:var(--ink2); font:inherit;
  font-size:var(--nav-fs); font-weight:var(--fw-semi); padding:var(--row-pad); border-radius:var(--r-sm);
  transition:background .12s, color .12s, border-color .12s;
}
.navitem .ic{ width:20px; height:20px; flex:0 0 20px; color:var(--muted); display:inline-flex; }
.navitem .ic svg{ width:100%; height:100%; display:block; }
.navitem .lab{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.navitem .tag{ font-size:var(--fs-2xs); font-weight:var(--fw-bold); padding:.05rem .42rem; border-radius:var(--r-pill);
  background:var(--brand-soft); color:var(--brand-ink); }
.navitem .tag.new{ background:var(--pv-est-bg); color:var(--pv-est); border:1px solid var(--pv-est-ln); }
.navitem:hover{ background:var(--surface2); color:var(--ink); }
.navitem:hover .ic{ color:var(--ink2); }
.navitem[aria-current="page"]{ background:var(--brand-soft); color:var(--brand-ink); }
.navitem[aria-current="page"] .ic{ color:var(--brand2); }
/* Spine is nav #1 for EVERY role */
.navitem.spine .ic{ color:var(--brand2); }
.rail .spacer{ flex:1; }

/* admin console is walled off from customer surfaces */
.rail.admin .navgroup-lbl.wall{ color:var(--pv-private); }
.navitem.walled[aria-current="page"]{ background:var(--pv-private-bg); color:var(--pv-private); }
.navitem.walled[aria-current="page"] .ic{ color:var(--pv-private); }
.wallnote{ margin:var(--s2) .3rem 0; font-size:var(--fs-2xs); color:var(--muted); line-height:1.45;
  background:var(--pv-private-bg); border:1px solid var(--pv-private-ln); border-radius:var(--r-sm); padding:.5rem .6rem; }
.wallnote b{ color:var(--pv-private); }

/* rail footer: persona switch hint / profile mini */
.rail .railfoot{ border-top:1px solid var(--line); padding-top:var(--s3); margin-top:var(--s3); font-size:var(--fs-2xs); color:var(--muted); }

/* ---- primary nav · BOTTOM-BAR (mobile / LIFF) ---- */
.tabbar{ display:none; }

/* ---- content = stage | panel (reuses supply .main/.stage/.panel) ---- */
.content{ flex:1; display:flex; min-height:0; }
.content .stage{ background:radial-gradient(120% 90% at 50% -10%, var(--surface2), var(--bg)); }

/* ============================================================
   SURFACE: WORKBENCH STUB  (frame only — NOT a surface re-mockup)
   ============================================================ */
.wb{ flex:1; min-height:0; display:flex; flex-direction:column; overflow-y:auto; }
.wbhead{ padding:var(--s5) var(--s5) var(--s3); display:flex; align-items:flex-start; gap:var(--s4); flex-wrap:wrap; border-bottom:1px solid var(--line); }
.wbhead .wtitle{ flex:1; min-width:200px; }
.wbhead .eyebrow{ display:flex; align-items:center; gap:.4rem; }
.wbhead h1{ font-size:var(--fs-2xl); font-weight:var(--fw-x); letter-spacing:-.02em; line-height:1.05; margin:.2rem 0 .25rem; }
.wbhead .wsub{ color:var(--muted); font-size:var(--fs-sm); max-width:60ch; }
.wbtabs{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.wbtab{ border:1px solid var(--line2); background:var(--surface); color:var(--ink2); border-radius:var(--r-pill);
  padding:.4rem .9rem; font-size:var(--fs-sm); font-weight:var(--fw-semi); cursor:pointer; }
.wbtab[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }
.wbtab.tabnew{ border-style:dashed; color:var(--muted); }
.wbbody{ padding:var(--s5); display:flex; flex-direction:column; gap:var(--s4); }

/* generic stub block: striped placeholder + mono explainer of what ports here */
.stub{ border:1.5px dashed var(--line2); border-radius:var(--r-lg); background:
  repeating-linear-gradient(135deg, var(--surface2) 0 10px, transparent 10px 20px); }
.stub .si{ padding:var(--s5); display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; }
.stub .scap{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted); letter-spacing:.02em;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:.3rem .55rem; }
.stub h3{ margin:.2rem 0 0; font-size:var(--fs-lg); font-weight:var(--fw-bold); }
.stub p{ margin:0; color:var(--muted); font-size:var(--fs-sm); max-width:62ch; }
.stub .deferchip{ font-size:var(--fs-2xs); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.06em;
  color:var(--pv-est); background:var(--pv-est-bg); border:1px solid var(--pv-est-ln); border-radius:var(--r-pill); padding:.12rem .55rem; }

/* a small grid of "real-looking" cards inside a workbench (still stub data) */
.wbgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--s3); }
.wbcard{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:var(--s4); box-shadow:var(--sh-sm);
  display:flex; flex-direction:column; gap:.5rem; }
.wbcard .top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.wbcard .nm{ font-weight:var(--fw-bold); font-size:var(--fs-md); }
.wbcard .meta{ font-size:var(--fs-xs); color:var(--muted); }
.wbcard .figrow{ display:flex; align-items:baseline; gap:.4rem; }
.wbcard .fig{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1.35rem; font-weight:var(--fw-bold); }
.wbcard .unit{ font-size:var(--fs-xs); color:var(--muted); }
.wbcard .ftr{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.2rem; padding-top:.5rem; border-top:1px solid var(--line); }

/* a compact ledger/table look (ล้ง / exporter desk tempo) */
.ledger{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.ledger .lr{ display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:var(--s3); align-items:center;
  padding:.65rem var(--s4); border-top:1px solid var(--line); font-size:var(--fs-sm); }
.ledger .lr:first-child{ border-top:0; background:var(--surface2); font-size:var(--fs-2xs); text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); font-weight:var(--fw-bold); }
.ledger .lr .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.ledger .lr .nm{ font-weight:var(--fw-semi); }

/* ============================================================
   DOORS (entry points — same SPA, different default tier)
   ============================================================ */
/* public door banner — sits atop the Spine when logged out */
.publicbar{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  margin:var(--s4) var(--s5) 0; padding:.7rem .9rem; border-radius:var(--r-lg);
  background:var(--brand-soft); border:1px solid var(--brand); color:var(--brand-ink); }
.publicbar .ic{ font-size:1.1rem; }
.publicbar .txt{ flex:1; min-width:180px; font-size:var(--fs-sm); font-weight:var(--fw-semi); }
.publicbar .txt small{ display:block; font-weight:var(--fw-reg); color:var(--brand2); margin-top:1px; }

/* LINE-LIFF role-detect splash */
.liff{ flex:1; display:flex; align-items:center; justify-content:center; padding:var(--s6) var(--s4); }
.liffcard{ width:min(440px,100%); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-md); padding:var(--s6) var(--s5); text-align:center; }
.liffcard .lmk{ width:54px; height:54px; margin:0 auto var(--s3); }
.liffcard .lmk svg{ width:100%; height:100%; }
.liffcard .lhead{ display:inline-flex; align-items:center; gap:.5rem; font-weight:var(--fw-bold);
  background:#06c755; color:#fff; border-radius:var(--r-pill); padding:.25rem .7rem; font-size:var(--fs-xs); margin-bottom:var(--s4); }
.liffcard h2{ font-size:var(--fs-xl); font-weight:var(--fw-x); margin:0 0 .3rem; letter-spacing:-.01em; }
.liffcard .lsub{ color:var(--muted); font-size:var(--fs-sm); margin:0 0 var(--s5); }
.detectrow{ display:flex; align-items:center; gap:.6rem; justify-content:center; font-size:var(--fs-sm); color:var(--ink2);
  background:var(--surface2); border:1px solid var(--line); border-radius:var(--r-pill); padding:.45rem .8rem; margin-bottom:var(--s4); }
.detectrow .pulse{ width:9px; height:9px; border-radius:50%; background:var(--pv-verified); box-shadow:0 0 0 0 color-mix(in srgb,var(--pv-verified) 60%,transparent); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--pv-verified) 55%,transparent);} 70%{ box-shadow:0 0 0 8px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }
@media (prefers-reduced-motion:reduce){ .detectrow .pulse{ animation:none; } }
.rolepick{ display:grid; gap:var(--s2); }
.roleopt{ display:flex; align-items:center; gap:.8rem; text-align:left; cursor:pointer; font:inherit;
  border:1px solid var(--line2); background:var(--surface); border-radius:var(--r); padding:.7rem .8rem; transition:border-color .12s, background .12s; }
.roleopt:hover{ border-color:var(--brand); background:var(--surface2); }
.roleopt .rav{ width:38px; height:38px; border-radius:10px; flex:0 0 38px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-ink); font-weight:var(--fw-bold); }
.roleopt .rmeta{ flex:1; min-width:0; }
.roleopt .rmeta b{ display:block; font-size:var(--fs-md); }
.roleopt .rmeta span{ font-size:var(--fs-xs); color:var(--muted); }
.roleopt .rarrow{ color:var(--muted); }

/* ============================================================
   PANEL-ON-CELL  (opens OVER/BESIDE the map — never a new route)
   reuses supply .panel/.detail; adds the anchor + lens tabs
   ============================================================ */
.panel{ position:relative; }
.panel .panelclose{ position:absolute; top:var(--s3); right:var(--s3); z-index:3;
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line2); background:var(--surface);
  color:var(--muted); cursor:pointer; display:grid; place-items:center; font-size:1rem; }
.panel .panelclose:hover{ background:var(--surface2); color:var(--ink); }
.oncell{ display:inline-flex; align-items:center; gap:.4rem; font-size:var(--fs-2xs); font-weight:var(--fw-bold);
  text-transform:uppercase; letter-spacing:.07em; color:var(--brand2); background:var(--brand-soft);
  border-radius:var(--r-pill); padding:.18rem .6rem; margin-bottom:var(--s3); }
.oncell .dotpin{ width:8px; height:8px; border-radius:50% 50% 50% 0; transform:rotate(45deg); background:var(--brand); }
/* lens tabs (ราคา / harvest / NDVI / order) — all panels on ONE cell */
.lenstabs{ display:flex; gap:.3rem; margin:var(--s3) 0 var(--s4); border-bottom:1px solid var(--line); }
.lenstab{ border:0; background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-weight:var(--fw-semi);
  font-size:var(--fs-sm); padding:.4rem .55rem; border-bottom:2px solid transparent; margin-bottom:-1px; }
.lenstab[aria-pressed="true"]{ color:var(--ink); border-bottom-color:var(--brand); }

/* "panel floats over the map" affordance on desktop — a hairline seam + lift */
@media (min-width:881px){
  .content.haspanel .panel{ box-shadow:-14px 0 32px -22px rgba(60,44,18,.5); }
}

/* ============================================================
   RESPONSIVE — desktop sidebar ↔ mobile/LIFF bottom-bar
   ============================================================ */
@media (max-width:880px){
  .rail{ display:none; }
  .shell-body{ flex-direction:column; }
  /* column-stack the map + on-cell panel, and SCROLL — else .stage{flex:1}
     (inherited from supply.components) eats the column and the panel gets pushed
     below an overflow:hidden box and vanishes on mobile. */
  .content{ flex-direction:column; flex:1; min-height:0; overflow-y:auto; padding-bottom:64px; }
  .content .stage{ flex:none; }
  .content .panel{ flex:none; width:auto; border-left:0; border-top:1px solid var(--line); max-height:none; }
  .content .mapwrap{ min-height:44vh; }
  .surfacetag{ display:none; }

  /* bottom-bar nav */
  .tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--surface); border-top:1px solid var(--line); padding:.25rem .3rem calc(.25rem + env(safe-area-inset-bottom));
    box-shadow:0 -6px 18px rgba(20,24,18,.06); }
  .tabbtn{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    border:0; background:transparent; color:var(--muted); cursor:pointer; font:inherit; min-height:54px; padding:.3rem .2rem; border-radius:var(--r-sm); }
  .tabbtn .ic{ width:23px; height:23px; }
  .tabbtn .ic svg{ width:100%; height:100%; display:block; }
  .tabbtn .tl{ font-size:var(--fs-2xs); font-weight:var(--fw-semi); }
  .tabbtn[aria-current="page"]{ color:var(--brand2); }
  .tabbtn .tag{ position:absolute; transform:translate(14px,-10px); font-size:8px; background:var(--pv-est);
    color:#fff; border-radius:var(--r-pill); padding:0 4px; font-weight:var(--fw-bold); }
}
@media (pointer:coarse){
  .navitem,.btn,.rt,.wbtab,.roleopt{ min-height:44px; }
  /* lang/theme seg buttons need a real tap target too (dark-mode toggle was too small) */
  .seg button{ min-height:40px; padding-left:.8rem; padding-right:.8rem; }
  .hbtn,.hopt{ min-height:40px; }
  .hbtn.icon{ width:40px; }
}

/* prototype studio strip already styled in components.css (.studio) — keep */