/* Live fraud-scoring widget (API "What You Get Back").
   Formerly linked after riskernel.css (retired). Engine and markup: js/live-score.js */

/* ---- Shared: cross-fade, factor colours, level colours ---- */
.rk-live [data-f],
.rk-live [data-rk-req],
.rk-live-code [data-rk-req] {
  transition: opacity 150ms ease;
}

.rk-fx-out { opacity: 0; }

/* Hero text cross-fade: the slot holds an outgoing and an incoming layer on top of each other */
.rk-xf {
  position: relative;
  display: inline-block;
  white-space: pre;
  vertical-align: top;   /* a positioned inline-block would otherwise shift the baseline */
}
.rk-xl {
  position: absolute;
  left: 0;
  top: 0;
  white-space: pre;
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: left center;
}

/* Factors that raise risk are red, factors that lower it are green */
.rk-up { color: #FCA5A5; }
.rk-down { color: #86EFAC; }

.rk-lv-low { color: #86EFAC; }
.rk-lv-med { color: #FCD34D; }
.rk-lv-high { color: #FCA5A5; }

/* ---- API section ---- */

/* Keep the tab header fixed when a language with fewer lines is selected */
#api ._2-col-grid-7-5rem-gap { align-items: start; }

.rk-live-code [data-rk-req] { white-space: pre; }

/* Code stays left-aligned even where the section centres text on mobile */
.rk-live-code .rk-code { text-align: left; }

.rk-live-api-result .rk-explanation-bar {
  min-height: 44px;
  gap: 12px;
}

.rk-live-api-result .rk-explanation-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rk-live-api-result .rk-explanation-value {
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rk-api-ico {
  width: 16px;
  height: 16px;
  flex: none;
}

.rk-api-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Risk score row tinted by level */
.rk-score-row .rk-explanation-value { opacity: 1; font-weight: 700; }
.rk-tint-high { background: rgba(239, 68, 68, 0.15); border-left-color: #EF4444; }
.rk-tint-high .rk-explanation-value { color: #FCA5A5; }
.rk-tint-med { background: rgba(245, 158, 11, 0.15); border-left-color: #F59E0B; }
.rk-tint-med .rk-explanation-value { color: #FCD34D; }
.rk-tint-low { background: rgba(16, 185, 129, 0.15); border-left-color: #10B981; }
.rk-tint-low .rk-explanation-value { color: #86EFAC; }

/* Top fraud type row */
.rk-top-row { border-left-color: #94A3B8; }
.rk-top-row .rk-explanation-value { opacity: 0.85; }

/* Factor rows: red left border and weight when raising risk, green when lowering */
.rk-factor-up { border-left-color: #EF4444; }
.rk-factor-up .rk-explanation-value { color: #FCA5A5; opacity: 1; }
.rk-factor-down { border-left-color: #10B981; }
.rk-factor-down .rk-explanation-value { color: #86EFAC; opacity: 1; }

/* ---- Mobile ---- */
@media screen and (max-width: 767px) {
  .rk-live-api-result .rk-explanation-bar {
    padding: 10px 12px;
    min-height: 42px;
  }
}

@media screen and (max-width: 479px) {
  .rk-live-api-result .rk-explanation-label { font-size: 0.8rem; }
  .rk-live-api-result .rk-explanation-value { font-size: 0.7rem; }

  /* Drop the "weight: " / "type score: " prefixes so rows never wrap */
  .rk-w-prefix { display: none; }
}

/* ---- Reduced motion: swap with no tweening ---- */
@media (prefers-reduced-motion: reduce) {
  .rk-live [data-f],
  .rk-live [data-rk-req],
  .rk-live-code [data-rk-req] {
    transition: none;
  }
}