/* Kleto Pulse uptime tracker (DESIGN-METRIC-PRIORITY section 15,
   2026-10-20). The search engine row's box model: one fixed 18px line, so
   hydration never changes the card height. The strip flexes: its 24 bars
   narrow before the live word or the percentage ever clip. */
.ut-row { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--panel); }
.ut-row .metric__k { margin: 0 0 4px; }
.ut-row__v {
  margin: 0; height: 18px; line-height: 18px; overflow: hidden; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; display: flex; align-items: center; gap: 10px;
  font-variant-numeric: tabular-nums slashed-zero;
}
.ut-row__v .skel { height: 0.8em; }
.ut-row__mut { color: var(--faint); }
.ut-live { flex: none; font-weight: 700; }
.ut-live span { font-size: 9px; vertical-align: 1px; }
.ut-live--up { color: var(--up); }
.ut-live--down { color: var(--down); }
.ut-pct { flex: none; margin-left: auto; font-weight: 700; }

.ut-strip { flex: 1 1 auto; min-width: 0; max-width: 168px; height: 14px; display: flex; align-items: stretch; gap: 2px; }
.ut-bar { flex: 1 1 0; min-width: 2px; border-radius: 1px; background: var(--border); }
.ut-bar--up { background: var(--up); opacity: 0.85; }
.ut-bar--warn { background: var(--warn); }
.ut-bar--down { background: var(--down); }
.ut-bar--none { background: var(--panel); }