/* ============================================================
   THE RECOMMENDATION FLIP — signal / alarm layer.
   Aggressive, not neon: burgundy stays the base, a hot coral-red
   and a volt yellow carry the urgency. Numbers pulse like a
   live reading instead of sitting still like a headline.
   ============================================================ */

.flip-page {
  --hot: #FF5470;
  --hot-soft: #FF8AA0;
  --volt: #F4C93B;
  --volt-soft: #FFE08A;
  --flat: #6B7280;
}

/* ---------- header + hero ---------- */

.flip-page .article-tag {
  color: var(--hot-soft);
  border-color: rgba(255, 84, 112, 0.45);
  background: linear-gradient(100deg, rgba(255, 84, 112, 0.18), rgba(244, 201, 59, 0.05));
  box-shadow: 0 0 26px rgba(255, 84, 112, 0.18);
}
.flip-page .article-head h1 em {
  color: var(--hot-soft);
  text-shadow: 0 0 18px rgba(255, 84, 112, 0.8), 0 0 60px rgba(255, 84, 112, 0.35);
}
.flip-page .beam-halo { background: linear-gradient(90deg, transparent 10%, rgba(255, 84, 112, 0.16) 50%, transparent 90%); }
.flip-page .fog-a { background: radial-gradient(closest-side, rgba(255, 84, 112, 0.1), transparent 70%); }
.flip-page .fog-b { background: radial-gradient(closest-side, rgba(244, 201, 59, 0.07), transparent 70%); }

/* ---------- pulse field (CSS-only signal blips, no JS) ---------- */

.pulse-field { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.pulse-field i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 0 0 rgba(255, 84, 112, 0.5);
  animation: ping-out 3.4s ease-out infinite;
}
.pulse-field i:nth-child(1) { top: 18%; left: 10%; animation-delay: 0s; }
.pulse-field i:nth-child(2) { top: 62%; left: 88%; animation-delay: 0.8s; background: var(--volt); box-shadow: 0 0 0 0 rgba(244, 201, 59, 0.5); }
.pulse-field i:nth-child(3) { top: 82%; left: 22%; animation-delay: 1.6s; }
.pulse-field i:nth-child(4) { top: 8%; left: 74%; animation-delay: 2.3s; background: var(--volt); box-shadow: 0 0 0 0 rgba(244, 201, 59, 0.5); }
.pulse-field i:nth-child(5) { top: 44%; left: 52%; animation-delay: 3s; }
@keyframes ping-out {
  0%   { transform: scale(1); opacity: 0.9; box-shadow: 0 0 0 0 currentColor; }
  70%  { opacity: 0; }
  100% { transform: scale(1); opacity: 0; box-shadow: 0 0 0 26px rgba(255, 84, 112, 0); }
}
@media (prefers-reduced-motion: reduce) { .pulse-field { display: none; } }

/* ---------- links, pull quote, checklist ---------- */

.flip-page .article-body a:not(.btn) {
  color: var(--hot-soft);
  border-bottom: 1px solid rgba(255, 84, 112, 0.4);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.flip-page .article-body a:not(.btn):hover { color: var(--volt-soft); border-bottom-color: var(--volt-soft); }
.flip-page .sources a { color: var(--hot-soft); }

.flip-page .pull { border-left-color: var(--hot); background: linear-gradient(100deg, rgba(255, 84, 112, 0.1), transparent 70%); font-weight: 600; }
.flip-page .check-list li::before { color: var(--hot-soft); }
.flip-page .steps > li::before {
  background: linear-gradient(140deg, rgba(255, 84, 112, 0.22), rgba(244, 201, 59, 0.05));
  border-color: rgba(255, 84, 112, 0.4); color: var(--hot-soft);
}

.flip-page .article-body h2 {
  font-weight: 800; letter-spacing: -0.03em;
}
.flip-page .fig-title { color: var(--hot-soft); }
.flip-page .lead-para { font-size: 20.5px; }

/* ---------- data blocks ---------- */

.fig {
  margin: 34px 0 36px;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 84, 112, 0.045), rgba(244, 201, 59, 0.012));
  padding: 26px 28px 22px;
}
.fig-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.fig-title { font-family: var(--font-head); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.fig-src { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.13em; color: var(--text-faint); }
.fig-src a { color: var(--text-faint) !important; border-bottom-color: rgba(255, 255, 255, 0.18) !important; }
.fig-src a:hover { color: var(--hot-soft) !important; }
.fig-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-dim); }

.gap-fig { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gap-card {
  border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px;
  background: rgba(0, 0, 0, 0.22); text-align: center;
}
.gap-card.is-lost { border-color: rgba(255, 84, 112, 0.35); background: rgba(255, 84, 112, 0.06); }
.gap-card b { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(40px, 7vw, 64px); letter-spacing: -0.045em; line-height: 1; color: var(--volt-soft); margin-bottom: 10px; }
.gap-card.is-lost b { color: var(--hot-soft); }
.gap-card p { font-size: 14.5px; color: var(--text-dim); }
.gap-card .g-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; color: var(--text-faint); margin-bottom: 14px; }

.trend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.trend-cell { border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px; background: rgba(0, 0, 0, 0.2); }
.trend-cell b { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.03em; color: var(--hot-soft); line-height: 1; margin-bottom: 8px; }
.trend-cell code { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--text); background: none; margin-bottom: 6px; word-break: break-word; text-transform: uppercase; }
.trend-cell span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--text-faint); }
.trend-cell.is-flat { opacity: 0.7; }
.trend-cell.is-flat b { color: var(--flat); }

/* pulsing headline numbers — a live reading, not a static stat */
.pulse-num { position: relative; display: inline-block; animation: num-pulse 2.6s ease-in-out infinite; }
@keyframes num-pulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 0 transparent; }
  50% { opacity: 0.82; text-shadow: 0 0 24px currentColor; }
}
@media (prefers-reduced-motion: reduce) { .pulse-num { animation: none; } }

/* ---------- warn box: hot, sharper than the site default ---------- */

.flip-page .warn-box { border-color: rgba(255, 84, 112, 0.4); background: rgba(255, 84, 112, 0.07); }
.flip-page .warn-label { color: var(--hot-soft); }

/* ---------- CTA card ---------- */

.flip-page .cta-card { border-color: rgba(255, 84, 112, 0.3); background: linear-gradient(160deg, rgba(255, 84, 112, 0.07), rgba(244, 201, 59, 0.02)); }

/* ---------- adaptive ---------- */

@media (max-width: 860px) {
  .trend { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .fig { padding: 20px 18px 18px; margin: 26px 0 28px; }
  .gap-fig { grid-template-columns: 1fr; }
  .trend { grid-template-columns: 1fr; }
}