/* mix-versus.css · the /versus/ lander system (Mix spec #s4, phase V4).
 * Generated pages: scripts/sync-versus.mjs. Class prefix: mxv- (this sheet owns
 * every mxv- rule; nothing here leaks into other pages).
 *
 * Laws honored here:
 *  - Warm tokens canvas everywhere; obsidian ONLY inside the product windows
 *    (.mxv-board and .mxv-ticker are self-contained bordered cards on the portal
 *    palette: #0b0e0d ground, #43d597 green, #e0a63c amber, #e6b654 gold,
 *    #ec7663 red). Those hex values are the sanctioned window palette; every
 *    other value comes from css/tokens.css variables.
 *  - Zero inline styles on pages (CSP): everything lives here.
 *  - Every animation carries its prefers-reduced-motion fallback in this file.
 *  - 375px mobile works via the media queries at the bottom.
 */

/* ---- window palette (scoped to the two product windows) ------------------ */
.mxv-board,
.mxv-ticker {
  --mxv-ground: #0b0e0d;
  --mxv-green: #43d597;
  --mxv-amber: #e0a63c;
  --mxv-gold: #e6b654;
  --mxv-red: #ec7663;
  --mxv-bone: rgba(255, 255, 255, .92);
  --mxv-dim: rgba(255, 255, 255, .62);
  --mxv-faint: rgba(255, 255, 255, .42);
  --mxv-line: rgba(255, 255, 255, .09);
  background: var(--mxv-ground);
  border: 1px solid rgba(230, 182, 84, .26);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* ---- hero -------------------------------------------------------------- */
.mxv-hero-center { text-align: center; }
.mxv-hero-center h1 { max-width: 22ch; margin-inline: auto; }
.mxv-hero-center .hero-copy { margin-inline: auto; }
.mxv-hero-center .hero-actions { justify-content: center; }

/* ---- the scoreboard window ---------------------------------------------- */
.mxv-board {
  max-width: 760px;
  margin: var(--s-6) auto 0;
  text-align: left;
  box-shadow: var(--sh-3);
  animation: mxv-rise .6s var(--ease) both;
}
@keyframes mxv-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.mxv-board-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mxv-bone);
  /* no border here: each .mxv-row carries its own border-top, and the first
     row's line doubles as the head divider */
}
.mxv-head-right { text-align: right; }
.mxv-head-vs {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 500;
  color: var(--mxv-faint);
}

.mxv-row {
  display: grid;
  grid-template-columns: 104px 1fr 104px;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--mxv-line);
}

.mxv-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--mxv-gold);
}
.mxv-num:last-child { text-align: right; }
.mxv-num.mxv-win { color: var(--mxv-green); }
.mxv-num.mxv-trail { color: var(--mxv-red); }
.mxv-num.mxv-even { color: var(--mxv-gold); }
.mxv-sub {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .03em;
  color: var(--mxv-dim);
  margin-top: 2px;
}

.mxv-lbl {
  display: block;
  text-align: center;
  color: var(--mxv-dim);
  font-size: .88rem;
  line-height: 1.45;
}
.mxv-lbl small,
.mxv-na small {
  display: block;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mxv-faint);
  margin-top: 3px;
}

.mxv-row--na { grid-template-columns: 1fr; }
.mxv-na {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--mxv-dim);
  padding: var(--s-2) 0;
}

.mxv-board-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--mxv-line);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .02em;
  color: var(--mxv-faint);
}

.mxv-verdict {
  margin: var(--s-4) auto 0;
  max-width: 56ch;
  color: rgba(255, 255, 255, .88);
  font-size: 1rem;
}

/* ---- the ticker window --------------------------------------------------- */
.mxv-ticker-band { padding: var(--s-7) 0; }
.mxv-ticker-kick {
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.mxv-ticker { padding: 11px 0; }
.mxv-ticker-track {
  display: flex;
  width: max-content;
  animation: mxv-scroll 65s linear infinite;
}
.mxv-ticker:hover .mxv-ticker-track,
.mxv-ticker:focus-within .mxv-ticker-track { animation-play-state: paused; }
.mxv-ticker-group { display: flex; width: max-content; }
@keyframes mxv-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.mxv-line {
  display: inline-block;
  padding: 0 var(--s-6);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--mxv-dim);
}
.mxv-line b { color: var(--mxv-gold); font-weight: 600; }
.mxv-line i { font-style: normal; color: var(--mxv-faint); padding-left: var(--s-3); }

/* ---- reframe + CTA ------------------------------------------------------- */
.mxv-reframe-fact {
  max-width: 720px;
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r);
  color: var(--ink);
}
.mxv-cta-foot {
  margin-top: var(--s-4);
  font-size: .88rem;
  color: rgba(255, 255, 255, .66);
}

/* ---- the trade directory (index page) ------------------------------------ */
.mxv-trades-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.mxv-trade-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-1);
  color: var(--ink);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.mxv-trade-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.mxv-trade-card h3 { margin: 0 0 var(--s-2); }
.mxv-trade-region {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .02em;
  color: var(--muted);
}
.mxv-trade-verdict {
  margin: 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--forest-2);
}

/* ---- reduced motion (every animation above falls back here) --------------- */
@media (prefers-reduced-motion: reduce) {
  .mxv-board { animation: none; }
  .mxv-ticker-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    gap: var(--s-2) 0;
  }
  .mxv-ticker { padding: var(--s-3) var(--s-2); }
  .mxv-ticker-group { width: auto; flex-wrap: wrap; gap: var(--s-2) 0; }
  .mxv-ticker-dup { display: none; }
  .mxv-line { white-space: normal; }
  .mxv-trade-card { transition: none; }
  .mxv-trade-card:hover { transform: none; }
}

/* ---- small screens (375px must work) -------------------------------------- */
@media (max-width: 720px) {
  .mxv-trades-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mxv-board-head {
    font-size: .72rem;
    letter-spacing: .05em;
    padding: var(--s-3) var(--s-4);
  }
  .mxv-row {
    grid-template-columns: 64px 1fr 64px;
    padding: var(--s-3) var(--s-4);
    gap: var(--s-2);
  }
  .mxv-num { font-size: 1.3rem; }
  .mxv-lbl { font-size: .78rem; }
  .mxv-lbl small, .mxv-na small { font-size: .58rem; }
  .mxv-board-foot { font-size: .62rem; padding: var(--s-3) var(--s-4); }
  .mxv-trades-grid { grid-template-columns: 1fr; }
}