/* ============================================================
   播放量门禁（C2.223）
   ------------------------------------------------------------
   卡片上多一行「当前播放 / 门槛」，达标时整张卡片染色 + 一个「已达标」角标。
   规则写在 domain/play-gate.js，这里只管颜色。

   为什么整卡染色而不是只染那一行小字：投流师的判断是「这一格要不要现在加投」，
   要在远处扫一眼就能看见；只染 10px 小字等于没提醒。
   `is-hit` 由每次渲染现算，数据回落就自动消失，没有第二处状态要清。
   ============================================================ */

.mxent .mx-gate {
  font-size: 10.4px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 已达标的卡片：绿边 + 淡绿底。绿是「这件事成了」，与失败的红、待办的蓝分得开 */
.mxent.is-hit {
  border-color: var(--green);
  background: var(--green-d);
  box-shadow: inset 0 0 0 1px var(--green);
}
.mxent.mx-ok.is-hit,
.mxent.is-hit:hover {
  border-color: var(--green);
}
.mxent.is-hit b {
  color: var(--green);
}
.mxent.is-hit .mx-gate {
  opacity: 1;
  color: var(--green);
}

/* 角标：一张卡片最多一个，压在小字前面，扫一眼就知道「这条过了」 */
.mx-gate-tag {
  display: inline-block;
  margin-right: 4px;
  padding: 0 4px;
  border-radius: 3px;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.5;
  background: var(--green);
  color: var(--on-primary);
  vertical-align: 1px;
}

/* 紧凑档（格子只剩一两行字高）：角标省掉，靠整卡颜色表达，别把状态词挤掉 */
.mx-dense .mx-gate-tag,
.mx-ultra .mx-gate-tag {
  display: none;
}
.mx-dense .mxent .mx-gate,
.mx-ultra .mxent .mx-gate {
  font-size: 10px;
}

/* 明细弹窗里的同一条口径：卡片上只有最好那条，这里补上「达标几条」 */
.detail-gate {
  margin: 2px 0 4px;
  font-size: 12px;
  color: var(--txt2);
  font-variant-numeric: tabular-nums;
}
.detail-gate.is-hit {
  color: var(--green);
  font-weight: 600;
}
.detail-gate b {
  font-weight: 700;
}

/* ============================================================
   C2.239：整单三态 + 每条链接的小方块
   ------------------------------------------------------------
   partial（有达标但不够）用琥珀：这是「正在接近」的信号，不是失败也不是成功；
   undecidable（判不了）用虚线灰：明确告诉人「现在别下结论」，不染色、不抢注意力。
   小方块一条链接一个，颜色只在「成了 / 关了 / 拿不到数」这三种状态下出现，
   其余保持中性底色 —— 否则一排彩色点会看不出重点。
   ============================================================ */

.mxent .mx-gate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
}

.mxent.is-part {
  border-color: var(--line-amber);
  background: var(--amber-d);
}
.mxent.is-part b {
  color: var(--amber);
}
.mxent.is-part .mx-gate {
  opacity: 1;
  color: var(--amber);
}

.mxent.is-unk {
  border-style: dashed;
  border-color: var(--line2);
}
.mxent.is-unk .mx-gate {
  opacity: 0.85;
  color: var(--txt3);
}

/* 小方块：9px 见方，横向铺开，顺序与链接一致 */
.mx-gate-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
.mx-gate-dots i {
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  background: var(--track);
  box-shadow: inset 0 0 0 1px var(--line2);
}
.mx-gate-dots i.ok {
  background: var(--green);
  box-shadow: none;
}
/* 达标但广告已关：淡一档，表示「还在达标，但已经停了」 */
.mx-gate-dots i.off {
  background: var(--line3);
  box-shadow: none;
  opacity: 0.55;
}
.mx-gate-dots i.ok.off {
  background: var(--green);
  opacity: 0.38;
}
.mx-gate-dots i.bad {
  background: var(--red);
  box-shadow: none;
  opacity: 0.75;
}
.mx-gate-dots i.wait {
  background: var(--track);
  box-shadow: inset 0 0 0 1px var(--line3);
}
.mx-gate-dots em {
  font-style: normal;
  font-size: 9px;
  color: var(--txt3);
  margin-left: 1px;
}

/* 紧凑档：小方块只留 4 个（再多就挤掉「几条达标」这句话了） */
.mx-dense .mx-gate-dots i:nth-child(n + 5),
.mx-ultra .mx-gate-dots i:nth-child(n + 4) {
  display: none;
}

