/* ============================================================
   ticker.css — Binance trading-header ticker style for balance widget.
   - Panel 2 / Design Phase A (2026-05-11)
   - Token prefix: --hf-tick-*
   - Reference: Binance spot trading header (#0ECB81 up / #F6465D down,
     tabular nums, ▲/▼ glyph prefix, 0.6s flash on value change).
     Fact pinned in design-phase-a-handoff-2026-05-11.md.
   - Companion: app/templates/_balance_widget.html (inline diff JS).
   - Pinned: feedback_competitive_analysis_no_web_fact_check_drift,
            feedback_legacy_magic_number_inherit_audit_required.
   ============================================================ */

:root {
  /* Binance official spot trading colors */
  --hf-tick-up:        #0ECB81;
  --hf-tick-down:      #F6465D;
  /* Flash background tints — subtle, doesn't overwhelm dark bg */
  --hf-tick-up-bg:     rgba(14, 203, 129, 0.18);
  --hf-tick-down-bg:   rgba(246, 70, 93, 0.18);
  /* Neutral when 24h delta = 0 */
  --hf-tick-flat:      var(--hf-text-3);
  /* Flash timing + easing — sharp attack, soft decay (trader urgency) */
  --hf-tick-flash-duration: 0.6s;
  --hf-tick-flash-easing:   cubic-bezier(0.22, 1, 0.36, 1);
}

/* light fallback — desaturated, same hue rotation */
.light {
  --hf-tick-up-bg:   rgba(14, 203, 129, 0.12);
  --hf-tick-down-bg: rgba(246, 70, 93, 0.12);
}

/* 24h delta cluster — inline next to .bal-num inside .bal-pill */
.bal-tick {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  font-weight: 590;
}
.bal-tick-up   { color: var(--hf-tick-up); }
.bal-tick-down { color: var(--hf-tick-down); }
.bal-tick-flat { color: var(--hf-tick-flat); }

.bal-arrow {
  font-size: 0.72em;
  line-height: 1;
  display: inline-block;
  transform: translateY(-0.5px);
}

.bal-delta-pct {
  font-size: 0.85em;
  opacity: 0.82;
  font-weight: 510;
}

/* Flash animation — value change on htmx swap.
   border-color + background blink, opacity untouched (number readability). */
@keyframes hf-tick-flash-up {
  0%   { background: var(--hf-tick-up-bg);   border-color: var(--hf-tick-up); }
  100% { background: rgba(255,255,255,0.04); border-color: var(--hf-border-2); }
}
@keyframes hf-tick-flash-down {
  0%   { background: var(--hf-tick-down-bg); border-color: var(--hf-tick-down); }
  100% { background: rgba(255,255,255,0.04); border-color: var(--hf-border-2); }
}
.bal-pill.is-flash-up {
  animation: hf-tick-flash-up var(--hf-tick-flash-duration) var(--hf-tick-flash-easing) both;
}
.bal-pill.is-flash-down {
  animation: hf-tick-flash-down var(--hf-tick-flash-duration) var(--hf-tick-flash-easing) both;
}

/* Number readability — width-stable across digit changes */
.bal-pill .bal-num {
  font-variant-numeric: tabular-nums;
}

/* Mobile cascade — hide pct first, then alias (alias already hidden ≤640px in app.css).
   Priority: dot > balance > 24h delta abs > 24h pct > alias */
@media (max-width: 640px) {
  .bal-tick .bal-delta-pct { display: none; }
}
@media (max-width: 420px) {
  .bal-tick .bal-arrow { display: none; }
  .bal-tick { gap: 2px; }
}

/* a11y — reduced motion: replace animation with static outline pulse */
@media (prefers-reduced-motion: reduce) {
  .bal-pill.is-flash-up,
  .bal-pill.is-flash-down {
    animation: none;
  }
  .bal-pill.is-flash-up   { outline: 1px solid var(--hf-tick-up);   outline-offset: -1px; }
  .bal-pill.is-flash-down { outline: 1px solid var(--hf-tick-down); outline-offset: -1px; }
}