/* 二期业务小程序 · 唯一的外壳（stage / phone / statusbar / topbar / scroll / bottom-nav / toast）
   为什么要有这个文件：以前**每个页面都自带一份外壳样式**（一期拷来的页面带一期那套、二期新页带 phase2 那套），
   结果手机框宽度、底部导航的内边距与栏数各页不同。本文件在每一页**最后**加载，强制统一成下面这一套。
   页面自己的业务样式放在前面，本文件只覆盖外壳，不动业务。 */

.stage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
/* 框外说明（页面说明／评审说明，不属于界面）**固定在视口右侧、脱离正常流**——
   这样手机框永远在窗口正中，不会因为"这一页有没有说明"而左右跑（Judy 2026-09-18：
   「只要右边有说明性文字的页面，就会出现页面往左移的情况，应该固定在居中位置」）。
   用 body aside.xxx 提高权重，压过各页自己写的 `.side` / `.side-note` 规则。 */
/* 位置：**紧贴手机框右侧**（不是贴窗口右边缘——那样在宽窗口里会跟手机框隔一大截空白）。
   手机框宽度＝min(390px, (100vh-48px)*390/844)，所以说明的 left ＝ 视口中心 ＋ 手机框半宽 ＋ 18px。 */
body aside.side,body aside.side-note{position:fixed;top:24px;right:auto;
  left:calc(50% + min(390px, calc((100vh - 48px) * 390 / 844)) / 2 + 18px);
  width:300px;max-height:calc(100vh - 48px);overflow:auto;z-index:6}
/* 窗口放不下（手机框半宽 + 300 + 边距 > 视口一半）就隐藏，避免压到手机框 */
@media(max-width:1100px){body aside.side,body aside.side-note{display:none}}
/* 手机框**贴顶**排（不上下居中）——否则页面里只要多一点内容，整块会被推到窗口下面，
   底部的导航就跑到视口外、点不到（B-26 看板实测手机框底部 996 > 窗口 900）。 */
body .stage{align-items:flex-start;justify-content:center}
/* 消息条（.toast）是**只显示、不接收点击**的元素——它默认空着也可能盖在底部导航上，
   把导航的点击吃掉（Judy 2026-09-18：「点了没反应」的真凶就是这个：Playwright 报
   `<div id="toast" class="toast"> intercepts pointer events`）。 */
body .toast{pointer-events:none}
/* 页面顶部的**演示开关条**（框外工具：#personaBar／#permBar）不占布局高度——
   它们在正常流里会合力把手机框推到视口下面，底部导航就跑出屏幕、点不到（B-26 实测手机框底部 992 > 窗口 900）。
   改成固定贴在左上角，手机框回到贴顶位置。 */
body #personaBar,body #permBar{position:fixed;left:8px;top:8px;right:auto;max-width:min(320px,calc(50% - 24px));
  margin:0;padding:8px 10px;font-size:11px;line-height:1.5;z-index:40;overflow:auto;max-height:calc(100vh - 16px)}
/* 手机框：**固定比例 390:844**（iPhone 12/13/14 那一档，也是本原型宽度的来源），按窗口等比缩放。
   宽度取三者最小：窗口宽的 100%、390px、以及"可用高度换算出来的宽度"——
   这样无论窗口多高多矮，框都保持同一比例，不会被拉长压扁。
   注意这里必须用 `.stage .phone` 这种**更具体**的写法——`common-ui.css` 里有一条
   `.stage .phone{width:min(100%,390px);max-width:390px;height:min(100%,844px)}`，
   31 个页面引了它（首页／采购／我的／订单详情…），只写 `.phone` 压不过它，
   所以会出现"首页 390、销售加工 430"这种一页一个宽度的情况。 */
