/* Lighthouse CI - admin score-badge + deploy-link styling.
 *
 * Plain CSS (no Tailwind utilities) so it renders regardless of what unfold's
 * compiled CSS ships - the same guarantee investor_room/admin.css gives. Loaded
 * site-wide via UNFOLD["STYLES"]; every selector is `lh-`-prefixed so it can
 * never collide with another admin's markup.
 *
 * Score thresholds mirror Lighthouse's own bands: >=90 good (green), 50-89
 * warn (amber), <50 bad (red). Contrast: white text on each fill clears WCAG
 * AA at this size/weight.
 */

.lh-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lh-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: #fff;
  background: #6b7280; /* default / na (grey) */
}

.lh-badge--good {
  background: #16a34a; /* green-600 */
}
.lh-badge--warn {
  background: #d97706; /* amber-600 */
}
.lh-badge--bad {
  background: #dc2626; /* red-600 */
}
.lh-badge--na {
  background: #6b7280; /* gray-500 */
}

.lh-deploy {
  font-size: 12px;
  white-space: nowrap;
}

.lh-link {
  color: rgb(var(--color-primary-600, 138 40 100));
  text-decoration: none;
  font-weight: 500;
}
.lh-link:hover {
  text-decoration: underline;
}
.lh-link:focus-visible {
  outline: 2px solid rgb(var(--color-primary-600, 138 40 100));
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- trend dashboard ------------------------------------------------------ */

.lh-chart-wrap {
  position: relative;
  height: 420px;
  width: 100%;
}