/* 数据页的公共样式。
 *
 * 之前 position.html 引了这个文件但它并不存在（404），于是除了内联 <style>
 * 覆盖到的部分，其余全落回浏览器默认值 —— 表头因此是衬线体，数字不等宽，
 * 整页看起来像没做过样式。补上它，顺带把几件对读数有影响的事情定下来。 */

:root {
  --fg: #1f2933;
  --fg-dim: #5a6672;
  --fg-mute: #9aa5b1;
  --line: #e6eaee;
  --line-soft: #f0f3f5;
  --bg: #f4f6f8;
  --card: #fff;
  --accent: #1f6feb;
  --pos: #1e8449;
  --neg: #c0392b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 数字一律等宽对齐。金额与费率是要竖着比大小的，
 * 比例字体下 1 比 8 窄一截，同一列的小数点根本对不齐 */
.num, .mono, td.num, th.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.num { text-align: right; }

.pos { color: var(--pos); }
.neg { color: var(--neg); }
.muted { color: var(--fg-mute); }

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--fg-dim);
  white-space: nowrap;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
}
th.num { text-align: right; }

td {
  padding: 7px 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
/* 单元格字号统一在这里定。之前只有部分格子写了内联 font-size，
 * 其余落回 body 的 13px，同一行里两种字号并排，看着像没排版 */
td.nw, th.nw { white-space: nowrap; }

tbody tr:hover > td { background: #fafcfd; }

/* 列少的表不要撑满整屏。撑满时七列会被拉到一千多像素宽，
 * 每两个字之间隔着半个屏幕，眼睛得横着扫才能把一行读完 */
table.fit { width: auto; min-width: 520px; }
table.fit th, table.fit td { padding-right: 26px; }

.pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.6;
  background: #eef1f3;
  color: var(--fg-dim);
}
.pill.ok { background: #e8f6ef; color: var(--pos); }
.pill.bad { background: #fdecea; color: var(--neg); }

.btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--fg);
  border-radius: 5px;
  padding: 4px 11px;
  font-size: 12px;
  cursor: pointer;
}
.btn:hover { border-color: #c8d0d8; background: #fafbfc; }

/* 说明性文字压到最低存在感：它是备查的，不是每次都要读的。
 * 之前几段说明各占一整块，把真正的数据挤到了首屏之外 */
.note {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--fg-dim);
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-left: 2px solid #d5dde4;
  border-radius: 4px;
  padding: 7px 11px;
}
.note code { font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
details.note > summary {
  cursor: pointer;
  color: var(--fg-mute);
  font-size: 11px;
  list-style: none;
}
details.note > summary::-webkit-details-marker { display: none; }
details.note > summary::before { content: "ⓘ 说明"; }
details.note:not([open]) { padding: 4px 11px; background: transparent; border-style: dashed; }
details.note[open] > summary::before { content: "ⓘ 说明（收起）"; }
details.note > div { margin-top: 7px; }