/* ==========================================================================
   THE TELEMETRY BAND
   Signature element. A live atmospheric readout pinned above the header.

   Design intent: this is an instrument face, not a ticker. It does not
   scroll, flash, or animate for attention. Values settle once on load and
   then hold. The only motion is the digit roll on refresh, which is the
   honest signal that the number changed.
   ========================================================================== */

.gt-telemetry {
  background: var(--gt-abyssal-sunk);
  color: var(--gt-bone);
  border-bottom: var(--gt-hairline) solid var(--gt-rule-on-dark);
  position: relative;
  z-index: var(--gt-z-band);
  font-family: var(--gt-font-mono);
  font-size: var(--gt-text-xs);
  letter-spacing: var(--gt-tracking-mono);
  --gt-ground: var(--gt-abyssal-sunk);
}

.gt-telemetry__inner {
  max-width: var(--gt-container);
  margin-inline: auto;
  padding: var(--gt-s3) var(--gt-gutter);
  display: flex;
  align-items: center;
  gap: var(--gt-s6);
  min-height: 40px;
}

/* --- Source label --------------------------------------------------------- */

.gt-telemetry__source {
  display: flex;
  align-items: center;
  gap: var(--gt-s2);
  color: var(--gt-ink-faint);
  text-transform: uppercase;
  font-size: var(--gt-text-2xs);
  flex: none;
}

/* Live indicator. A steady dot when data is fresh from source, hollow when
   the band is serving its cached fallback. State is meaningful, so it is
   encoded in shape as well as colour. */
.gt-telemetry__status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gt-glacial);
  flex: none;
}

.gt-telemetry[data-state="fallback"] .gt-telemetry__status {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--gt-ink-faint);
}

/* --- Readouts ------------------------------------------------------------- */

.gt-telemetry__readouts {
  display: flex;
  align-items: center;
  gap: var(--gt-s6);
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.gt-telemetry__metric {
  display: flex;
  align-items: baseline;
  gap: var(--gt-s2);
  white-space: nowrap;
}

.gt-telemetry__label {
  color: var(--gt-ink-faint);
  text-transform: uppercase;
  font-size: var(--gt-text-2xs);
}

.gt-telemetry__value {
  color: var(--gt-bone);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: var(--gt-text-xs);
}

.gt-telemetry__unit {
  color: var(--gt-ink-faint);
  font-size: var(--gt-text-2xs);
}

/* Delta arrow. Rising values are the norm in this dataset, so the arrow is
   informational rather than alarming — solar, not red. */
.gt-telemetry__delta {
  color: var(--gt-solar);
  font-size: var(--gt-text-2xs);
  font-variant-numeric: tabular-nums;
}

.gt-telemetry__delta[data-direction="down"] { color: var(--gt-glacial); }

/* --- Tick scale ----------------------------------------------------------
   A calibration rule running the full width beneath the readouts. Purely
   structural: it makes the band read as a measured instrument face. Hidden
   from assistive tech since it carries no information.
-------------------------------------------------------------------------- */

.gt-telemetry__scale {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4px;
  display: flex;
  justify-content: space-between;
  padding-inline: var(--gt-gutter);
  pointer-events: none;
  opacity: 0.5;
}

.gt-telemetry__scale span {
  width: var(--gt-hairline);
  height: 3px;
  background: var(--gt-rule-strong);
}

.gt-telemetry__scale span:nth-child(5n + 1) { height: 4px; background: var(--gt-glacial); }

/* --- Digit roll ----------------------------------------------------------
   Fires only when a value actually changes. 620ms, single pass, eased out.
-------------------------------------------------------------------------- */

.gt-telemetry__value[data-changed="true"] {
  animation: gt-roll var(--gt-dur-slow) var(--gt-ease-out) 1;
}

@keyframes gt-roll {
  0%   { opacity: 0; transform: translateY(0.45em); }
  100% { opacity: 1; transform: translateY(0); }
}

/* --- Attribution link ----------------------------------------------------
   Radical Transparency is a stated core value. The data source is always
   one click away, and the timestamp is always visible. This is not fine
   print — it is the proof the band is real.
-------------------------------------------------------------------------- */

.gt-telemetry__attr {
  flex: none;
  color: var(--gt-ink-faint);
  font-size: var(--gt-text-2xs);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: var(--gt-hairline) solid transparent;
  transition: color var(--gt-dur-fast) var(--gt-ease),
              border-color var(--gt-dur-fast) var(--gt-ease);
}

.gt-telemetry__attr:hover {
  color: var(--gt-glacial);
  border-bottom-color: var(--gt-glacial);
}

/* --- Responsive ----------------------------------------------------------
   Below 1080px the attribution collapses to an icon-free timestamp; below
   760px only the primary metric survives. The band never wraps to two lines
   and never becomes a horizontal scroller.
-------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .gt-telemetry__inner { gap: var(--gt-s5); }
  .gt-telemetry__readouts { gap: var(--gt-s5); }
  .gt-telemetry__attr { display: none; }
}

@media (max-width: 760px) {
  .gt-telemetry__source span:not(.gt-telemetry__status) { display: none; }
  .gt-telemetry__metric:nth-child(n + 3) { display: none; }
  .gt-telemetry__scale { display: none; }
}

@media (max-width: 480px) {
  .gt-telemetry__metric:nth-child(n + 2) { display: none; }
}