/* ============================================================
   直播专用版（批次86）
   仅在 ?view=live 时被 index.php 挂上；手机端与普通 PC 端不会加载本文件。
   本文件不改任何测算逻辑，只负责：把视口切成左右两栏 + 右侧 3:4 展示区的排版度量。
   度量单位 u = 展示区板宽的 1%（--lb-u），所以板子缩放到任何尺寸，比例完全一致。
   ============================================================ */

:root {
  --lb-edge: 16px;   /* 展示区距视口右边的留白 */
}

/* 左栏（主播操作区）就是原来的页面主体，只是把右边让出来 */
body.sbc-live .wrap {
  max-width: none;
  margin: 0;
  padding-left: 16px;
  padding-right: calc(var(--lb-w) + var(--lb-edge) + 34px);
}

/* ---------- 分隔粗线：可拖动改展示区宽度，双击回默认 ---------- */
#lbDivider {
  position: fixed;
  top: var(--lb-top);
  bottom: var(--lb-edge);
  right: calc(var(--lb-w) + var(--lb-edge) + 10px);
  width: 8px;
  border-radius: 4px;
  background: #cbd5e1;
  cursor: col-resize;
  z-index: 900;
}

#lbDivider:hover,
#lbDivider.is-drag {
  background: var(--primary);
}

/* ---------- 3:4 展示区：固定物理尺寸、不随页面滚动 ---------- */
#lbBoard {
  --lb-u: calc(var(--lb-w) / 100);
  position: fixed;
  top: var(--lb-top);
  right: var(--lb-edge);
  width: var(--lb-w);
  height: calc(var(--lb-w) * 4 / 3);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: calc(var(--lb-u) * 0.9) solid var(--text);
  border-radius: calc(var(--lb-u) * 2);
  overflow: hidden;
  z-index: 901;
}

.lb-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--lb-u) * 2.5);
  padding: calc(var(--lb-u) * 2.4) calc(var(--lb-u) * 3) calc(var(--lb-u) * 1.8);
  border-bottom: calc(var(--lb-u) * 0.8) solid var(--text);
}

.lb-head img {
  height: calc(var(--lb-u) * 6.8);
  width: auto;
  display: block;
}

.lb-title {
  font-size: calc(var(--lb-u) * 6.8);
  font-weight: 800;
  letter-spacing: calc(var(--lb-u) * 0.5);
  color: var(--text);
}

.lb-body {
  flex: 1 1 auto;
  padding: calc(var(--lb-u) * 1) calc(var(--lb-u) * 3.2);
  overflow: hidden;
}

/* 版块切换/重绘时的柔和过渡，避免整块跳变闪动 */
.lb-swap {
  transition: opacity .15s ease;
}

.lb-swap.is-out {
  opacity: 0;
}

/* ---------- 小节标题 ---------- */
.lb-sec {
  display: flex;
  align-items: center;
  gap: calc(var(--lb-u) * 2);
  margin: calc(var(--lb-u) * 1) 0 calc(var(--lb-u) * 0.4);
  font-size: calc(var(--lb-u) * 3.4);
  font-weight: 800;
  letter-spacing: calc(var(--lb-u) * 0.3);
  color: var(--primary-dark);
}

.lb-sec::after {
  content: "";
  flex: 1 1 auto;
  height: calc(var(--lb-u) * 0.3);
  background: var(--line);
}

