/* RRG 真机 1:1 演示组件的 DOM 铬层样式。
   坐标全部是 1167×729.5 场景内的绝对值，与真机截图逐点对位，改动前先过对位闸。

   为什么文字与控件是 DOM 而不是画进 canvas：DOM 光栅化器有 ClearType 子像素渲染，
   canvas 只有灰度抗锯齿，同字号下永远糊一档。九轮攻坚的终局结论，勿回退。 */

/* 字体必须与真机同源，否则字形宽度不同、对位闸直接崩。
   取 web/webfonts 下的 woff2（产品 Web 端自托管的同一份 GB2312 子集），不取 assets 里的 OTF：
   同样的字形，woff2 才是 web 该用的格式。上线时随站点同源部署（属 P3 集成期）。 */
/* 字体必须落在站点内：曾指向 ../../../flutter_app/**，HTTP 下 `..` 会被钳在站点根，
   一律 404 后静默回退到系统字体——对位闸上那片长期归因为「CJK 光栅化差异」的残差，
   真身是压根换了一款字。原型要自带字体，不能靠仓库相对路径 */
@font-face { font-family: 'Kc Noto SC'; font-weight: 400; font-display: block;
  src: url('assets/fonts/NotoSansSC-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Kc Noto SC'; font-weight: 500; font-display: block;
  src: url('assets/fonts/NotoSansSC-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Kc Noto SC'; font-weight: 700; font-display: block;
  src: url('assets/fonts/NotoSansSC-Bold.woff2') format('woff2'); }

/* 不在这里写 position：宿主可能已经是 absolute 定位的（如舞台素材层），
   本表在站点样式之后加载，写了就会把宿主的定位覆盖掉。缺定位时由 mount 补 */
.rrg { overflow: hidden; background: #0E1218; }
.rrg__cv { position: absolute; display: block; }

/* 尺寸全部走 --rrg-* 变量，由 mount 按场景宽注入 */
.rrg__dom {
  position: absolute; left: 0; top: 0;
  width: var(--rrg-w); height: calc(var(--rrg-top) + var(--rrg-h));
  transform-origin: 0 0; pointer-events: none;
  font-family: 'Kc Noto SC', 'Microsoft YaHei', sans-serif;
}

/* 正文整体下移一条顶栏：内部坐标全部沿用底片实测原值 */
.rrg__body { position: absolute; left: 0; top: var(--rrg-top); width: var(--rrg-w); height: var(--rrg-h); }

/* ── 顶部工具栏：尺寸与配色逐项取自真机 rrg_top_bar.dart 与主题 token ──
   padding 8/4、控件间距 8、控件高 28、圆角 4、bodySmall 12px/400 */
.rrg__bar-top {
  position: absolute; left: 0; top: 0; width: 1167px; height: 37px;
  box-sizing: border-box; padding: 4px 8px;
  display: flex; align-items: center; gap: 8px;
  background: #151A22; border-bottom: 1px solid #2D343D;
  font-size: 12px; font-weight: 400; line-height: 16px; color: #EEF1F5;
  pointer-events: auto;
}
.rrg__bar-top .rrg__grp { display: flex; align-items: center; }
.rrg__tiny {
  display: flex; align-items: center; justify-content: center;
  padding: 4px; border-radius: 4px; cursor: pointer; color: #A1A3A7;
}
.rrg__tiny:hover { background: rgba(255, 255, 255, .06); }
.rrg__ob {
  height: 28px; padding: 4px 8px; border-radius: 4px;
  border: 1px solid #2D343D; background: transparent; color: #5F92FF;
  font: 400 12px/16px 'Kc Noto SC', 'Microsoft YaHei', sans-serif;
  cursor: pointer; white-space: nowrap;
}
.rrg__ob:hover { background: rgba(95, 146, 255, .08); }
.rrg__ob--icon { display: inline-flex; align-items: center; gap: 4px; }
.rrg__num {
  width: 44px; height: 28px; box-sizing: border-box;
  padding: 4px; text-align: center; border-radius: 4px;
  border: 1px solid #2D343D; background: transparent; color: #EEF1F5;
  font: 400 12px/16px 'Kc Noto SC', 'Microsoft YaHei', sans-serif;
  -moz-appearance: textfield;
}
.rrg__num::-webkit-outer-spin-button, .rrg__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rrg__num:focus { outline: none; border-color: #5F92FF; }
.rrg__sel {
  height: 28px; padding: 0 4px; border-radius: 4px;
  border: 1px solid transparent; background: transparent; color: #EEF1F5;
  font: 400 12px/16px 'Kc Noto SC', 'Microsoft YaHei', sans-serif; cursor: pointer;
}
.rrg__sel option { background: #151A22; color: #EEF1F5; }
/* 象限 chip：选中 = 底色 15% + 1.5px 实边 + 600 字重；未选 = 透明底 + .5px 30% 边 + 40% 字 */
.rrg__chip {
  padding: 4px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap;
  background: transparent; border: .5px solid rgb(var(--q) / .3);
  color: rgb(var(--q) / .4); font-weight: 400;
}
.rrg__chip.is-on {
  background: rgb(var(--q) / .15); border: 1.5px solid rgb(var(--q));
  color: rgb(var(--q)); font-weight: 600;
}
/* 演示数据是冻结的，这三项点了不该假装能改；置灰并挂原因，不做假交互 */
.rrg__bar-top .is-frozen { opacity: .55; cursor: default; }
.rrg__bar-top .is-frozen:hover { background: transparent; }

/* 右栏不透明底板：ClearType 要求文字压在同层不透明背景上，浮空即退回灰度 AA。
   面板底 / 行区两层色实测自底片（#080D1A / #0E1218） */
.rrg__panel { position: absolute; left: var(--rrg-split); top: 0; width: var(--rrg-panel); height: var(--rrg-h); background: #080D1A; }
.rrg__rows-bg { position: absolute; left: var(--rrg-split); top: 77px; width: var(--rrg-panel); height: calc(var(--rrg-h) - 77px); background: #0E1218; }

.rrg__q { position: absolute; font-size: 12px; font-weight: 600; line-height: 1; }
/* 左下角绘制计数：真机在图表区左下的一枚小徽标 */
.rrg__drawn {
  position: absolute; left: 12px; bottom: 16px;   /* 底片实测 y 694..714 */
  padding: 4px 8px; border-radius: 4px; background: #11151B;
  font-size: 11px; line-height: 1; color: #7E8287; white-space: nowrap;
}

.rrg__labels span {
  position: absolute; left: 0; top: 0;
  font-size: 11px; font-weight: 500; color: #EEF1F5; line-height: 1;
  white-space: nowrap; will-change: transform;
}

/* ── 回放条：真机在右栏顶部（底片实测 y 4..44、底色 #0E1118，左缘约 760） ── */
.rrg__bar {
  position: absolute; left: var(--rrg-barl); top: 4px; width: var(--rrg-barw); height: 40px;
  border-radius: 8px; background: #0E1118; pointer-events: auto;
}
.rrg__ic {
  position: absolute; top: 6px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 6px;
}
.rrg__ic:hover { background: rgba(255, 255, 255, .06); }
.rrg__txt { position: absolute; font-size: 12px; color: #EEF1F5; line-height: 14px; font-variant-numeric: tabular-nums; }
.rrg__track { position: absolute; left: 110px; top: 12px; width: 108px; height: 16px; cursor: pointer; }
.rrg__track i { position: absolute; left: 6px; top: 7px; height: 2px; border-radius: 1px; background: #5F92FF; width: 96px; }
.rrg__track b { position: absolute; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #5F92FF; }
.rrg__spsel {
  position: absolute; left: 248px; top: 8px; height: 24px;
  border: 1px solid #2D343D; border-radius: 4px; background: transparent; color: #EEF1F5;
  font: 400 12px/16px 'Kc Noto SC', 'Microsoft YaHei', sans-serif; cursor: pointer; pointer-events: auto;
}
.rrg__spsel option { background: #0E1118; color: #EEF1F5; }

/* ── 榜单：五列右对齐，行高 40，14 行一屏全显 ── */
/* 字号由「底片墨迹范围」反推：表头墨宽 48.5（13px 会撑到 52），
   行名墨高 11（12px 只有 9.5），代码墨高 6（11px 会到 8） */
.rrg__head span {
  position: absolute; top: 47.5px; height: 28.5px; line-height: 28.5px;
  font-size: 12px; font-weight: 500; color: #ABAEB3;
}
.rrg__head .is-sort { color: #5F92FF; font-weight: 700; }
.rrg__head .rrg__sort { position: absolute; top: 56px; }
.rrg__row { position: absolute; left: var(--rrg-split); width: var(--rrg-panel); height: 40px; }
.rrg__row .r-bar { position: absolute; left: 0; top: 0; width: 3px; height: 40px; }
.rrg__row .r-name { position: absolute; left: 12px; top: 9px; font-size: 13px; font-weight: 500; color: #EEF1F5; line-height: 1; }
.rrg__row .r-code { position: absolute; left: 12px; top: 24px; font-size: 10px; color: rgba(238, 241, 245, .5); line-height: 1; }
.rrg__row .r-v {
  position: absolute; top: 0; height: 40px; line-height: 40px;
  font-size: 12px; color: #EEF1F5; text-align: right; font-variant-numeric: tabular-nums;
}

/* ── 幽灵指针：无人值守自动演示；观众一出手就退场 ── */
/* 点击动效两件套（三组件同语言）：指针朝笔尖下压缩小 + 笔尖「实心脉冲 + 描边环」大涟漪。
   RRG 画面里四象限彩色轨迹密集，涟漪保持白色系才不与象限色混淆 */
.rrg__ghost { position: absolute; left: 0; top: 0; pointer-events: none; display: none; will-change: transform; z-index: 5; }
.rrg__ghost svg { display: block; transition: transform .1s ease-out; transform-origin: 2px 2px; }
.rrg__ghost.is-press svg { transform: scale(.76); }
.rrg__rip {
  position: absolute; left: -30px; top: -30px; width: 60px; height: 60px;
  border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%;
  background: rgba(255, 255, 255, .3); opacity: 0;
}
.rrg__rip.is-go { animation: rrg-rip .5s ease-out; }
@keyframes rrg-rip {
  0% { transform: scale(.12); opacity: 1; }
  70% { opacity: .5; }
  100% { transform: scale(1); opacity: 0; }
}

/* ── 诚实标注：演示数据必须挂来源与截止日（方案 P8） ── */
.rrg__badge {
  position: absolute; right: 10px; bottom: 8px; z-index: 6;
  font: 500 11px/1 'Kc Noto SC', 'Microsoft YaHei', sans-serif; letter-spacing: .04em;
  color: rgba(238, 241, 245, .62); background: rgba(10, 12, 18, .74);
  padding: 5px 9px; border-radius: 4px; pointer-events: none;
}