/* Animated score history: bars rise from 0; arrows move up when improving, down when dropping. */

/* ---------- Trend card (results screen) ---------- */
.rp-trend { padding: 22px 22px 18px; margin-bottom: 24px; }
.rp-trend[hidden], .hist-dash[hidden] { display: none; }

.trend-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.trend-title { margin: 0; font-size: 11px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--scan); }
.trend-sub { margin-top: 6px; font-size: 13px; color: var(--text-secondary); overflow-wrap: anywhere; }

.trend-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-full);
  border: 1px solid currentColor; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.trend-chip svg { width: 14px; height: 14px; }
.trend-chip.up { color: var(--good); background: var(--good-dim); }
.trend-chip.down { color: var(--danger); background: var(--danger-dim); }
.trend-chip.flat { color: var(--muted); background: rgba(255,255,255,0.04); }
.trend-chip.up svg { animation: nudge-up 1.6s ease-in-out infinite; }
.trend-chip.down svg { animation: nudge-down 1.6s ease-in-out infinite; }

@keyframes nudge-up { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-3px); } }
@keyframes nudge-down { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }

.trend-bars {
  margin-top: 20px; height: 210px;
  display: flex; align-items: stretch; gap: clamp(6px, 1.6vw, 14px);
}
.trend-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.trend-val { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); opacity: 0; transition: opacity 0.4s ease; transition-delay: calc(var(--i, 0) * 70ms + 500ms); }
.trend-col.is-latest .trend-val { color: var(--text); font-weight: 700; }
.is-in .trend-val { opacity: 1; }
.trend-track { flex: 1; width: 100%; max-width: 54px; display: flex; align-items: flex-end; background: rgba(255,255,255,0.035); border-radius: 8px; overflow: hidden; }
.trend-bar {
  width: 100%; height: 0; border-radius: 8px 8px 0 0;
  background: var(--c, var(--scan));
  transition: height 0.9s cubic-bezier(0.2, 0.9, 0.25, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.is-in .trend-bar { height: var(--h); }
.trend-col.is-latest .trend-bar { box-shadow: 0 0 22px -2px var(--c); }
.trend-date { font-size: 11px; color: var(--muted); white-space: nowrap; }
.trend-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

.trend-bar.good, .mini-bar.good { --c: var(--good); }
.trend-bar.warn, .mini-bar.warn { --c: var(--warn); }
.trend-bar.danger, .mini-bar.danger { --c: var(--danger); }

/* ---------- Dashboard (start screen) ---------- */
.hist-dash { margin: 28px 0 32px; }
.hist-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hist-title { margin: 0; font-size: 11px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
.hist-all { background: transparent; border: 0; color: var(--scan); font-size: 13px; min-height: 44px; padding: 0 4px; }
.hist-all:hover { text-decoration: underline; }
.hist-list { display: flex; flex-direction: column; gap: 10px; }

.hist-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "host bars score" "host chip chip";
  align-items: center; column-gap: 14px; row-gap: 8px; width: 100%; text-align: left;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--panel-glass); color: var(--text); min-height: 44px;
  transition: border-color var(--duration-fast), transform var(--duration-fast);
}
.hist-row:hover { border-color: var(--border-cyan); transform: translateY(-1px); }
.hist-host { grid-area: host; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hist-name { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-meta { font-size: 12px; color: var(--muted); }
.mini-bars { grid-area: bars; display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.mini-bar { width: 6px; height: 0; border-radius: 3px 3px 0 0; background: var(--c); transition: height 0.8s cubic-bezier(0.2, 0.9, 0.25, 1); transition-delay: calc(var(--i, 0) * 60ms); }
.is-in .mini-bar { height: var(--h); }
.hist-score { grid-area: score; font-size: 26px; font-weight: 700; line-height: 1; text-align: right; }
.hist-score.good { color: var(--good); } .hist-score.warn { color: var(--warn); } .hist-score.danger { color: var(--danger); }
.hist-row .trend-chip { grid-area: chip; justify-self: end; padding: 4px 10px; font-size: 11px; }

@media (min-width: 640px) {
  .hist-row { grid-template-columns: minmax(0, 1fr) auto 56px auto; grid-template-areas: "host bars score chip"; }
  .hist-row .trend-chip { justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .trend-bar, .mini-bar { transition: none; }
  .trend-chip svg { animation: none !important; }
}

@media print {
  .hist-dash { display: none !important; }
  .trend-bar, .mini-bar { height: var(--h) !important; transition: none !important; }
  .trend-val { opacity: 1 !important; }
}