/* docs/DESIGN_SYSTEM_V2.md Section 5: the Hero Panel -- no card
   chrome, always the first visual element on a page, always
   full-width (no grid/column rules needed here -- "never reduced at
   any breakpoint" falls out of not being part of any grid at all). */

.hero-panel {
  position: relative;
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
}

.hero-panel__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
}

/* Phase G.3 signature move: a very low-opacity fine-grid background
   behind the value only, evoking blueprint/instrumentation --
   docs/DESIGN_VISION.md Section 3. Opacity deliberately low enough to
   never compete with the numeral's own legibility -- confirmed
   in-browser (Stage 8), not asserted safe from the value alone.
   Positioned via the value element itself (not the whole panel) so it
   reads as "behind this specific number," not a page-wide texture. */
.hero-panel__value {
  position: relative;
  /* Fix (visual QA, Stage 8): a block-level element is full-width by
     default, which stretched the grid texture below far beyond the
     digits themselves, reading as a big empty grid rather than a
     watermark behind the number. max-content keeps this a block box
     (unlike inline-block, no baseline-alignment quirk with neighbouring
     block siblings) but sized to its own content, so the background
     only ever spans exactly as wide as the number it sits behind. */
  width: max-content;
  max-width: 100%;
  font-family: var(--font-family-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letter-spacing-data);
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-top: var(--space-1);
  padding-right: var(--space-4);
  background-image:
    linear-gradient(var(--color-border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border-subtle) 1px, transparent 1px);
  background-size: 12px 12px;
  background-position: left center;
  background-repeat: repeat;
}

/* Reuses .stat-tile__trend's own classes (trendIndicatorSpec is
   shared) -- no separate trend styling needed here. */
.hero-panel .stat-tile__trend {
  margin-top: var(--space-2);
  font-size: var(--font-size-base);
}

.hero-panel__live-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
}

.hero-panel__live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-live-accent);
  animation: hero-panel-pulse var(--duration-pulse) var(--ease-standard) infinite;
}

.hero-panel__live-dot--stale {
  animation: none;
  opacity: 0.35;
}

@keyframes hero-panel-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-panel__live-dot {
    animation: none;
  }
}