/* ============ Suy giảm tín hiệu (Signal Decay Monitor) ============
 *
 * BA MÀU, KHÔNG PHẢI HAI. `unknown` có màu riêng (hổ phách) chứ không mượn
 * màu của `stable` (xanh) hay `decaying` (đỏ). Đây không phải lựa chọn thẩm
 * mỹ: hai màu buộc "chưa đo được" phải trông giống một trong hai câu trả lời
 * đã đo, và nó sẽ luôn trông giống câu dễ chịu hơn.
 *
 * Hổ phách cố ý KHÔNG dễ chịu bằng xanh và KHÔNG báo động bằng đỏ — đúng trạng
 * thái "chưa biết": không phải tin tốt, cũng chưa phải tin xấu.
 */

.dc-h {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  color: var(--dim); border: 1px solid var(--border); background: var(--bg);
  padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle;
}
.dc-sub { font-size: 12.5px; color: var(--dim); margin: 2px 0 14px; }
.dc-tri { display: inline-block; }
.dc-tri b { font-variant-numeric: tabular-nums; }

/* Ba màu dùng chung cho chip, chấm chú giải, viền thẻ, con số tóm tắt */
.v-decaying { color: var(--short); }
.v-unknown  { color: var(--amber); }
.v-stable   { color: var(--long); }

/* ---------- Băng rôn bề rộng dữ liệu ---------- */
.dc-gate {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 12px; background: var(--bg);
}
.dc-gate.blocked { border-color: rgba(240,185,11,.42); background: rgba(240,185,11,.05); }
.dc-gate.ok { border-color: rgba(22,199,132,.35); background: var(--long-bg); }
.dc-gate-h {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 12px; margin-bottom: 9px;
}
.dc-gate-tag {
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
  color: var(--amber);
}
.dc-gate.ok .dc-gate-tag { color: var(--long); }
.dc-gate-n { margin-left: auto; font-size: 13px; font-weight: 600; }
.dc-bar {
  height: 7px; border-radius: 999px; background: var(--surface2);
  overflow: hidden; border: 1px solid var(--border-soft);
}
.dc-bar i { display: block; height: 100%; background: var(--amber); border-radius: 999px; }
.dc-gate.ok .dc-bar i { background: var(--long); }
.dc-gate-p { font-size: 12px; color: var(--dim); margin-top: 7px; }
.dc-gate-x {
  font-size: 12.5px; color: var(--text); margin-top: 9px;
  padding-top: 9px; border-top: 1px solid var(--border-soft); line-height: 1.6;
}
.dc-gate-x b { color: var(--amber); }

/* ---------- Bộ test ---------- */
.dc-fam {
  display: grid; gap: 8px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

/* ---------- Ô số dùng chung ---------- */
.dc-cell {
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--bg); padding: 9px 11px; min-width: 0;
}
.dc-cl { font-size: 10.5px; letter-spacing: .04em; color: var(--faint); text-transform: uppercase; }
.dc-cv {
  font-size: 16px; font-weight: 700; margin-top: 3px;
  overflow-wrap: anywhere;
}
.dc-cn { font-size: 11px; color: var(--dim); margin-top: 3px; line-height: 1.45; }
.dc-cell.muted .dc-cv { color: var(--wait); }
.dc-cell.muted .dc-cn { color: var(--amber); }
.dc-cell.hot .dc-cv { color: var(--short); }
.dc-cell.need { border-color: rgba(240,185,11,.3); background: rgba(240,185,11,.04); }

/* "chưa tính được" KHÔNG được trông giống một con số, và tuyệt đối không được
   trông giống một ô trống — ô trống thì người đọc tự điền nghĩa dễ chịu. */
.dc-na {
  font-size: 13px; font-weight: 600; font-style: italic;
  color: var(--amber); letter-spacing: 0;
}

/* ---------- Chú giải ba màu ---------- */
.dc-legend {
  display: grid; gap: 6px; margin-bottom: 12px;
  font-size: 12px; color: var(--dim); line-height: 1.5;
}
.dc-legend i {
  display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  background: currentColor; margin-right: 5px; vertical-align: baseline;
}
.dc-legend b { color: var(--text); }

/* ---------- Một analyzer ---------- */
.dc-list { display: grid; gap: 10px; }
.dc-f {
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 13px; background: var(--surface2);
}
.dc-f.v-unknown  { border-left-color: var(--amber); }
.dc-f.v-decaying { border-left-color: var(--short); }
.dc-f.v-stable   { border-left-color: var(--long); }
.dc-fh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dc-fid { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.dc-chip {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 999px; border: 1px solid; margin-left: auto;
  white-space: nowrap;
}
.dc-chip.v-unknown  { border-color: rgba(240,185,11,.45); background: rgba(240,185,11,.09); }
.dc-chip.v-decaying { border-color: rgba(234,57,67,.45); background: var(--short-bg); }
.dc-chip.v-stable   { border-color: rgba(22,199,132,.4); background: var(--long-bg); }
.dc-why { font-size: 12.5px; color: var(--dim); margin: 8px 0 10px; line-height: 1.55; }
.dc-why b, .dc-act b { color: var(--text); }
.dc-act { font-size: 12.5px; color: var(--dim); margin-top: 10px; }
.dc-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}
.dc-block {
  margin-top: 10px; padding: 9px 11px; font-size: 12.5px; line-height: 1.6;
  border: 1px solid rgba(240,185,11,.35); border-radius: var(--radius-sm);
  background: rgba(240,185,11,.06); color: var(--text);
}
.dc-block b { color: var(--amber); }
.dc-block code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  background: var(--bg); padding: 1px 4px; border-radius: 4px;
}

/* ---------- Chân ---------- */
.dc-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft);
  font-size: 11.5px; line-height: 1.6;
}
.dc-foot .dim { min-width: 0; overflow-wrap: anywhere; }
.dc-run { margin-left: auto; font-size: 12px; padding: 7px 14px; white-space: nowrap; }
.dc-run:disabled { opacity: .55; cursor: default; }
.dc-run-msg { font-size: 11.5px; color: var(--short); overflow-wrap: anywhere; }
.dc-empty {
  border: 1px solid rgba(240,185,11,.4); background: rgba(240,185,11,.05);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; line-height: 1.6;
}
.dc-empty b { color: var(--amber); }

/* ---------- 375px: không cuộn ngang ----------
   Mọi lưới đã dùng minmax(min(Xpx,100%),1fr) nên tự sập về một cột; ở đây chỉ
   cần nới chỗ cho con số dài và bỏ `margin-left:auto` khiến chip/nút bị đẩy
   tràn khi hàng không đủ rộng. */
@media (max-width: 560px) {
  .dc-gate-n { margin-left: 0; width: 100%; }
  .dc-chip { margin-left: 0; }
  .dc-run { margin-left: 0; width: 100%; }
  .dc-cv { font-size: 15px; }
  .dc-sub .dc-tri { display: block; margin-top: 2px; }
}