/* Price-trend badge — colored arrow whose hue + opacity encode the 5-tier
   severity stored in `product_trends.band`. Loaded by every template that
   imports the `_partials/trend_badge.html` macro (product detail,
   /trending page).

   Direction convention is buyer-side:
     up   = price climbing  = red    (bad for buyer)
     down = price falling   = green  (deal alert)
   Opacity scales with confidence: _high = full, _low = soft, neutral = faintest.

   Colors are drawn from the same warm-paper palette as the price-mask ink so
   the badge feels native to the cardstock aesthetic — not bright Bootstrap
   red/green. */

.trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
  cursor: help;
}

.trend-badge .trend-arrow {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: inline-block;
}

.trend-badge .trend-pct {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Size variants. `sm` is the inline-with-price default; `lg` is for the
   trending page hero tiles where the arrow needs more presence; `xl` is
   for the product-detail post-it where the arrow IS the headline visual. */
.trend-badge.trend-sm .trend-arrow { font-size: 14px; }
.trend-badge.trend-md .trend-arrow { font-size: 18px; }
.trend-badge.trend-lg .trend-arrow { font-size: 26px; }
.trend-badge.trend-xl .trend-arrow { font-size: 44px; line-height: 0.9; }
.trend-badge.trend-md .trend-pct   { font-size: 12px; }
.trend-badge.trend-lg .trend-pct   { font-size: 14px; }
.trend-badge.trend-xl .trend-pct   { font-size: 16px; font-weight: 700; }

/* ── Severity coloring ───────────────────────────────────────────────
   `_high` bands use full saturation + 1.0 opacity so the signal pops;
   `_low` bands use the same ink at 0.55 opacity so the eye reads
   "trending but easy". Neutral lives in ink-3 (the same caption color
   used by "No active listings") so it disappears into the page texture. */

.trend-badge.trend-up_high .trend-arrow,
.trend-badge.trend-up_high .trend-pct {
  color: #b94a3b;          /* warm brick red — sits in the burnt-sienna family */
  opacity: 1.00;
}
.trend-badge.trend-up_low .trend-arrow,
.trend-badge.trend-up_low .trend-pct {
  color: #b94a3b;
  opacity: 0.55;
}
.trend-badge.trend-down_low .trend-arrow,
.trend-badge.trend-down_low .trend-pct {
  color: #3e7d2e;          /* deep leaf green — buyer-friendly, not neon */
  opacity: 0.55;
}
.trend-badge.trend-down_high .trend-arrow,
.trend-badge.trend-down_high .trend-pct {
  color: #3e7d2e;
  opacity: 1.00;
}
.trend-badge.trend-neutral .trend-arrow,
.trend-badge.trend-neutral .trend-pct {
  color: var(--ink-3, #9b8e76);
  opacity: 0.55;
}

/* Hover lifts opacity to full so the tooltip-curious mouse user gets
   stronger visual feedback (alongside the `title=` tooltip). */
.trend-badge:hover .trend-arrow,
.trend-badge:hover .trend-pct {
  opacity: 1.00;
}

/* ── 14-day window highlight on the price-history sparklines ────────
   The badge summarizes the last 14 days of daily medians; the surrounding
   chart on product detail spans 30 days. Hovering the badge fades in a
   soft warm wash over the rightmost 14-day slice of every spark chart
   on the page so the eye can SEE which slice the badge is reading. The
   rect's x + width are set by the painter JS; visibility is purely the
   class-toggle below. */
.spark-window-14d {
  fill: rgba(122, 47, 23, 0.10);  /* warm umber — same family as the price ink */
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
body.trend-window-active .spark-window-14d { opacity: 1; }