/* History tick bars and alignment */
.history-row{display:flex;flex-direction:column;padding:4px 4px 12px;margin-bottom:2px;}
.history-row .label{font-size:.7rem;font-weight:600;letter-spacing:.5px;color:#9aa3ab;margin-bottom:4px;display:flex;justify-content:space-between;}
.history-row .ticks{display:grid;grid-template-columns:repeat(60,1fr);gap:2px;}
.tick{width:100%;aspect-ratio:10/14;border-radius:2px;background:#1e293b;position:relative;}
.tick.up{background:linear-gradient(180deg,#22c55e,#16a34a);} 
.tick.down{background:linear-gradient(180deg,#ef4444,#dc2626);} 
.tick.reboot{background:linear-gradient(180deg,#f59e0b,#d97706);} 
.tick.na{background:#1e293b;opacity:.3;}
.tick.pending{background:repeating-linear-gradient(45deg,#64748b,#64748b 4px,#475569 4px,#475569 8px);animation:pulse 1.2s linear infinite;}
@keyframes pulse{0%{opacity:.4}50%{opacity:1}100%{opacity:.4}}

/* Inline small history bars inside list items */
.inline-history{display:flex;gap:2px;align-items:center;margin-top:2px;}
.inline-history .tick{width:6px;aspect-ratio:1/1;border-radius:1px;}
.inline-history .tick.na{opacity:.15;}

@media (max-width:680px){
  .history-row .ticks{grid-template-columns:repeat(40,1fr);} /* fewer columns on narrow devices for perf */
}