/**
 * tokens.css — 信号 / 预警 / 资金跟踪 / 消息中心 四个页面的共用样式基座
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * 【一、颜色：这里一个色值都没有，只有 token 引用】
 *
 * 所有颜色都写成 var(外壳 token, 兼容 token) 的两级引用：
 *   第一级 --mg-* 是 H6 在 shell/ 里建立的统一设计 token（首选）；
 *   第二级是批次 5 已上线的 workbench.css 里的 token（H6 完成前的过渡）。
 * 两级都是 token 引用，**没有任何 #hex / rgb() / hsl() / 颜色关键字**，
 * 验收脚本会静态扫描本文件确认这一点。
 *
 * 页面代码里也不写行内颜色——所有着色只通过下面这些 class。
 *
 * ───────────────────────────────────────────────────────────────────────────
 * 【二、断点：必须与 runtime.js 的 BREAKPOINTS 一致】
 *
 * CSS 的 @media 里用不了 CSS 变量，只能两边写同一个数字。
 *   手机 ≤ 900px   —— 表格降级为卡片、向导一屏一步
 *   平板 ≤ 1200px  —— 列数收敛，仍保留表格
 * runtime.js 的 BREAKPOINTS.mobile / .tablet 就是这两个数，
 * 验收脚本会拿它去比对本文件里的 max-width，对不上直接判失败。
 *
 * ───────────────────────────────────────────────────────────────────────────
 * 【三、两条硬性交互指标】
 *   · 数字一律 tabular-nums（.pg-num）：强度分、阈值、当前值跳动时不左右抖动；
 *   · 可点元素 ≥44px（.pg-tap）：手机上按得中。
 *
 * ───────────────────────────────────────────────────────────────────────────
 * 【四、配色不暗示操作（§11.4）】
 * 评分档位用中性梯度 --pg-scale-1..5，**不用涨跌红绿**——
 * 机会分高不等于买入建议，用绿色去染它就是在用配色下单。
 * 涨跌色只出现在真正表示价格变动方向的地方（.pg-up / .pg-down）。
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ── token 桥接 ──────────────────────────────────────────────────────────── */

.pg-page,
.pg-modal,
.pg-modal-host {
  --pg-bg: var(--mg-color-bg, var(--bg-0));
  --pg-surface: var(--mg-color-surface, var(--bg-1));
  --pg-surface-2: var(--mg-color-surface-alt, var(--bg-2));
  --pg-border: var(--mg-color-border, var(--bd));
  --pg-border-soft: var(--mg-color-border-soft, var(--bd-soft));
  --pg-fg: var(--mg-color-fg, var(--fg));
  --pg-fg-2: var(--mg-color-fg-muted, var(--fg-2));
  --pg-fg-3: var(--mg-color-fg-subtle, var(--fg-3));
  --pg-accent: var(--mg-color-accent, var(--accent));
  --pg-on-accent: var(--mg-color-on-accent, var(--bg-0));
  --pg-up: var(--mg-color-up, var(--green));
  --pg-down: var(--mg-color-down, var(--red));
  --pg-warn: var(--mg-color-warning, var(--yellow));
  --pg-info: var(--mg-color-info, var(--blue));
  --pg-danger: var(--mg-color-danger, var(--red));

  /* 评分档位：中性梯度，刻意不带涨跌语义 */
  --pg-scale-1: var(--mg-color-scale-1, var(--fg-3));
  --pg-scale-2: var(--mg-color-scale-2, var(--fg-2));
  --pg-scale-3: var(--mg-color-scale-3, var(--fg-2));
  --pg-scale-4: var(--mg-color-scale-4, var(--fg));
  --pg-scale-5: var(--mg-color-scale-5, var(--fg));

  --pg-radius-sm: var(--mg-radius-sm, var(--r-sm, 6px));
  --pg-radius-md: var(--mg-radius-md, var(--r-md, 10px));

  --pg-space-1: var(--mg-space-1, 4px);
  --pg-space-2: var(--mg-space-2, 8px);
  --pg-space-3: var(--mg-space-3, 12px);
  --pg-space-4: var(--mg-space-4, 16px);
  --pg-space-5: var(--mg-space-5, 24px);

  --pg-font-xs: var(--mg-font-xs, 11px);
  --pg-font-sm: var(--mg-font-sm, 12px);
  --pg-font-md: var(--mg-font-md, 14px);
  --pg-font-lg: var(--mg-font-lg, 17px);
  --pg-font-xl: var(--mg-font-xl, 22px);

  /* 触控点击目标下限 */
  --pg-tap-min: var(--mg-tap-min, 44px);
}

