/* 珠海捷运行-PORZI · APP 观感补齐（全站共享）
 *
 * 用户反馈（2026-10-09）：
 *   「目前的页面无法与 APP 的样式相比，需要尽可能接近 APP 的样式」
 *   「美观不好看，需要更时尚的风格，占用空间太多了」
 *
 * ★ 定位：**纯增量**。顶栏/底栏/导航壳在 editor/nav.js（深色顶条 +
 *   底部四标签 + PWA meta + safe-area），那部分是"结构"；本文件只补
 *   它没覆盖的"底子"—— 设计令牌、点击反馈、滚动链、加载/空态。
 *
 * ★ 为什么需要这个文件：本仓库**从来没有共享 CSS** —— 31 个页面各自把
 *   :root 令牌内联抄一遍，且已抄漂（部分页缺 --muted / --accent-soft）。
 *   观感"拼凑"的根因在这，不在配色。
 *
 * ★ 加载顺序至关重要：各页 `<link href="/app.css">` **排在页面自己的
 *   <style> 之前** —— CSS 同权重下后者胜，页面既有样式一律胜出，
 *   本文件只做"页面没写时才兜底"。
 *
 * ★ 绝不写这几条（会破坏既有功能，有测试守着）：
 *     · 全局 user-select:none —— 登记单页要**长按二维码**给客户识别
 *     · touch-action:none —— 会禁掉滚动与缩放
 *     · pointer-events 全局改动 —— 会打断长按菜单
 */

/* ---------- 设计令牌（页面没定义时的兜底） ---------- */
:root {
  /* 色板：与各页既有取值对齐，不引入新颜色 */
  --accent: #d5001c;
  --accent-soft: #f3f4f6;
  --accent-ink: #b0001a;
  --dark: #111827;
  --text: #111827;
  --ink: #374151;
  --muted: #6b7280;
  --faint: #9ca3af;
  --border: #e5e7eb;
  --border-soft: #f3f4f6;
  --bg: #f5f6fa;
  --card: #ffffff;
  --ok: #16a34a;
  --danger: #dc2626;
  --req: #b0001a;

  /* 间距节奏（4 的倍数，页面不必再手写魔数） */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;

  /* 圆角 */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-pill: 999px;

  /* 层次阴影（比 1px 边框更"APP"） */
  --sh-1: 0 1px 2px rgba(17, 24, 39, .05), 0 1px 3px rgba(17, 24, 39, .05);
  --sh-2: 0 2px 8px rgba(17, 24, 39, .07), 0 1px 2px rgba(17, 24, 39, .04);
  --sh-3: 0 10px 28px rgba(17, 24, 39, .13), 0 2px 8px rgba(17, 24, 39, .06);

  /* 动效曲线：iOS 那条，比 ease 更"跟手" */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur: .22s;

  /* 安全区（刘海/小白条） */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* 顶部导航高度：nav.js 的深色顶条 = 内容 44px + 安全区（刘海）。
     ⚠ 必须是 calc —— iPhone 有刘海时是 44+47=91px，写死 45 会让页头
       钻到导航底下。nav.js 渲染完还会用实测值覆盖这个变量（更准）。 */
  --pz-nav-h: calc(44px + env(safe-area-inset-top, 0px));
}

/* ---------- 底子：APP 通用质感 ---------- */

/* 点击高亮：默认那层灰色 flash 是"这是网页"最明显的信号之一。
   ⚠ 只关高亮，**不关** user-select —— 长按二维码/长按复制都要用。 */
* { -webkit-tap-highlight-color: transparent; }

/* ⚠ 关键兜底：iOS 橡皮筋滚过头/键盘顶起时，背后**默认是白色**——
   深色顶栏之下突然一片白，非常"网页"。把根背景压成页头同色。
   用 fixed 渐变而不是 background-attachment（后者移动端性能很差）。 */
