/* ============================================================================
   TRIVOX — RESULTS PANEL  (results.css)
   Reusable results/impact block for any demo. Link AFTER tokens.css:
     <link rel="stylesheet" href="../../ds/results.css" />

   ENGLISH ONLY in all rendered copy. (Demos are 100% English.)

   HONEST LABELING — non-negotiable. Two provenance modes:
     .rp.is-real  -> green "Verified result" + anonymized client.
                     Use ONLY for work actually delivered. Anonymize the client
                     ("auto dealership, North America"), never invent the result.
     .rp.is-proj  -> blue "Typical projection" + sector benchmark.
                     Use for demos with no real client. Speak in capability/range,
                     never assert a past fact. Credible ranges only.
   ============================================================================ */

.rp{margin:2.6rem 0 1rem;position:relative;z-index:2}
.rp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.rp-eyebrow{font-size:var(--tx-label);letter-spacing:.16em;text-transform:uppercase;color:var(--tx-cyan);font-weight:600}
.rp-title{font-family:var(--tx-font-display);font-weight:600;color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.03em;line-height:1.05;margin-top:.45rem}
.rp-sub{font-size:var(--tx-small);color:var(--tx-text-dim);font-weight:300;margin-top:.4rem;max-width:54ch}

/* provenance badge — the trust marker. Real = green, Projected = blue. */
.rp-prov{display:inline-flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:.5rem .8rem;border-radius:var(--r-pill);
  border:1px solid var(--tx-line-2);white-space:nowrap}
