:root {
  --foundation-font-mono: "Geist Mono", "SF Mono", "Menlo", monospace;
  --foundation-radius: 8px;
  --foundation-focus: #2dd4bf;
  --foundation-fresh: #2f8f78;
  --foundation-degraded: #b7791f;
  --foundation-stale: #9a6700;
  --foundation-failed: #b23a33;
}

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--foundation-focus);
  outline-offset: 3px;
}

.data-health {
  display: grid;
  grid-template-columns: minmax(112px, auto) minmax(0, 1fr);
  gap: 12px 16px;
  align-items: center;
  width: 100%;
  margin: 0 0 16px;
  border: 1px solid rgba(249, 250, 251, .16);
  border-left: 4px solid var(--data-health-tone, var(--foundation-stale));
  border-radius: var(--foundation-radius);
  padding: 12px 14px;
  color: #f9fafb;
  background: rgba(17, 24, 39, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.data-health[data-health-state="fresh"] { --data-health-tone: var(--foundation-fresh); }
.data-health[data-health-state="degraded"] { --data-health-tone: var(--foundation-degraded); }
.data-health[data-health-state="stale"] { --data-health-tone: var(--foundation-stale); }
.data-health[data-health-state="failed"] { --data-health-tone: var(--foundation-failed); }

.data-health__state {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--data-health-tone) 72%, white 12%);
  border-radius: 999px;
  padding: 7px 10px;
  color: #fff;
  background: color-mix(in srgb, var(--data-health-tone) 68%, transparent);
  font: 800 11px/1 var(--foundation-font-mono);
  text-transform: uppercase;
}

.data-health__copy {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  gap: 6px 12px;
  align-items: baseline;
}

.data-health__time {
  color: #f9fafb;
  font: 750 12px/1.45 var(--foundation-font-mono);
  overflow-wrap: anywhere;
}

.data-health__reason {
  min-width: 0;
  color: rgba(249, 250, 251, .7);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

body[data-ui-shell="signal-deck"] :where(
  .commodity-grid,
  .financialjuice-feed-grid,
  .indicator-grid,
  .paper-grid,
  .metric-grid
) > * {
  min-width: 0;
}

body[data-ui-shell="signal-deck"] :where(.chart-slot, .echart) {
  min-width: 0;
  max-width: 100%;
}

body[data-page] .hero {
  overflow: hidden;
}

body[data-page] .hero::after {
  display: none;
}

body[data-page] .tooltip-card {
  display: none;
}

body[data-page] .tooltip-wrap:hover .tooltip-card,
body[data-page] .tooltip-wrap:focus-within .tooltip-card {
  display: block;
}

@media (max-width: 640px) {
  .data-health {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 12px;
  }

  .data-health__copy {
    display: grid;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}