/* 包裹详情的样式 —— **深链页 parcel.html 与包裹列表里的详情弹窗共用这一份。**
   ⚠️ 2026-08-13 从 parcel.html 的内联 <style> 抽出，内容一字未改。
   与 order-detail.css 同一个道理：两处各留一份必然漂移。 */
/* ── P6-b 包裹详情：主列 + 侧栏 ──────────────────────────────────────
   账户左栏 240 之外，主列 748 + gutter 20 + 侧栏 364（order-spec §0 同一骨架）。
   主列只放**事实**（状态、进度、箱内商品、入库实拍、物流），侧栏放**金额与动作**
   （运费账单 → 包裹信息 → 收货地址 → 主 CTA → 次要动作 → 联系客服）。
   ⚠️ 拿不到的信息整行不渲染，不写「该接口不返回 X」。 */
.degrade{background:var(--panel);border:1px dashed var(--line-d);border-radius:var(--r-md);
  padding:11px 13px;font-size:11.5px;color:var(--ink3);line-height:1.8}
.pane{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:16px 18px;margin-bottom:12px}
.pane > b{font-size:13.5px;display:block}

/* ⚠️ **单列**（2026-08-13 产品定稿）。原来 ≥1001px 时是 1fr + 364px 两栏，
   右栏比左边正文还长 —— 左边一片空白、右边一条长队，眼睛要来回横跳。
   `.detail-content-side` 这个类名保留（结构上仍是「信息之后的那一段」），
   但它不再是一根侧栏。 */
.detail-content-grid{display:flex;flex-direction:column;gap:14px}
.detail-content-main,.detail-content-side{min-width:0;display:flex;flex-direction:column;gap:14px}
.detail-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:18px 22px}
.detail-card > .hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.detail-card > .hd b{font-size:14px}
.detail-card > .hd .sub{font-size:11.5px;color:var(--sub)}
/* 金额一律 `2,800 日元（约 120 元）` 同一行，等宽数字。 */
.money{font-variant-numeric:tabular-nums;white-space:nowrap}

/* 状态头：顶边 4px 承担语气，底色同族浅一档。 */
.detail-status{display:flex;align-items:flex-start;gap:14px;padding:15px 22px 17px;background:var(--panel);
  border:1px solid var(--line);border-top:4px solid var(--line-d);border-radius:var(--r-xl)}
.detail-status.pay{border-top-color:var(--deer);background:var(--cream)}
.detail-status.warn{border-top-color:var(--warn);background:var(--warn-bg)}
.detail-status.ok{border-top-color:var(--ok);background:var(--ok-bg)}
.detail-status.bad{border-top-color:var(--bad);background:var(--bad-bg)}
.detail-status .tx{flex:1;min-width:0}
.detail-status .tx b{font-size:19px;line-height:1.4}
.detail-status .tx p{font-size:12.5px;color:var(--ink2);line-height:1.7;margin:5px 0 0}
.detail-status .no{font-size:12.5px;color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums}

/* 六步出库进度：只点亮我们**确实知道**的那一步。 */
.pcsteps{display:flex;gap:6px;margin-top:14px}
.pcsteps .s{flex:1;min-width:0;text-align:center}
.pcsteps .s .ln{height:4px;border-radius:var(--r-pill);background:var(--grid)}
.pcsteps .s .tx{font-size:10.5px;color:var(--sub);margin-top:6px;line-height:1.5}
.pcsteps .s.on .ln{background:var(--ok)}
.pcsteps .s.on .tx{color:var(--ok)}
.pcsteps .s.now .ln{background:var(--warn)}
.pcsteps .s.now .tx{color:var(--warn)}
.pcsteps .s.bad .ln{background:var(--bad)}
.pcsteps .s.bad .tx{color:var(--bad)}
@media (max-width:820px){.pcsteps{overflow-x:auto}.pcsteps .s{min-width:74px}}

/* 箱内商品：一件一行，右边是它自己的订单入口。 */
.pkg-item{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--hair)}
.pkg-item:last-child{border-bottom:0}
.pkg-item:first-of-type{padding-top:13px}
.pkg-item img,.pkg-item .noimg{width:56px;height:56px;object-fit:contain;background:var(--panel);
  border-radius:var(--r-md);flex:none}
.pkg-item .noimg{display:grid;place-items:center;color:var(--sub);font-size:11px}
.pkg-item .main{flex:1;min-width:0}
.pkg-item .nm{font-size:13px;line-height:1.55}
.pkg-item .no{font-size:11.5px;color:var(--sub);margin-top:4px}

/* 入库实拍：6 格铺满主列，第 6 格叠「+N」。没有照片整块不渲染。 */
.shots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:13px}
@media (max-width:820px){.shots{grid-template-columns:repeat(3,minmax(0,1fr))}}
.inbound-photo{display:block;width:100%;padding:0;border:0;border-radius:10px;overflow:hidden;
  background:var(--panel);cursor:zoom-in;aspect-ratio:1}
