/* assets/css/components/table.css — 数据表：套餐对比表与规格表共用。
   用真实 <table> 而不是 CSS Grid 伪装——对比表有 40+ 行 5 列且要支持读屏导航，
   真表格的语义与列关联能力是伪装不出来的（基准项目的运维看板只有 4 行，所以用了 Grid）。 */

/* ============ 表格外壳：宽表在窄屏横向滚动 ============ */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--line); background:var(--surface); }
.tbl{ width:100%; min-width:760px; border-collapse:collapse; font-size:14.5px; }

/* ============ 表头 ============ */
.tbl thead th{
  position:sticky; top:0; z-index:1;
  padding:16px 14px; background:var(--surface-2);
  border-bottom:1px solid var(--line-dark);
  font-family:var(--serif); font-weight:700; font-size:15px; text-align:center;
  white-space:nowrap;
}
.tbl thead th:first-child{ text-align:left; }
/* 推荐档位：整列加朱砂顶边，靠一条 3px 线而不是整列换底色 */
.tbl thead th.is-pick{ box-shadow:inset 0 3px 0 var(--cinnabar); }
.tbl thead th small{ display:block; margin-top:4px; font-family:var(--sans); font-weight:400; font-size:12.5px; color:var(--muted); }

/* ============ 分组行 ============ */
.tbl .row-group th{
  padding:12px 14px; background:var(--paper);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:var(--sans); font-weight:700; font-size:13.5px; text-align:left; color:var(--ink);
}
.tbl .row-group th .mark{ margin-right:8px; vertical-align:middle; }

/* ============ 数据行 ============ */
.tbl td{
  padding:13px 14px; border-bottom:1px solid var(--line);
  text-align:center; color:var(--muted); vertical-align:top;
}
.tbl td:first-child{ text-align:left; color:var(--ink); }
.tbl tbody tr:hover td{ background:var(--surface-2); }
.tbl .c-name{ font-weight:500; }
.tbl .c-name small{ display:block; margin-top:2px; font-weight:400; font-size:12.5px; color:var(--muted); }
.tbl .c-pick{ background:rgba(194,64,42,.03); }
.tbl .c-val{ font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.tbl .c-txt{ font-size:13.5px; }

/* 支持标记：实心方块对勾的打勾用单线 SVG，由页面内联提供 */
.ok{ display:inline-flex; color:var(--ok-on-light); }
.ok .ico{ width:18px; height:18px; stroke-width:2; }
.no{ color:var(--line-dark); }