/* ---------- 数据表：两列一组，标签 20/值 29/标签 21/值 30 ---------- */
.lb-tb {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.lb-tb th,
.lb-tb td {
  padding: 0;
  /* 行高由 live.js 按当前模块的行数在 7.6u~11u 之间铺满板面（行数少的模块不留大片空白） */
  height: var(--lb-row-h, calc(var(--lb-u) * 7.6));
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  border-bottom: calc(var(--lb-u) * 0.2) solid var(--line);
  font-size: calc(var(--lb-u) * 4.9);
  text-align: right;
  vertical-align: middle;
}

.lb-tb th {
  font-size: calc(var(--lb-u) * 4.3);
  font-weight: 500;
  color: var(--muted);
  text-align: left;
  padding-left: calc(var(--lb-u) * 0.7);
}

/* 数值与后一组标签之间留 3u 空档（两侧各 1.5u），不再顶在一起 */
.lb-tb td.b { padding-right: calc(var(--lb-u) * 1.5); }
.lb-tb th.c { padding-left: calc(var(--lb-u) * 1.5); }
.lb-tb td.d { padding-right: calc(var(--lb-u) * 0.7); }

.lb-tb col.a { width: 20%; }
.lb-tb col.b { width: 29%; }
.lb-tb col.c { width: 21%; }
.lb-tb col.d { width: 30%; }

/* 单列版式（非养老金五块）：标签是政策原词，最长到「本地实际缴费要求」8 个字，
   值列只放数字，所以让标签占 42%；否则标签放不下会被整列缩字号，缩到看不清 */
.lb-tb.one col.a { width: 42%; }
.lb-tb.one col.b { width: 58%; }

.lb-tb td {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lb-tb td .lb-unit {
  /* 用 em：live.js 收窄长字段时会整格缩字号，单位必须跟着缩 */
  font-size: .68em;
  font-weight: 500;
  color: var(--muted);
  /* em 基数是数值字号，0.35em ≈ 板宽的 1.7u，与标签列仍留出间隙 */
  margin-left: .35em;
}

/* 单一整宽行（末行落单时用），数值仍与右列同一条基线 */
.lb-tb td.span3 { padding-right: calc(var(--lb-u) * 0.7); }

/* 行下补充说明（弹性提前退休的时间与缴费年限）：矮一档、字号小一档、灰色，贴着上一行读 */
.lb-tb tr.note th,
.lb-tb tr.note td {
  height: calc(var(--lb-u) * 4.6);
  font-size: calc(var(--lb-u) * 3.2);
  font-weight: 500;
  color: var(--muted);
}

/* ---------- 主数字 ----------
   整块以主数字的字号为基准，标签与单位都用 em：live.js 要收窄一排时只改 .lb-hero 的
   font-size，三者同步缩；nowrap 保证单位不会掉到第二行。
   左右各留 2u 内边距，居中排再长也不会顶到边框 */
.lb-hero {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: calc(var(--lb-u) * 10.5);
  gap: .17em;
  padding: calc(var(--lb-u) * 1.2) calc(var(--lb-u) * 2) calc(var(--lb-u) * 0.8);
}

.lb-hero > * {
  flex: 0 0 auto;
}

.lb-hero-lab {
  font-size: .32em;
  font-weight: 700;
  color: var(--muted);
  padding-bottom: .13em;
}

.lb-hero-num {
  font-size: 1em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.lb-hero-num .lb-unit {
  font-size: .32em;
  font-weight: 700;
  margin-left: .07em;
}

.lb-hsub {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: calc(var(--lb-u) * 1.6);
  padding: 0 calc(var(--lb-u) * 2);
  font-size: calc(var(--lb-u) * 4.2);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.lb-hsub .lb-op {
  color: var(--muted);
  font-weight: 500;
}

/* ---------- 底部两行提示语（文案按原话，不改字） ----------
   左右内边距与内容区一致，否则这两行会顶到边框；放不下时由 live.js 缩字号，不换行也不裁字 */
.lb-foot {
  flex: 0 0 auto;
  padding: calc(var(--lb-u) * 1.7) calc(var(--lb-u) * 3.2) calc(var(--lb-u) * 2);
  border-top: calc(var(--lb-u) * 0.6) dashed var(--line);
  text-align: center;
  white-space: nowrap;
}

.lb-f1 {
  font-size: calc(var(--lb-u) * 3.7);
  font-weight: 700;
  color: var(--text);
}

.lb-f2 {
  margin-top: calc(var(--lb-u) * 0.7);
  font-size: calc(var(--lb-u) * 3.2);
  color: var(--muted);
}

/* ---------- 悬浮件：页头入口、客服、下滑提示都压在展示区上，直播版一律让位 ---------- */
body.sbc-live .scroll-hint,
body.sbc-live .cs-btn {
  display: none;
}

/* ---------- 仅展示区（OBS 只采集这块）：隐藏左栏操作区与粗线，展示区按视口最大化 ----------
   顶部功能导航保留：主播在这一模式下仍要切版块，OBS 只框选展示区即可 */
body.sbc-live.lb-solo .wrap,
body.sbc-live.lb-solo #lbDivider {
  display: none;
}

body.sbc-live.lb-solo #lbBoard {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}