.rp-prov .d{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.rp.is-real .rp-prov{color:#34d399;border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.08)}
.rp.is-real .rp-prov .d{background:#34d399;box-shadow:0 0 10px 1px rgba(52,211,153,.7)}
.rp.is-proj .rp-prov{color:#6E92FF;border-color:rgba(110,146,255,.42);background:rgba(110,146,255,.1)}
.rp.is-proj .rp-prov .d{background:#6E92FF;box-shadow:0 0 10px 1px rgba(110,146,255,.7)}
.rp-client{display:block;font-size:var(--tx-label);color:var(--tx-text-faint);letter-spacing:.04em;margin-top:.55rem;text-align:right}

/* before -> after stat cards (each carries its own sparkline) */
.rp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.2rem}
@media(max-width:760px){.rp-grid{grid-template-columns:1fr}}
.rp-stat{position:relative;padding:1.3rem 1.3rem 1.15rem;border-radius:var(--r-lg);border:1px solid var(--tx-line);
  background:radial-gradient(130% 90% at 0 0,rgba(46,97,254,.14),transparent 48%),linear-gradient(160deg,var(--tx-surface-2),var(--tx-surface) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 50px -36px rgba(0,0,0,.9);overflow:hidden}
.rp-stat .lab{font-size:var(--tx-label);text-transform:uppercase;letter-spacing:.08em;color:var(--tx-text-faint)}
.rp-ba{display:flex;align-items:baseline;gap:.6rem;margin-top:.7rem;flex-wrap:wrap}
.rp-ba .before{font-family:var(--tx-font-display);font-weight:500;font-size:1.25rem;color:var(--tx-text-faint);line-height:1}
.rp-ba .arr{color:var(--tx-cyan);font-size:1rem;font-weight:700;opacity:.85}
.rp-ba .after{font-family:var(--tx-font-display);font-weight:600;font-size:clamp(1.9rem,3.4vw,2.5rem);color:#fff;line-height:.95;letter-spacing:-.02em}
.rp-delta{display:inline-flex;align-items:center;gap:.3rem;margin-top:.75rem;font-size:.74rem;font-weight:700;
  letter-spacing:.03em;padding:.28rem .6rem;border-radius:var(--r-pill);
  color:#34d399;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.34)}
.rp-delta.flat{color:#6E92FF;background:rgba(110,146,255,.1);border-color:rgba(110,146,255,.34)}
.rp-spark{position:absolute;right:0;bottom:0;width:46%;height:46px;opacity:.85;pointer-events:none}
.rp-spark svg{display:block;width:100%;height:100%}

/* hero evolution chart — real analytics area chart (SVG) */
.rp-chart{border-radius:var(--r-lg);border:1px solid var(--tx-line);overflow:hidden;
  background:linear-gradient(160deg,var(--tx-surface),var(--tx-bg-2));box-shadow:0 22px 50px -36px rgba(0,0,0,.9)}
.rp-chart .ch-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.2rem;border-bottom:1px solid var(--tx-line);flex-wrap:wrap}
.rp-chart .ch-head h4{font-family:var(--tx-font-display);font-weight:600;color:#fff;font-size:1rem}
.rp-chart .ch-head .ch-tools{display:flex;align-items:center;gap:.9rem}
.rp-grow-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  padding:.3rem .6rem;border-radius:var(--r-pill);color:#34d399;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.34)}
.rp.is-proj .rp-grow-chip{color:#6E92FF;background:rgba(110,146,255,.1);border-color:rgba(110,146,255,.34)}
.rp-legend{display:flex;gap:.9rem;font-size:var(--tx-label);color:var(--tx-text-dim)}
.rp-legend span{display:inline-flex;align-items:center;gap:.4rem}
.rp-legend i{width:14px;height:0;border-top:2px dashed var(--tx-text-faint);display:inline-block}
.rp-legend i.lg-a{border-top:3px solid var(--tx-cyan)}

.rp-graph{padding:1.2rem 1rem .7rem}
.rp-graph svg{display:block;width:100%;height:auto}
.rp-graph .grid line{stroke:rgba(255,255,255,.055)}
.rp-graph .axis text{fill:var(--tx-text-faint);font-family:var(--tx-font);font-size:11px;font-weight:600;letter-spacing:.02em}
.rp-graph .base{stroke:var(--tx-text-faint);stroke-width:1.4;stroke-dasharray:4 5;opacity:.55}
.rp-graph .base-lab{fill:var(--tx-text-faint);font-family:var(--tx-font);font-size:10px;font-weight:700;letter-spacing:.12em}
.rp-graph .line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1600;stroke-dashoffset:1600;animation:rp-draw 1.5s var(--tx-ease-out) .15s forwards}
.rp-graph .dot{fill:var(--tx-surface);stroke:var(--tx-cyan);stroke-width:2.5}
.rp-graph .dot.peak{fill:var(--tx-cyan);stroke:#fff;stroke-width:2}
.rp-graph .peakpulse{fill:none;stroke:var(--tx-cyan);opacity:.6;animation:rp-ping 1.8s ease-out infinite}
.rp-graph .callout rect{fill:rgba(0,240,255,.14);stroke:rgba(0,240,255,.55)}
.rp-graph .callout text{fill:#fff;font-family:var(--tx-font);font-size:13px;font-weight:700}
/* interactivity: crosshair + hover tooltip */
.rp-graph{position:relative}
.rp-graph .xhair{stroke:rgba(0,240,255,.5);stroke-width:1;stroke-dasharray:3 4;opacity:0;transition:opacity .15s}
.rp-graph .rp-ov{cursor:crosshair}
.rp-graph .dot{transition:r .15s var(--tx-ease)}
.rp-graph .dot.active{r:6.5;fill:var(--tx-cyan);stroke:#fff}
.rp-tip{position:absolute;pointer-events:none;transform:translate(-50%,-130%);
  background:rgba(14,20,36,.97);border:1px solid var(--tx-line-2);border-radius:10px;
  padding:.45rem .65rem;font-size:.78rem;color:#fff;white-space:nowrap;opacity:0;
  transition:opacity .15s;box-shadow:0 14px 34px -14px #000;z-index:6}
.rp-tip b{color:var(--tx-cyan);font-weight:700;font-size:.92rem}
.rp-tip .tl{display:block;font-size:.6rem;color:var(--tx-text-faint);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.1rem}
.rp-period{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-text-faint);border:1px solid var(--tx-line-2);border-radius:var(--r-pill);padding:.3rem .6rem}

/* bar chart */
.rp-graph .bar{transform-box:fill-box;transform-origin:bottom;animation:rp-bargrow .7s var(--tx-ease-out) both;transition:stroke .15s}
.rp-graph .bar.active{stroke:rgba(0,240,255,.6);stroke-width:1.5}
@keyframes rp-bargrow{from{transform:scaleY(0);opacity:.3}to{transform:scaleY(1);opacity:1}}

/* donut chart */
.rp-graph .dn-num{fill:#fff;font-family:var(--tx-font-display);font-weight:600;font-size:34px;letter-spacing:-.02em}
.rp-graph .dn-cap{fill:var(--tx-text-faint);font-family:var(--tx-font);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.rp-graph .dn-leg text{fill:var(--tx-text-dim);font-family:var(--tx-font);font-size:13px;font-weight:600}
.rp-graph .dn-val{animation:rp-dndraw 1.1s var(--tx-ease-out) both}
@keyframes rp-dndraw{from{opacity:0;transform:rotate(-12deg) scale(.94);transform-origin:120px 115px}to{opacity:1;transform:rotate(0) scale(1);transform-origin:120px 115px}}
@media(prefers-reduced-motion:reduce){.rp-graph .bar{animation:none}.rp-graph .dn-val{animation:none}}
@keyframes rp-draw{to{stroke-dashoffset:0}}
@keyframes rp-ping{0%{r:6;opacity:.6}100%{r:18;opacity:0}}
@media(prefers-reduced-motion:reduce){
  .rp-graph .line{animation:none;stroke-dashoffset:0}
  .rp-graph .peakpulse{animation:none;opacity:0}
}

/* honesty footnote */
.rp-note{font-size:.72rem;color:var(--tx-text-faint);line-height:1.5;margin-top:.9rem;max-width:78ch}
.rp-note b{color:var(--tx-text-dim);font-weight:600}