.inbound-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* ── 侧栏 ───────────────────────────────────────────────────────── */
/* ⚠️ 只放大**卡片自己的那一行金额**（直接子元素）。写成 `.side-money .v`
   会把下面费用明细每一行的数字也撑成 30px，一张卡里四个同样大的数字，
   用户读不出哪个才是「本次要付的」。 */
.side-money > .k{font-size:12.5px;color:var(--ink2)}
.side-money > .v{margin-top:7px;margin-bottom:4px;font-size:28px;font-weight:700;line-height:1.15;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.side-money > .v span{font-size:13px;font-weight:400;color:var(--ink2);margin-left:4px}
.side-kv{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:12.5px;padding:8px 0;border-bottom:1px solid var(--hair)}
.side-kv:last-child{border-bottom:0;padding-bottom:0}
.side-kv .k{color:var(--sub);flex:none}
.side-kv .v{text-align:right;min-width:0;word-break:break-all}
.side-kv .v.no{appearance:none;background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:12.5px;color:var(--ink)}
.side-kv .v.no:hover{color:var(--deer-d);text-decoration:underline}
.side-cta{width:100%;font-size:14.5px;font-weight:700;border-radius:999px;padding:13px 16px;
  display:block;box-sizing:border-box;text-align:center}
.side-note{font-size:11.5px;color:var(--ink3);line-height:1.8}
.side-links{display:flex;flex-direction:column;align-items:center;gap:11px;padding:2px 0 4px}
.side-links a,.side-links button{appearance:none;border:0;background:none;padding:0;cursor:pointer;
  font:inherit;font-size:12px;color:var(--ink2)}
.side-links a:hover,.side-links button:hover{text-decoration:underline}
/* 🔴 主动作块冻结在底部（2026-08-19 产品要求）。
   这一页从状态一路排到收件人，「单独发送 / 去支付运费」原来沉在最末 ——
   不滚到头就看不见这一屏唯一要点的那颗按钮。
   ⚠️ `sticky` 认的是**最近的滚动祖先**：弹窗里是 `.ysheet-bd`，深链页
      `parcel.html` 里是文档本身。两个宿主都成立，所以判据写在这里而不是
      某一个宿主的样式里。
   ⚠️ `.ysheet-bd` 自己有 18px 内边距，`bottom:0` 会贴到内边距的内边缘、
      在按钮下面留一条底缝。用负外边距把那条缝吃掉，同时把左右也撑满，
      让它看起来是一条真正的底栏而不是"卡住的卡片"。
   ⚠️ **不许有内容排在它下面**（见 parcel-detail.js viewParcel 那段注释）：
      贴底的东西会永久盖住后面的元素，那就是"渲染了但看不见"。
   ⚠️ 不透明背景是必须的：内容要从它**底下**滚过去，半透明会糊成一片。 */
/* ⚠️ 全站去阴影（2026-08-20）之后，「内容从底下滚过去」这件事不能再靠一道
   向上的投影表达。改用**一道加重的顶边**，与「我的包裹」那条吸底汇总条
   （`parcels.html` 的 `.pick-summary`）同一个做法：`.detail-card` 自带的
   1px 边太细，滚动时上下两块会糊在一起。 */
/* 🔴 顶边必须写成 `.detail-card.detail-stickycta`（两个类），不能只写
   `.detail-stickycta` —— `order-detail.css` 里**也有一条 `.detail-card`**，
   而 `parcel.html` 是先引 parcel-detail.css 再引 order-detail.css，
   于是那条 `border:1px solid var(--line)` 的**简写**会把后来居上地覆盖掉
   同为单类选择器的 `border-top`。实测过：写单类时computed 是 1px --line，
   一点都没生效，而静态检查、`npm test`、`npm run smoke` 全都是绿的。 */
.detail-stickycta{position:sticky;bottom:0;z-index:3;
  display:flex;flex-direction:column;gap:10px}
.detail-card.detail-stickycta{border-top:2px solid var(--line-d)}
/* 弹窗里再多做一步：`.ysheet-bd` 有 18px 内边距，`bottom:0` 只会贴到内边距的
   内边缘，按钮下面留一条白缝，看着像"卡住了"而不是"底栏"。用负外边距把三边
   的内边距吃掉，让它真的贴住弹窗底边。
   ⚠️ **只在弹窗里这么做**：深链页 `parcel.html` 的容器是 `.col-9` 栅格列，
      负外边距会让这条栏溢出到栏外（左边压侧栏、右边出血），那一版看着像坏掉。
      深链页保持普通卡片外观 + sticky 贴视口底，够用。 */
.parcel-detail-sheet .detail-stickycta{margin:0 -18px -18px;
  border-radius:var(--r-xl) var(--r-xl) 0 0;border-bottom:0}
/* ⚠️ `bottom:0` 停在**滚动容器的内容盒**底边，不是内边距底边 —— 实测冻住的
   按钮下面还剩 `.ysheet-bd` 那 18px 内边距，而内容会从这条缝里滑过去
   （padding 区属于滚动视口，里面的字照样看得见）。负外边距解决不了：
   sticky 不许越过自己包含块的底边。所以用一条同色的 `::after` 把那 18px
   补上 —— 它跟着按钮走，缝里再也透不出东西。
   ⚠️ 颜色跟 `.ysheet-box` 的底色（#fff）绑死；那边改了这里要一起改。 */
.parcel-detail-sheet .detail-stickycta::after{content:'';position:absolute;
  left:0;right:0;top:100%;height:18px;background:#fff}
@media (max-width:620px){
  .parcel-detail-sheet .detail-stickycta{margin:0 -16px -16px}
  .parcel-detail-sheet .detail-stickycta::after{height:16px}
}
/* 保管块：仓储费四要素（费率 · 免仓期止于 · 付费保管上限 · 到期怎么处理）要么齐、要么一起不出现。 */
.side-store{background:var(--panel);border-color:var(--line-d)}
.side-store.warn{background:var(--warn-bg);border-color:var(--warn)}
.side-store > b{display:block;font-size:13px;line-height:1.5;margin-bottom:4px}
.side-store p{font-size:11px;color:var(--ink3);line-height:1.75;margin-top:10px}
/* 4a 稿新增的第五行「已产生仓储费 · 待支付」与它下面那颗按钮。
   ⚠️ 金额用警示色，但**只在这一行**——整卡已经有 .warn 表达超期语气了，
      再把整卡染红会让「还在免仓期」和「已欠费」看起来一样急。 */
.side-store .store-due{color:var(--bad);font-weight:700}
.side-store .side-cta{margin-top:12px}
.recipient-card .recipient-name{font-size:13px;font-weight:700;color:var(--ink);margin-top:10px}
.recipient-card .recipient-full{font-size:12.5px;line-height:1.7;color:var(--ink2);margin-top:5px;word-break:break-word}
/* 包裹详情内的单独寄出复用「我的包裹」的服务卡片；ylSheet 在桌面端呈
   弹层、窄屏呈底部抽屉，这里只补足本页所需的卡片视觉。 */
.qprovider{border:1px solid var(--grid);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.qprovider-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;background:var(--panel);font-size:12px;color:var(--ink3)}
.qprovider-hd strong{font-size:13px;color:var(--ink)}
.qline{display:flex;align-items:center;gap:12px;padding:11px 12px;border-top:1px solid var(--hair)}
.qline.qline-select{box-sizing:border-box;width:100%;border-right:0;border-bottom:0;border-left:0;
  background:#fff;color:inherit;font:inherit;text-align:left;cursor:pointer}
.qline.qline-select:hover,.qline.qline-select:focus-visible{background:var(--cream);outline:0}
/* ⚠️ 选中标记原来是 `box-shadow:inset 3px 0 0`（一条色条，不是投影），随全站
   去阴影一起换成真的 `border-left`。**这条不能只删不换**：`:hover` 也把底色
   刷成 `--cream`，光靠底色的话「选中」和「鼠标停着」长得一模一样。
   ⚠️ `padding-left` 从 12 减到 9，加上 3px 边框正好还是 12 —— 选中时文字不位移。 */
.qline.qline-select.chosen{background:var(--cream);border-left:3px solid var(--deer);padding-left:9px}
.qline .main{flex:1;min-width:0}.qline .name{font-size:13px;font-weight:700;color:var(--ink)}
.qline .meta{font-size:11px;color:var(--sub);line-height:1.7;margin-top:3px}
.qline .price{text-align:right;white-space:nowrap}.qline .price b{display:block;font-size:16px}
.qline .price span{font-size:11px;color:var(--sub)}
.qchips{display:inline-flex;gap:5px;flex-wrap:wrap;margin-left:6px;vertical-align:middle}
.qchip{display:inline-flex;align-items:center;padding:1px 6px;border:1px solid var(--line);border-radius:999px;
  font-size:10px;font-weight:600;color:var(--deer-d);background:var(--cream);border-color:var(--deer)}
@media (max-width:640px){.qline{align-items:flex-start;flex-wrap:wrap}.qline .price{width:100%;text-align:left}}
/* 开箱视频提示：与小程序 pages/logistics、pages/orderdetail 同一句话、同一视觉权重。
   用 warn 底色是因为它不是「说明」，是「不照做会赔不到钱」。 */
.unbox{background:var(--warn-bg);border-color:var(--warn)}
.unbox > b{display:block;font-size:13.5px;color:var(--warn)}
.unbox > div{margin-top:8px;font-size:12.5px;line-height:1.75;color:var(--ink2)}

/* 真实轨迹（只有承运商接口真的返回数据时才渲染） */
.tl2 .n{display:grid;grid-template-columns:14px 1fr;gap:12px}
.tl2 .tlrail{display:flex;flex-direction:column;align-items:center}
.tl2 .dot{width:9px;height:9px;border-radius:50%;background:var(--deer);margin-top:5px;flex:none}
.tl2 .bar{flex:1;width:1px;background:var(--grid);min-height:14px}
.tl2 .n:last-child .bar{background:transparent}
.tl2 .bd{padding-bottom:14px}
.tl2 .tx{font-size:12.5px;color:var(--ink);line-height:1.55}
.tl2 .at{font-size:11px;color:var(--sub);margin-top:3px}