.phone,.stage .phone,.page-shell .phone,.page .phone{position:relative;
  width:min(100%,390px,calc((100vh - 48px) * 390 / 844));max-width:390px;
  aspect-ratio:390 / 844;height:auto;max-height:none;overflow:hidden;
  display:flex;flex-direction:column;background:var(--page,#f2f8f5);
  border:1px solid #dce9e1;border-radius:24px;box-shadow:0 16px 48px rgba(28,93,66,.14)}

.statusbar{height:28px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;color:rgba(255,255,255,.88);font-size:11px;background:var(--green,#20bd7b)}

.topbar{flex:none;height:52px;display:flex;align-items:center;gap:9px;padding:0 14px;
  background:var(--surface,#fff);border-bottom:1px solid var(--line,#e4eee9)}
.topbar .back{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;color:var(--body,#445c54);font-size:19px;line-height:1}
.topbar .title{color:var(--ink,#172d28);font-size:16px;font-weight:600}
.topbar .topbar-title{flex:1;color:var(--ink,#172d28);font-size:16px;font-weight:600;text-align:left}
.topbar .state{margin-left:auto;font-size:12px;color:var(--muted,#7c918a)}

.scroll{flex:1;min-height:0;overflow:auto;padding:12px 14px 96px}

.bottom-nav{position:absolute;left:0;bottom:0;z-index:10;width:100%;display:grid;
  grid-template-columns:repeat(5,1fr);padding:9px 20px calc(9px + env(safe-area-inset-bottom));
  /* 必须把旧样式里的 transform 显式清掉：不写 transform:none，就会沿用旧规则的 translateX(-50%)，
     导航会被整体左移、跑到手机框外面去。margin/right 同理一并重置。 */
  transform:none;right:auto;margin:0;max-width:none;
  border-top:1px solid var(--line,#e4eee9);background:#fff}
/* 底部每一项的尺寸以**首页原来那一版为准**（左右内边距 20px、图标 20px、文字 10px、间距 4px）——
   以前各页大小不一：首页／我的 68px 高、图标 19×24，其余页 59px 高、图标 14×15。现在所有页都按首页这版。 */
.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:3px 0;border:0;
  background:transparent;color:var(--muted,#7c918a);font-size:10px}
.nav-item.active{color:var(--green-dark,#13895f);font-weight:600}
.nav-item > span:last-child{font-size:10px;line-height:1.3}
.nav-icon{position:relative;display:grid;place-items:center;font-size:20px;line-height:1;
  background:none;border:0;color:inherit}
.nav-icon svg{width:20px;height:20px}
/* 底部导航的**整格都可点**（Judy 2026-09-18：用户习惯点图标那块大区域，不会精确去点文字）——
   ①图标及其子元素不接收指针事件，点图标时事件直接落到按钮上；
   ②每格最小高度 48px，保证图标＋文字都在可点区域内；
   ③导航钉在视口底部（不随页面高度跑），任何窗口尺寸都点得到。 */
.nav-item{min-height:48px;padding:6px 0;position:relative;cursor:pointer}
.nav-item .nav-icon,.nav-item .nav-icon *{pointer-events:none}
/* 导航**跟手机框同宽、贴在手机框底部**（用 body 提高权重压过 phase2 的 `min-width:700px` 那条 absolute 规则，
   但从上一步的错误里学到的：**不能按视口宽度写死**，否则短窗口下导航会比手机框宽、两边戳出来）。 */
body .bottom-nav{position:absolute;left:0;bottom:0;transform:none;
  width:100%;max-width:100%;z-index:30}
.bottom-actions{position:absolute;left:0;bottom:0;z-index:10;width:100%;
  display:flex;gap:9px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  transform:none;right:auto;margin:0;max-width:none;
  background:#fff;border-top:1px solid var(--line,#e4eee9)}

.toast{position:fixed;left:50%;bottom:92px;z-index:40;max-width:calc(100vw - 48px);padding:10px 14px;
  transform:translate(-50%,12px);opacity:0;border-radius:8px;background:#182923;color:#fff;
  font-size:12px;white-space:nowrap;transition:.2s}
.toast.show{transform:translate(-50%,0);opacity:1}

/* 底部导航／底部操作条一律相对**手机框**定位（不是相对浏览器窗口）——
   否则手机框按比例缩短时，它们会飘到窗口底部、变成悬空叠在内容上。 */

/* 手机宽度下：一屏到底、无圆角外框（与首页一致） */
@media(max-width:480px){
  .stage{min-height:auto;padding:0}
  .phone,.stage .phone,.page-shell .phone,.page .phone{width:100%;max-width:none;height:100vh;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
  /* 复核版两页（加工记录／交付单）右侧的「给评审看的说明」是框外内容，手机宽度下收起来 */
  .side{display:none}
}

/* ── 框外说明区（D-127 第③条：给评审看的说明一律放在手机框外，真实产品里不存在）──
   用法：在 </main> 之后、.stage 的结束 </div> 之前放 <aside class="side">…</aside>；
   <h3> 写结论式小标题，<div class="q"> 写正文，不要写成产品文案。 */
.side{width:330px;flex:none;align-self:flex-start}
.side .card{padding:12px 13px;border:1px solid #e4eee9;border-radius:12px;background:#fff}
.side .card+.card{margin-top:10px}
.side h3{margin:0 0 9px;font-size:13px;color:#172d28}
.side .q{font-size:12px;line-height:1.9;color:#445c54}
.side .q b{color:#172d28}
@media(max-width:1100px){.side{display:none}}