/* 挖煤办设计系统 · 通用组件层
   任何新页面 = templates/_ui.html 的宏(page_header/card/tabbar) + 这里的组件类。
   颜色一律 var(--…), 阴影一律 rgba(var(--shadow-rgb), α)。
   页面骨架类(.home-page/.stub-page)在 home.css; 这里只放可复用组件。 */

/* ====== 卡片标题(卡内模块标题, 15/600 规范) ====== */
.card-h {
  font-size: 15px; font-weight: 600; color: var(--text-2);
  margin: 0 0 10px;
}

/* ====== 按钮: 高度 44px, 全圆角 ====== */
.btn {
  height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  font-family: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary {
  background: linear-gradient(180deg, var(--accent-lite), var(--accent));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 8px rgba(11,101,112,.35);
}
.btn-ghost {
  background: var(--surface-sunk);
  color: var(--accent);
  border: 1px solid rgba(22,42,50,.08);
  box-shadow: inset 0 1px 2px rgba(var(--shadow-rgb), .05);
}
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }
.btn:disabled { opacity: .55; cursor: default; }

/* ====== 表单: 控件 44px / 圆角 12 / focus 变绿(登录页同规范) ====== */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; color: var(--text-2); }
.field input,
.field textarea,
.field select {
  min-height: 44px;
  border: 1.5px solid var(--box-line);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 0 12px;
  font-family: inherit; font-size: 15px; color: var(--text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { padding: 10px 12px; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--accent); }
.field input[type="file"] {
  padding: 9px 12px;
  font-size: 13px; color: var(--text-2);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-3); font-weight: 300; }

/* ====== 通用列表行(时间线/记录列表) ====== */
.rowline {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.rowline:last-child { border-bottom: 0; }
.rowline .r-title { font-size: 15px; color: var(--text); flex: 1; min-width: 0; }
.rowline .r-side  { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.rowline-note { margin: -8px 0 12px; font-size: 13px; font-weight: 300; color: var(--text-3); }

/* ====== 弱化信息行 / 空态 ====== */
.kv { font-size: 13px; font-weight: 300; color: var(--text-3); margin: 2px 0; }
.empty-note { padding: 14px 0 6px; font-size: 14px; color: var(--text-3); }

/* ====== 数据小胶囊(卡片里的关键数字) ====== */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chip {
  background: var(--surface-sunk);
  border: 1px solid rgba(22,42,50,.08);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px; font-weight: 300; color: var(--text-2);
}
.chip b { font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* ====== 结果/预警横幅 ====== */
.notice {
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 10px 12px;
  font-size: 14px; color: var(--text-2);
  margin-bottom: 14px;
}
.notice-alert {
  background: rgba(158, 46, 60, .08);
  color: var(--danger);
}

/* ====== 整卡可点(卡片内放一个 .cover-link, 点击区域盖满整卡) ====== */
.tappable { position: relative; }
.tappable .cover-link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.tappable:active { transform: scale(.99); }

/* ====== 二级页返回条: 老 .topbar 的 token 化覆盖 ====== */
.topbar {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}
.topbar-back, .topbar-link { color: var(--accent); }
.topbar-brand { color: var(--accent); font-weight: 600; }

/* ====== 页面骨架: 通用 tab 内页(比 stub 更通用的名字) ====== */
.page {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 14px 12px 0;
  display: flex; flex-direction: column; gap: 12px;
}
.page .ring-2 { margin-top: 0; }