/* ==========================================================================
   锦棠造价系统 · 设计系统 v2.0 「计量簿 / The Measurement Ledger」
   base.css —— PC / H5 / 小程序 三端共用的**唯一真源**
   --------------------------------------------------------------------------
   规矩：这个文件 = 三端的设计地基。改这里 = 三端同时改。
        任何端都**不许**内联覆写 token 值；端与端的差别只允许体现在**版式**
        （栅格 / 密度 / 交互模型），不许体现在**色彩与数字规范**。
   三根支柱：
     ① 账簿秩序 —— 等宽表格数字、右对齐、分级合计、会计双线总计
     ② 图纸标注 —— 等宽编号、轴线式场景色标、技术性标签
     ③ 克制的暖 —— 深墨蓝为骨、朱砂只用于"钱"，留白充足，不堆卡片
   ========================================================================== */

:root{
  /* —— 墨色（文字层级）—— */
  --ink-900:#0d1a26; --ink-800:#172b3d; --ink-700:#2c4257;
  --ink-600:#4c6376; --ink-500:#6d8296; --ink-400:#96a8b8; --ink-300:#bccad6;

  /* —— 纸与线 —— */
  --paper:#ffffff;
  --canvas:#f1f5f9;          /* 画布：带蓝灰，绝不用纯白 */
  --canvas-2:#e8eef4;
  --line:#e2e9f0;            /* 细规则线 */
  --line-2:#eef3f8;          /* 更细（表内分隔） */
  --rule:#c6d3e0;            /* 强规则线（区块分隔） */
  --rule-ink:#8fa3b6;        /* 账页表头底线 */
  --grid:#dde7f0;            /* 账页竖格 */

  /* —— 品牌：深墨蓝 —— */
  --navy-900:#0e2337; --navy-800:#152f4a; --navy-700:#1c3d5e;
  --navy-600:#24507a; --navy-500:#2f6690; --navy-400:#5c88ac;
  --navy-200:#c3d5e6; --navy-100:#e9f1f8;

  /* —— 朱砂：只给"钱"用 —— */
  --seal-700:#8e2a1f; --seal-600:#a83226; --seal-500:#c0392b;
  --seal-200:#f0c4bf; --seal-100:#fceeec;

  /* —— 状态 —— */
  --jade-600:#166b4c; --jade-500:#1c7a57; --jade-100:#e5f2ec;
  --amber-600:#8a5d12; --amber-500:#a9701c; --amber-100:#fbf1de;
  --slate-600:#556b80; --slate-100:#eef3f8;

  /* —— 12 个施工场景身份色（轴线色标：装饰用，**不做文字色**）—— */
  /* ⚠ 这 12 个值必须与 _shared/core.js 的 SCENE_COLOR 逐项一致：
     check_design_proto.py §10 会自动比对，不一致即报红。
     一律低饱和 —— 它们的职责是"指认身份"，不是抢注意力；场景名文字仍用 --ink-700，
     所以色盲用户不受影响（不靠色相单独传递信息）。 */
  --sc-bas:#3f6ea8; --sc-wal:#2f8f86; --sc-rof:#b06a35; --sc-kit:#c8912a;
  --sc-tun:#4a5b78; --sc-rdg:#a15549; --sc-stl:#5a7fa0; --sc-rur:#6b8f5e;
  --sc-bl:#9a7086;  --sc-crk:#7a5a8f; --sc-exp:#3f7a6a; --sc-pvf:#b39124;

  /* —— 字体：系统栈（内网/离线部署，不许依赖 Web 字体）—— */
  --font-sans:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC",
              "Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"SF Mono","JetBrains Mono","Cascadia Mono","Roboto Mono",
              Consolas,"Courier New",ui-monospace,monospace;

  /* —— 字号（PC 基准；H5/小程序 各自上调，见各端 CSS）—— */
  --fs-2xs:11px; --fs-xs:11.5px; --fs-sm:12.5px; --fs-base:13.5px;
  --fs-md:15px; --fs-lg:17px; --fs-xl:21px;

  /* —— 间距（4px 基数，但刻意不全程统一：表内紧、区块松）—— */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:26px; --sp-7:34px;

  --r-xs:3px; --r-sm:4px; --r-md:6px; --r-lg:9px; --r-xl:12px;
  --ease:cubic-bezier(.22,1,.36,1);          /* ease-out-quart */

  /* —— 桌面阴影：两层（接触阴影 + 环境阴影），不要单层大模糊 —— */
  --sh-1:0 1px 2px rgba(16,40,64,.05),0 12px 32px -20px rgba(16,40,64,.22);
  --sh-2:0 1px 2px rgba(16,40,64,.06),0 18px 44px -22px rgba(16,40,64,.30);
  --sh-pop:0 24px 60px -12px rgba(13,26,38,.5);

  /* —— 触控（H5 / 小程序）：最小命中 44px，Apple HIG 下限 —— */
  --tap:44px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);

  /* —— 焦点环：键盘用户必须看得见 —— */
  --focus:0 0 0 3px rgba(47,102,144,.13);
}