html {
  background: #111827;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { background: var(--bg); }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 滚动链：挡"滚到底把整个 webview 拽走露出白底" */
  overscroll-behavior-y: contain;
  /* 页面进场：把跳转那一瞬的白闪压掉。
     只动 opacity（不动 transform）—— transform 会让 position:fixed 的
     底栏/弹层短暂改变包含块，出现跳动。 */
  animation: pz-page-in .2s ease-out;
}

@keyframes pz-page-in {
  from { opacity: .01; }
  to   { opacity: 1; }
}

/* 跨文档滑动过渡（Chromium 111+）。老 webview **静默忽略**，
   退化成上面的淡入 —— 两条路都有，不会两边都空。 */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* 可点元素：去掉 300ms 双击缩放等待（APP 的第一手感）。
   只挑显式可交互的标签，不碰 div/tr —— 不改既有布局行为。 */
button:not(:disabled),
a[href],
[role="button"],
label[for],
summary,
select {
  touch-action: manipulation;
}

/* 输入框：iOS 上 <16px 会触发聚焦自动放大，顶到 16 避免 */
@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: max(16px, 1em); }
}

/* ---------- 通用原子（页面按需取用，不自动生效） ---------- */

/* 卡片化：阴影代替硬边框 */
.app-card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--sp-4);
}

/* 骨架屏：加载态比"加载中…"体面得多 */
.app-skel {
  background: linear-gradient(90deg,
    var(--border-soft) 25%, #e9ebf0 37%, var(--border-soft) 63%);
  background-size: 400% 100%;
  animation: pz-skel 1.3s ease infinite;
  border-radius: var(--r-sm);
  color: transparent !important;
}
@keyframes pz-skel {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}

/* 空状态：不给客户/顾问看一片空白 */
.app-empty {
  text-align: center;
  color: var(--muted);
  padding: var(--sp-6) var(--sp-4);
  font-size: 13px;
  line-height: 1.7;
}

/* 页面已有固定操作栏（bottom-bar）时，把它抬到底部标签栏之上 ——
   否则两个固定条叠在一起。底栏高度由 nav.js 实测写进 --pz-bottom-h。 */
body > .bottom-bar,
body > #bottom-bar {
  bottom: calc(var(--pz-bottom-h, 58px) + env(safe-area-inset-bottom, 0px));
}


/* ============================================================
   布局契约（2026-10-09 样式层收敛）
   ============================================================

   用户问：「如果解决不了这个样式的问题，是否可以按全屏的页面参数重写
   页面代码来解决这些问题。」

   ★ 结论：要重写的不是**页面代码**，是**样式层**。
     实测业务逻辑与样式在文件里是分开的 ——
       内联 <script>  12,469 行  ← 一行都不用碰
       内联 <style>    3,433 行  ← 收敛的只有这部分

   ★ 之前为什么会反复：
     同一个"页面多宽、页头多高"的问题，每个页面各写各的 ——
       · 13 页把限宽写在 .container 上，19 页写在 body 上
       · body 内边距 12/14/16 三种值混用
       · 共享层排在页面 <style> 之前，同权重必输 → 只能靠 !important 硬压
     于是每次"统一"都是打补丁，补丁又互相打架（本文件一度有 29 条 !important）。

   ★ 现在：那些声明已从 26 个页面里**删掉**，全部搬到这里成为唯一事实源。
     本文件现在对布局**零 !important** —— 地基铺平后不需要再压谁。
     （剩下的 !important 只服务于别的目的，见各自注释。）

   ★ 客户通道页（sign / survey / appointment_customer / work_item_form）
     不受影响：它们没有 #pz-nav，就没有 pz-nav-on 这个类 —— 那些是给客户
     在手机上看单列表单的，**故意**限宽才好在窄屏阅读。
     （不用 :has()：老 webview 不支持，整条规则会静默失效，实测过。）
   ============================================================ */

