/* Kleto Pulse Traffic classes panel (DESIGN-METRIC-PRIORITY section 17,
   2026-10-25). Mobile first: one column at 390px, wraps at 320px with no
   horizontal scroll. Colors reuse the Traffic mix strip groups
   (.mix__seg--*, .mix__dot--*); verification tiers reuse the same tokens at
   lower strength, so a claim never looks like a fact. */
.tcx__cov { margin: 0 0 12px; font-size: 13px; color: var(--dim); height: calc(2 * 1.4em); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tcx__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 12px; }
@media (min-width: 560px) { .tcx__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tcx__hero { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--panel); min-width: 0; }
.tcx__hero--live { border-left: 3px solid var(--accent); background: var(--accent-tint); }
.tcx__hk { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--text); font-weight: 600; height: 18px; line-height: 18px; white-space: nowrap; overflow: hidden; }
.tcx__hv { margin: 4px 0 2px; font-size: 28px; height: 32px; line-height: 32px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcx__hs { margin: 0; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; height: calc(2 * 1.4em); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tcx__soft { color: var(--faint); font-weight: 400; }
.tcx__rows { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.tcx__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 2px 8px; font-size: 13px; }
.tcx__row--live { padding: 6px 8px; margin: 0 -8px; border-radius: var(--radius); background: var(--accent-tint); }
.tcx__k { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.tcx__v { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.tcx__split { grid-column: 2 / 4; display: flex; height: 4px; border-radius: 999px; overflow: hidden; background: var(--border); }
.tcx__tier { display: block; height: 100%; min-width: 2px; }
.tcx__tier + .tcx__tier { border-left: 2px solid var(--card); }
.tcx__tier--verified { background: var(--text); }
.tcx__tier--declared { background: var(--dim); }
.tcx__tier--inferred { background: var(--faint); }
.tcx__tier--unknown { background: var(--border); }
.tcx__words { grid-column: 2 / 4; color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.tcx__tw--verified { color: var(--text); font-weight: 600; }
.tcx__tw--declared, .tcx__tw--inferred { color: var(--dim); font-style: italic; }
.tcx__tw--failed { color: var(--warn); }
.tcx__sec { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.tcx__note { font-weight: 400; color: var(--faint); font-size: 12px; }
.tcx__buckets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
@media (min-width: 720px) { .tcx__buckets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tcx__bucket { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; }
.tcx__bk { color: var(--text); grid-column: 1 / 3; }
.tcx__bv { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.tcx__bs { color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; }
.tcx__bucket--claim_failed .tcx__bk { color: var(--warn); }
.tcx__charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; }
@media (min-width: 900px) { .tcx__charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tcx__chart { min-width: 0; }
.tcx__alist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.tcx__agent { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; }
.tcx__an { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcx__ac { color: var(--faint); font-size: 12px; text-align: right; }
.tcx__aw { grid-column: 1 / 3; color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.tcx__stable { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tcx__srow.tcx__shead { display: none; }
.tcx__srow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.tcx__sn { grid-column: 1 / 3; display: grid; gap: 4px; min-width: 0; }
.tcx__sn a { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcx__sbar { display: flex; height: 4px; border-radius: 999px; overflow: hidden; background: var(--border); }
.tcx__sbar > span { display: block; height: 100%; }
.tcx__sv { color: var(--text); font-variant-numeric: tabular-nums; }
.tcx__sv::before { content: attr(data-k) " "; color: var(--faint); font-size: 12px; }
.tcx__sv--live { font-weight: 600; }
@media (min-width: 720px) {
  .tcx__srow.tcx__shead { display: grid; color: var(--faint); font-size: 12px; border-top: 0; padding-bottom: 0; }
  .tcx__srow { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); align-items: center; }
  .tcx__sn { grid-column: auto; }
  .tcx__sv { text-align: right; }
  .tcx__sv::before { content: none; }
  .tcx__shead > span:not(:first-child) { text-align: right; }
}

/* Fixed height summary (2026-10-25, sites/ops/e2e/layout-shift.spec.mjs):
   the coverage line, the hero label, value and subline, the bar and the
   footer line keep the same height in the skeleton and after hydration, at
   every width, so the cards beneath the panel never move. Text that does
   not fit is clamped and never grows its box. */
.tcx .mix__bar { height: 10px; }
.tcx__foot { margin: 10px 0 0; height: 20px; line-height: 20px; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcx__more { margin: 10px 0 0; border-top: 1px solid var(--border); }
.tcx__more-s { cursor: pointer; padding: 10px 0 0; height: 34px; box-sizing: border-box; font-size: 13px; font-weight: 600; color: var(--text); }
.tcx__more:not([open]) .tcx__detail { display: none; }