*{box-sizing:border-box}
[v-cloak]{display:none}
html,body{margin:0;padding:0}
body{
  font:var(--fs-base)/1.62 var(--font-sans);
  color:var(--ink-800); background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* 所有数字一律等宽 + 表格数字：小数点对齐，错位一眼可见 */
.n,.mono,input.q,td.n,td.amt{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"zero" 1,"ss01" 1}
button{font:inherit;cursor:pointer}
a{color:var(--navy-600)}

/* ---------------------------------------------------------------- 按钮 */
.btn{
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
  padding:7px 14px;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink-700);font-size:var(--fs-sm);font-weight:500;
  transition:background .14s var(--ease),border-color .14s var(--ease),
             color .14s var(--ease),box-shadow .14s var(--ease);
  white-space:nowrap;
}
.btn:hover:not(:disabled){border-color:var(--navy-500);color:var(--navy-700);
  background:var(--navy-100)}
.btn:focus-visible{outline:2px solid var(--navy-500);outline-offset:2px}
.btn:disabled{opacity:.38;cursor:not-allowed}
.btn.p{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.btn.p:hover:not(:disabled){background:var(--navy-800);border-color:var(--navy-800);
  color:#fff;box-shadow:0 2px 8px rgba(28,61,94,.22)}
.btn.seal{background:var(--seal-500);border-color:var(--seal-500);color:#fff}
.btn.seal:hover:not(:disabled){background:var(--seal-600);border-color:var(--seal-600);
  color:#fff;box-shadow:0 2px 8px rgba(192,57,43,.24)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-600)}
.btn.ghost:hover:not(:disabled){background:var(--slate-100);color:var(--navy-700);
  border-color:transparent}
.btn.danger{border-color:var(--seal-200);color:var(--seal-600)}
.btn.danger:hover:not(:disabled){background:var(--seal-500);border-color:var(--seal-500);
  color:#fff}
.btn.sm{padding:4px 10px;font-size:var(--fs-xs)}
.btn.xs{padding:2px 8px;font-size:var(--fs-2xs);border-radius:var(--r-xs)}
.btn.ico{padding:4px 7px;font-family:var(--font-mono);font-size:var(--fs-sm)}
.btn.block{width:100%}

/* 触控端的按钮：命中区域拉到 44px，且不要 hover（手指没有悬停） */
.touch .btn{min-height:var(--tap);padding:10px 16px;font-size:var(--fs-md);
  border-radius:var(--r-md)}
.touch .btn.sm{min-height:36px;padding:7px 13px;font-size:var(--fs-base)}
.touch .btn.p:active:not(:disabled),
.touch .btn.seal:active:not(:disabled){filter:brightness(.92)}
.touch .btn:not(.p):not(.seal):active:not(:disabled){background:var(--slate-100)}

/* ---------------------------------------------------------------- 输入 */
input,select,textarea{
  font:inherit;font-size:var(--fs-base);padding:6px 9px;width:100%;
  border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink-800);
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease);
}
/* ⚠ 输入框边框**不能**用 --line(#e2e9f0)：白底上对比度约 1.15:1，等于没有边框，
   用户看不出这一格能填。可编辑性必须看得见 —— 用 --rule 起手。
   逐级加强：常态 --rule → 悬停 --navy-400 → 聚焦 --navy-500 + 焦点环。 */
input:hover,select:hover{border-color:var(--navy-400)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--navy-500);box-shadow:var(--focus)}
input::placeholder{color:var(--ink-300)}
input.q{text-align:right;padding:5px 8px}
input.q:focus{background:var(--navy-100)}
/* 触屏输入：字号必须 ≥16px，否则 iOS Safari 聚焦时自动放大整页 */
.touch input,.touch select,.touch textarea{font-size:16px;padding:10px 12px;
  min-height:var(--tap);border-radius:var(--r-md)}
.touch input.q{font-size:17px;font-weight:600;letter-spacing:.01em}
/* 去掉数字输入的上下步进箭头（造价员用键盘，不用鼠标点） */
.touch input[type=number]::-webkit-outer-spin-button,
.touch input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ------------------------------------------------------------ 标签/药丸 */
.tag{font-size:var(--fs-2xs);padding:2px 8px;border-radius:var(--r-xs);letter-spacing:.06em;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);color:#c5d8e8}
.tag.mono{font-family:var(--font-mono);letter-spacing:0}
.pill{font-size:var(--fs-2xs);padding:1.5px 7px;border-radius:var(--r-xs);letter-spacing:.04em;
  background:var(--slate-100);color:var(--slate-600);white-space:nowrap;
  border:1px solid transparent;display:inline-block}
.pill.ok{background:var(--jade-100);color:var(--jade-600);border-color:#bfe0d0}
.pill.warn{background:var(--amber-100);color:var(--amber-600);border-color:#ecd9ab}
.pill.bad{background:var(--seal-100);color:var(--seal-600);border-color:var(--seal-200)}
.pill.mono{font-family:var(--font-mono)}

/* -------------------------------------------------------------- 区块标题 */
/* 「标题 + 拖尾细线」——图纸标题栏的做法，比加粗大字安静 */
.blk-t{display:flex;align-items:center;gap:10px;margin:0 0 13px;
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-700);letter-spacing:.04em}
.blk-t::after{content:"";flex:1;height:1px;background:var(--line)}
.blk-t .hint{font-weight:400;color:var(--ink-400);letter-spacing:0;font-size:var(--fs-xs)}

/* ---------------------------------------------------------------- 空态 */
.empty{padding:44px 24px;text-align:center;color:var(--ink-400);font-size:var(--fs-sm)}
.empty b{display:block;color:var(--ink-600);font-size:var(--fs-base);margin-bottom:6px;
  font-weight:500}

/* ------------------------------------------------------------ 提示浮层 */
.toast{position:fixed;z-index:99;background:var(--navy-800);
  color:#fff;padding:12px 17px;border-radius:var(--r-md);font-size:var(--fs-sm);
  box-shadow:0 16px 40px -10px rgba(13,26,38,.55);max-width:430px;
  opacity:0;transform:translateY(10px);transition:all .26s var(--ease);
  pointer-events:none;border-left:3px solid var(--navy-400)}
.toast.show{opacity:1;transform:none}
.toast.ok{border-left-color:#3ddc84}
.toast.bad{border-left-color:#ff6b6b;background:var(--seal-700)}
/* 桌面：右下角 */
.toast.d-desktop{right:22px;bottom:22px}
/* 触控：居中偏上，避开底部操作栏与拇指区 */
.toast.d-touch{left:16px;right:16px;top:calc(var(--safe-t) + 64px);max-width:none;
  transform:translateY(-10px);text-align:left}
.toast.d-touch.show{transform:none}

/* ---------------------------------------------------- 会计双线（总计行）*/
/* 总账的通例：合计上方一条双线。全站凡是"总计"都必须用它。 */
.rule-double{border-top:3px double var(--rule-ink)}

/* ------------------------------------------------------------ 复核要点 */
.chk-line{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);
  color:var(--ink-700);cursor:pointer;padding:8px 11px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);transition:background .14s var(--ease),border-color .14s var(--ease)}
.chk-line:hover{background:#f8fbfe;border-color:var(--line)}
.chk-line input{width:auto;flex:0 0 auto;accent-color:var(--navy-600);cursor:pointer}
.chk-line em{margin-left:auto;font-family:var(--font-mono);font-style:normal;
  font-size:var(--fs-2xs);color:var(--ink-400);white-space:nowrap}
.chk-line span.warn{color:var(--amber-600);font-weight:500}
.touch .chk-line{min-height:var(--tap);padding:11px 13px;font-size:var(--fs-md)}
.touch .chk-line input{width:20px;height:20px}

/* --------------------------------------------------- 金额变动的瞬间脉冲 */
/* 只闪背景，**不动布局属性**（改 width/height 会触发整页重排） */
@keyframes flash{0%{background:var(--seal-100);box-shadow:0 0 0 6px var(--seal-100)}
  100%{background:transparent;box-shadow:none}}
.flash{animation:flash .5s var(--ease)}

/* --------------------------------------------------------- 无障碍 */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}