/* ── 页面骨架 ────────────────────────────────────────────────────────────── */

.pg-page {
  display: flex;
  flex-direction: column;
  gap: var(--pg-space-4);
  padding: var(--pg-space-4);
  color: var(--pg-fg);
  background: var(--pg-bg);
  /* 页面本体永不横向滚动：宽内容自己在容器里滚 */
  max-width: 100%;
  overflow-x: hidden;
}

.pg-page-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pg-space-3);
}

.pg-page-title {
  font-size: var(--pg-font-xl);
  font-weight: 700;
  margin: 0;
}

.pg-page-sub,
.pg-hint {
  font-size: var(--pg-font-sm);
  color: var(--pg-fg-2);
  margin: 0;
}

.pg-page-body { min-height: var(--pg-space-5); }

/* ── 数字：等宽，跳动时不抖 ──────────────────────────────────────────────── */

.pg-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── 点击目标 ≥44px ──────────────────────────────────────────────────────── */

.pg-tap {
  min-height: var(--pg-tap-min);
  min-width: var(--pg-tap-min);
}

.pg-btn {
  min-height: var(--pg-tap-min);
  min-width: var(--pg-tap-min);
  padding: 0 var(--pg-space-3);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-sm);
  background: var(--pg-surface-2);
  color: var(--pg-fg);
  font-size: var(--pg-font-md);
  cursor: pointer;
}

.pg-btn:disabled { opacity: .45; cursor: not-allowed; }
.pg-btn-primary { background: var(--pg-accent); color: var(--pg-on-accent); border-color: var(--pg-accent); }
.pg-btn-danger { color: var(--pg-danger); border-color: var(--pg-danger); background: transparent; }
.pg-btn-danger.is-confirming { background: var(--pg-danger); color: var(--pg-on-accent); }

/* 危险操作与其他按钮之间强制留白，降低手机误触 */
.pg-danger-slot { margin-left: var(--pg-space-5); display: inline-flex; }

.pg-link {
  min-height: var(--pg-tap-min);
  padding: 0 var(--pg-space-2);
  border: 0;
  background: transparent;
  color: var(--pg-info);
  font-size: var(--pg-font-sm);
  cursor: pointer;
  text-decoration: underline;
}

.pg-row-actions {
  display: flex;
  align-items: center;
  gap: var(--pg-space-2);
  flex-wrap: wrap;
}

/* ── 筛选器 / 标签 ───────────────────────────────────────────────────────── */

.pg-filters { display: flex; flex-wrap: wrap; gap: var(--pg-space-4); }
.pg-filter-group { display: flex; align-items: center; gap: var(--pg-space-2); flex-wrap: wrap; }
.pg-filter-label { font-size: var(--pg-font-sm); color: var(--pg-fg-3); }

.pg-chips { display: flex; flex-wrap: wrap; gap: var(--pg-space-2); }

.pg-chip {
  min-height: var(--pg-tap-min);
  min-width: var(--pg-tap-min);
  padding: 0 var(--pg-space-3);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-sm);
  background: var(--pg-surface);
  color: var(--pg-fg-2);
  font-size: var(--pg-font-sm);
  cursor: pointer;
}
.pg-chip.is-on { border-color: var(--pg-accent); color: var(--pg-fg); }
.pg-chip.is-locked { opacity: .45; cursor: not-allowed; }

.pg-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--pg-space-2);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-sm);
  font-size: var(--pg-font-xs);
  color: var(--pg-fg-2);
}
.pg-badge-ok { border-color: var(--pg-border-soft); color: var(--pg-fg); }
.pg-badge-muted { border-style: dashed; color: var(--pg-fg-3); }

.pg-status-tag { font-size: var(--pg-font-sm); color: var(--pg-fg-2); }