/* ---------- 明细弹窗里的汇总条（换成四段统计） ---------- */
.detail-gate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 2px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--soft);
  font-size: 12.5px;
  color: var(--txt2);
}
.detail-gate .dg-kpi {
  font-size: 14px;
  font-weight: 700;
  color: var(--txt);
}
.detail-gate .dg-sep {
  color: var(--line3);
}
/* §98：链接不可用是「能去处理的事」，在汇总条里单独给红色，别混在灰字里 */
.detail-gate .dg-bad {
  color: var(--red);
  font-weight: 600;
}
.detail-gate.is-hit {
  border-color: var(--line-green);
  background: var(--green-d);
  color: var(--green);
}
.detail-gate.is-hit .dg-kpi {
  color: var(--green);
}
.detail-gate.is-part {
  border-color: var(--line-amber);
  background: var(--amber-d);
  color: var(--amber);
}
.detail-gate.is-part .dg-kpi {
  color: var(--amber);
}
.detail-gate.is-unk {
  border-style: dashed;
  color: var(--txt2);
}

/* ---------- 明细视频表里的两列：达标 / 投放 ---------- */
.vt-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--soft);
  color: var(--txt2);
  white-space: nowrap;
}
.vt-state.is-ok {
  color: var(--green);
  border-color: var(--line-green);
  background: var(--green-d);
}
.vt-state.is-off {
  color: var(--txt3);
  background: var(--track);
}
.vt-state.is-bad {
  color: var(--red);
  border-color: var(--line-red);
  background: var(--red-d);
}
.vt-state.is-warn {
  color: var(--amber);
  border-color: var(--line-amber);
  background: var(--amber-d);
}
.vt-ads {
  font-size: 11.5px;
  color: var(--txt3);
  white-space: nowrap;
}
.vt-ads .linkbtn {
  font-size: 11.5px;
  color: var(--amber);
}
/* §98：链接列里的角标，跟在链接后面；剪辑师那两列表也会用到，所以要跟行高对齐 */
.vt-link {
  margin-left: 6px;
  vertical-align: middle;
  cursor: help;
}

/* 全部关完之后的那条引导：绿底，只在「在投 0 条」时出现 */
.detail-guide {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 2px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-brand);
  background: var(--brand-d);
  font-size: 12.5px;
  color: var(--txt2);
}
.detail-guide b {
  color: var(--brand);
}
.detail-guide .sp {
  flex: 1;
}

/* ---------- v5 表格（明细里带播放/达标/投放三列）：长标题与长链接都要截断 ---------- */
.mask .tbl.v5 td.cap {
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mask .tbl.v5 td.link {
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 五列挤在 760px 的弹窗里，必须固定列宽，否则浏览器会把「播放」撑开、把「投放」挤出可视区 */
.mask .tbl.v5 {
  table-layout: fixed;
}
.mask .tbl.v5 th:nth-child(1) {
  width: 24%;
}
.mask .tbl.v5 th:nth-child(2) {
  width: 30%;
}
.mask .tbl.v5 th:nth-child(3) {
  width: 16%;
  white-space: nowrap;
}
.mask .tbl.v5 th:nth-child(4) {
  width: 15%;
}
.mask .tbl.v5 th:nth-child(5) {
  width: 15%;
}
.mask .tbl.v5 td.num {
  white-space: nowrap;
}

/* 「关闭这条」沿用 .linkbtn 的文字按钮样式，但颜色要跟「投放」这件事对齐（琥珀=动手关） */
.mask .tbl.v5 [data-v-act="v-off"] {
  color: var(--amber);
  font-weight: 600;
}
.mask .tbl.v5 [data-v-act="v-off"]:hover {
  text-decoration: underline;
}

/* ---------- C2.240：条数多的任务用比例条，不再按条画方块 ----------
   一条任务可能要 15 条链接，格子只有 176px；按条画会挤掉「4/15 达标」这句话。
   比例条固定 46px 宽，条数再多也不改变卡片高度与换行（这才是「不错位」的关键）。 */
.mx-gate-bar {
  display: inline-flex;
  width: 54px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 2px;
  overflow: hidden;
  background: var(--track);
  box-shadow: inset 0 0 0 1px var(--line2);
}
.mx-gate-bar i {
  display: block;
  height: 100%;
  background: var(--track);
}
.mx-gate-bar i.ok {
  background: var(--green);
}
.mx-gate-bar i.bad {
  background: var(--red);
  opacity: 0.8;
}
.mx-gate-bar i.off {
  background: var(--line3);
  opacity: 0.6;
}

/* ---------- 明细：条数多时表格自己滚，表头吸顶 ----------
   15 条链接一行一个，不滚动就会把弹窗撑到屏幕外；吸顶让「达标 / 投放」两列始终可见。 */
#dt-videos {
  max-height: min(56vh, 540px);
  overflow: auto;
}
#dt-videos .tbl thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--line);
}