/* ============================================================
   results panel — the honest backtest output
   (scoped .rs-* classes; tokens only, no hardcoded colors)
   ============================================================ */

.rs-body{
  display:flex;flex-direction:column;gap:20px;
  padding:16px 16px 18px;
}

/* ---- section scaffolding ---- */
.rs-section{display:flex;flex-direction:column;gap:11px}
.rs-sec-head{display:flex;align-items:baseline;gap:10px}
.rs-sec-title{
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text);
}
.rs-sec-em{color:var(--text-3);font-weight:600}
.rs-sec-sub{margin-left:auto;font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}

/* ---- the honesty gap grid ---- */
.rs-gap-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}

.rs-gap{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:13px;padding:15px 16px 6px}
.rs-gap--naive{
  border-color:var(--down);
  background:linear-gradient(180deg,var(--down-tint) 0%,var(--surface) 46%);
}
.rs-gap--honest{
  border:2px solid var(--up);
  background:linear-gradient(180deg,var(--up-tint) 0%,var(--surface) 46%);
  box-shadow:0 6px 22px rgba(21,163,90,.12);
}

.rs-gap__top{display:flex;align-items:center;gap:10px}
.rs-gap__label{font-size:12px;font-weight:600;color:var(--text-2)}
.rs-gap__label--strong{color:var(--text);font-weight:700}
.rs-gap__top .pill{margin-left:auto}

.rs-gap__nums{display:flex;gap:26px;align-items:flex-end}
.rs-stat{display:flex;flex-direction:column;gap:1px}
.rs-stat__v{font-size:30px;font-weight:800;line-height:1;letter-spacing:-.01em;display:inline-flex;align-items:baseline}
.rs-stat__u{font-size:14px;font-weight:700;margin-left:2px;opacity:.7}
.rs-stat__k{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);margin-top:5px}

.rs-spark{width:100%;height:64px;margin-top:auto}

/* ---- gap caption ---- */
.rs-caption{
  margin:1px 0 0;font-size:12.5px;line-height:1.55;color:var(--text-2);
  padding:11px 14px;background:var(--surface-2);border:1px solid var(--border);
  border-left:3px solid var(--brand);border-radius:var(--r-sm);
}
.rs-caption b{color:var(--text);font-weight:700}

/* ---- reveal ledger ---- */
.rs-table-wrap{
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
}
.rs-ledger{font-size:12px}
.rs-ledger th{background:var(--surface-2)}
.rs-ledger td{padding:9px 12px}
.rs-ledger tbody tr:last-child td{border-bottom:none}
.rs-led-sym{font-weight:700;color:var(--text);font-size:12px}
.rs-side{padding:2px 8px;font-size:9.5px}

/* ---- trust strip ---- */
.rs-trust{
  display:flex;align-items:center;gap:9px;
  background:var(--surface-2);color:var(--text-2);
  border-top:1px solid var(--border);
}
.rs-trust__ico{display:inline-flex;color:var(--up)}
.rs-trust__ico svg{width:14px;height:14px}
.rs-trust__txt{font-size:11px;color:var(--text-2)}
.rs-trust__txt b{color:var(--text);font-weight:700}
.rs-trust__cut{
  margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--down);background:var(--down-tint);padding:3px 9px;border-radius:var(--r-pill);
  white-space:nowrap;
}

/* ---- responsive ---- */
@media (max-width:760px){
  .rs-gap-grid{grid-template-columns:1fr}
  .rs-stat__v{font-size:26px}
}

/* ============================================================
   ENTRANCE ANIMATION (count-up numbers + draw-in sparklines).
   Cosmetic only — JS drives the values; these styles just add
   the brief skeleton shimmer and a smooth sparkline draw-in.
   ============================================================ */

/* skeleton shimmer on the two gap cards before the reveal */
.rs-gap.rs-loading{
  position:relative;
}
.rs-gap.rs-loading > *{
  opacity:.35;
}
.rs-gap.rs-loading::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(
    100deg,
    transparent 0%,
    var(--surface-3) 45%,
    rgba(255,255,255,.65) 50%,
    var(--surface-3) 55%,
    transparent 100%);
  background-size:220% 100%;
  mix-blend-mode:multiply;
  border-radius:inherit;
  animation:rsShimmer .9s linear infinite;
}
@keyframes rsShimmer{
  from{background-position:140% 0}
  to{background-position:-40% 0}
}

/* the draw-in line transitions its dash offset; JS sets the values */
.rs-spark-line{will-change:stroke-dashoffset}

/* honor reduced motion — no shimmer, no draw delay (belt + suspenders;
   JS already short-circuits, this covers any class left on the node) */
@media (prefers-reduced-motion: reduce){
  .rs-gap.rs-loading > *{opacity:1}
  .rs-gap.rs-loading::after{display:none;animation:none}
  .rs-spark-line{transition:none !important}
}