.pg-dot-unread {
  width: var(--pg-space-2);
  height: var(--pg-space-2);
  border-radius: 50%;
  background: var(--pg-accent);
  display: inline-block;
}

/* ── 提示条 ──────────────────────────────────────────────────────────────── */

.pg-banner {
  padding: var(--pg-space-3);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-md);
  background: var(--pg-surface);
  font-size: var(--pg-font-sm);
}
.pg-banner-warn { border-color: var(--pg-warn); }

.pg-warn { color: var(--pg-warn); font-size: var(--pg-font-sm); margin: 0; }
.pg-error { color: var(--pg-danger); font-size: var(--pg-font-sm); margin: 0; }

/* ── 强度：假设标记必须视觉可辨 ──────────────────────────────────────────── */

.pg-strength {
  display: inline-flex;
  align-items: baseline;
  gap: var(--pg-space-2);
  flex-wrap: wrap;
}

.pg-strength-score {
  font-size: var(--pg-font-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--pg-fg);
}

.pg-strength-grade { font-size: var(--pg-font-sm); color: var(--pg-fg-2); }

/*
 * 假设标记不是一个可忽略的小问号：分数本身加下划虚线，
 * 后面跟一个描边徽标，让人一眼看出「这个数字出自未定稿的公式」。
 */
.pg-strength.is-assumption .pg-strength-score {
  text-decoration: underline dashed;
  text-underline-offset: 3px;
  text-decoration-color: var(--pg-warn);
}

.pg-badge-assumption {
  border-color: var(--pg-warn);
  color: var(--pg-warn);
  cursor: help;
}

.pg-strength-version {
  font-size: var(--pg-font-xs);
  color: var(--pg-fg-3);
  font-variant-numeric: tabular-nums;
  cursor: help;
}

/* 评分档位：中性梯度，不用涨跌色 */
.pg-scale-1 { color: var(--pg-scale-1); }
.pg-scale-2 { color: var(--pg-scale-2); }
.pg-scale-3 { color: var(--pg-scale-3); }
.pg-scale-4 { color: var(--pg-scale-4); }
.pg-scale-5 { color: var(--pg-scale-5); }

/* 涨跌色只用于真正的价格方向 */
.pg-up { color: var(--pg-up); }
.pg-down { color: var(--pg-down); }

/* ── 表格（桌面）──────────────────────────────────────────────────────────── */

/* 宽内容在自己的容器里滚，页面本体不横滚 */
.pg-table-scroll { overflow-x: auto; max-width: 100%; }

.pg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pg-font-md);
}
.pg-table th,
.pg-table td {
  padding: var(--pg-space-2) var(--pg-space-3);
  border-bottom: 1px solid var(--pg-border-soft);
  text-align: left;
  vertical-align: top;
}
.pg-table th { color: var(--pg-fg-3); font-size: var(--pg-font-sm); font-weight: 500; }
.pg-table td.pg-num { font-variant-numeric: tabular-nums; }

/* ── 卡片（手机）──────────────────────────────────────────────────────────── */

.pg-cards { display: flex; flex-direction: column; gap: var(--pg-space-3); }

.pg-card {
  display: flex;
  flex-direction: column;
  gap: var(--pg-space-2);
  padding: var(--pg-space-3);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-md);
  background: var(--pg-surface);
  max-width: 100%;
}

.pg-card-head { display: flex; align-items: center; gap: var(--pg-space-2); flex-wrap: wrap; }
.pg-card-title { font-size: var(--pg-font-lg); font-weight: 700; }
.pg-card-direction,
.pg-card-type,
.pg-card-symbol { font-size: var(--pg-font-md); color: var(--pg-fg-2); }
.pg-card-time { font-size: var(--pg-font-sm); color: var(--pg-fg-3); margin-left: auto; }

.pg-card-primary { display: flex; align-items: baseline; gap: var(--pg-space-3); flex-wrap: wrap; }

.pg-card-secondary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--pg-space-1) var(--pg-space-3);
  font-size: var(--pg-font-sm);
  margin: 0;
}
.pg-card-secondary dt { color: var(--pg-fg-3); }
.pg-card-secondary dd { margin: 0; color: var(--pg-fg); overflow-wrap: anywhere; }