/* ---- 0. 页面内边距变量（运行时实测写入） ----
   `--pz-body-pad-l` / `--pz-body-pad-r` 由 nav.js 的 syncBodyPad() 实测
   body 的左右内边距后写进 :root —— 导航条与裸页头的深色带都要用它做
   **负边距**撑满屏宽。

   ★ 为什么必须实测而不是写死：两批页面的内边距位置不同 ——
     A 批（用 .container）body pad=0，B 批（把 body 当容器）pad=14。
     写死一个值在另一批上就是错的（这正是"这几个页面不是全屏"
     反复没修好的原因）。
   ★ 缺变量时 var(--x, 0px) 兜底为 0，退化成"不撑"，不会崩。 */

/* ---- 1. 页面宽度：全站满宽 ---- */
body.pz-nav-on {
  /* 100% 而不是 100vw —— 100vw 含滚动条宽度，会横向溢出（实测 15px） */
  max-width: 100%;
  margin: 0;
  /* 顶部归零：body 的 padding 会把里面的 sticky 导航条一起往下推
     （实测 navTop=16，屏幕上顶部空出一条白边，与其它页不一致）。
     底部由 nav.js 的 padding-bottom:calc(--pz-bottom-h …) 接管，
     左右是内容边距，都保留。 */
  padding-top: 0;
}
/* 页面自己的容器也不再限宽，只保留内容边距 */
body.pz-nav-on > .container {
  max-width: 100%;
  margin: 0;
}

/* ---- 2. 页头：统一深色条 + 统一尺寸 ---- */
/* 2a. 用 .header/.topbar 包着的 12 页（原 prepare/reception/home/appointment…） */
body > .header,
body > .topbar {
  position: sticky;
  top: var(--pz-nav-h);
  z-index: 30;
  background: #111827;
  color: #fff;
  padding: 12px 14px;
}
body > .header h1,
body > .topbar h1 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}
/* 2b. 裸 <h1> 的 14 页（原 tech/staff/catalog/data…）——
   它们的结构是 h1 与 .sub 两个**兄弟元素**，这里拼成与 2a 同貌的一条带。

   ★★ 负边距是关键（用户三次报「这9个页面仍不是全屏」的真凶）：
     这批页面把 body 当容器用（`body{padding:14px}`），而 h1 在 body 里面 ——
     深色带因此被内边距挤窄，实测 **左 14 ~ 右 1186**；
     而 2a 那批的 `.header` 直接挂在无 padding 的 body 上，实测 **0 ~ 1200**。
     两条深色带宽度差 28px，页头左右各露出一条 14px 的缝 ——
     全屏页和"不全屏"页的差别就在这，肉眼一眼能看出。

     负边距把带子推回屏幕两侧，`padding` 再给回等量的内边距，
     文字位置不变（仍与下方正文左对齐）。
     ⚠ 14px 必须与页面 `body{padding}` 一致 —— 收敛后全站统一为 14px
       （见本文件顶部契约；改那里时这里要一起改）。
     ⚠ 选择器用 `body >`：实测各页 DOM 里裸页头的 h1 是 body 的直接子元素，
       而有 .header 的页 h1 在那个 div 里面 —— 所以两者互不命中。 */
body > h1 {
  background: #111827;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 calc(-1 * var(--pz-body-pad-r, 0px)) 0 calc(-1 * var(--pz-body-pad-l, 0px));
  padding: 12px 14px 4px;   /* 下边距 4px：副标题紧接补上，拼成整条 */
}
body > h1 + .sub {
  background: #111827;
  color: #9ca3af;
  font-size: 12px;
  line-height: 1.5;
  margin: 0 calc(-1 * var(--pz-body-pad-r, 0px)) 0 calc(-1 * var(--pz-body-pad-l, 0px));
  padding: 0 14px 12px;
}
/* 深色底上的链接：白字（用户决策 2026-10-11：「文字用黑色」——
   深底的对应中性色是白。原金色、后改亮红都属"给文字染色"，一并撤掉） */
body > h1 + .sub a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- 3. 印刷：导航是噪音（登记单 / 报价单要打印） ---- */
@media print {
  #pz-nav,
  #pz-bottom {
    display: none !important;
  }
}