/* ── 详情字段网格 ────────────────────────────────────────────────────────── */

.pg-detail-grid {
  display: grid;
  grid-template-columns: max-content 1fr max-content 1fr;
  gap: var(--pg-space-2) var(--pg-space-4);
  margin: 0;
}
.pg-detail-grid.is-single-column { grid-template-columns: max-content 1fr; }
.pg-detail-label { color: var(--pg-fg-3); font-size: var(--pg-font-sm); }
.pg-detail-value { margin: 0; color: var(--pg-fg); font-size: var(--pg-font-md); overflow-wrap: anywhere; }
.pg-detail-strength,
.pg-detail-actions { display: flex; align-items: center; gap: var(--pg-space-3); flex-wrap: wrap; }

/* ── 表单 ────────────────────────────────────────────────────────────────── */

.pg-form { display: flex; flex-direction: column; gap: var(--pg-space-3); }
.pg-field { display: flex; flex-direction: column; gap: var(--pg-space-2); }
.pg-label { font-size: var(--pg-font-sm); color: var(--pg-fg-2); }
.pg-control { display: flex; align-items: center; gap: var(--pg-space-2); }
.pg-unit { font-size: var(--pg-font-sm); color: var(--pg-fg-3); }

.pg-input {
  min-height: var(--pg-tap-min);
  width: 100%;
  max-width: 100%;
  padding: 0 var(--pg-space-3);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-sm);
  background: var(--pg-surface-2);
  color: var(--pg-fg);
  font-size: var(--pg-font-md);
}
.pg-textarea { min-height: calc(var(--pg-tap-min) * 2); padding: var(--pg-space-2) var(--pg-space-3); }

.pg-toggle {
  min-height: var(--pg-tap-min);
  min-width: calc(var(--pg-tap-min) * 2);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-sm);
  background: var(--pg-surface-2);
  color: var(--pg-fg-2);
  cursor: pointer;
}
.pg-toggle.is-on { border-color: var(--pg-accent); color: var(--pg-fg); }

/* ── 消息中心 ────────────────────────────────────────────────────────────── */

.pg-message.is-unread { border-color: var(--pg-accent); }
.pg-message-body { font-size: var(--pg-font-md); color: var(--pg-fg); margin: 0; overflow-wrap: anywhere; }
.pg-message-more { font-size: var(--pg-font-sm); color: var(--pg-warn); margin: 0; }
.pg-message-delivery { font-size: var(--pg-font-sm); color: var(--pg-fg-2); margin: 0; }
.pg-fail-list { margin: 0; padding-left: var(--pg-space-4); font-size: var(--pg-font-sm); color: var(--pg-fg-2); }

/* ── 手机断点：900px，必须与 runtime.js BREAKPOINTS.mobile 一致 ─────────── */

@media (max-width: 900px) {
  .pg-page { padding: var(--pg-space-3); gap: var(--pg-space-3); }
  .pg-page-title { font-size: var(--pg-font-lg); }

  /* 详情 18 个字段在小屏改单列，杜绝横滚 */
  .pg-detail-grid { grid-template-columns: max-content 1fr; }

  /* 万一仍有表格渲染出来，也只在自己的容器里滚 */
  .pg-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 卡片主字段放大：币种、方向、强度、时间是手机上的第一眼信息 */
  .pg-card-title { font-size: var(--pg-font-xl); }
  .pg-strength-score { font-size: var(--pg-font-xl); }

  .pg-filters { flex-direction: column; gap: var(--pg-space-2); }
  .pg-filter-group { align-items: flex-start; flex-direction: column; }

  /* 操作按钮排成一行占满宽度，保证每个都够大 */
  .pg-row-actions .pg-btn { flex: 1 1 auto; }
  .pg-danger-slot { margin-left: 0; margin-top: var(--pg-space-3); width: 100%; }
  .pg-danger-slot .pg-btn { width: 100%; }
}

/* ── 平板断点：1200px，必须与 runtime.js BREAKPOINTS.tablet 一致 ────────── */

@media (max-width: 1200px) {
  .pg-detail-grid { grid-template-columns: max-content 1fr; }
}