/* ============================================================================
   RENEWAL RADAR — portable stylesheet
   ReimburseOS Phase 14 Addon · authored 2026-05-15 · visual pass 2026-05-15

   AESTHETIC: Commure × Tempus. Commure's dark depth and cyan accent provide the
   base (the radar lives in a dark dashboard); Tempus contributes clinical
   precision and restraint — finer hairlines, calmer glow (an instrument, not
   neon), tabular-aligned numerals, monthly tick graduations, generous
   whitespace. The radar should read like a precision instrument.

   PORTABLE BY DESIGN. Every color/font reads from the host's design tokens with
   a literal fallback, so it looks correct in the current dashboard (--accent,
   --bg-elev-*), the shared system (--rb-*), or neither.

   Mount contract (see RENEWAL_RADAR_INTEGRATION.md):
     <link rel="stylesheet" href="/assets/renewal-radar.css">
     <div id="renewal-radar-mount"></div>
     <script src="/assets/renewal-radar.js" defer></script>
   ============================================================================ */

#renewal-radar-mount,
.rr-modal-ov {
  --rr-accent:        var(--accent, var(--rb-cyan, #00d4ff));
  --rr-accent-soft:   rgba(0,212,255,.10);
  --rr-bg-1:          var(--bg-elev-1, var(--rb-bg-dark-2, #0d1422));
  --rr-bg-2:          var(--bg-elev-2, #101826);
  --rr-bg-3:          var(--bg-elev-3, #172035);
  --rr-base:          var(--bg-base, var(--rb-bg-dark, #0a0f1c));
  --rr-border:        var(--border, var(--rb-border-dark, #1e2a3a));
  --rr-border-strong: var(--border-strong, #283450);
  --rr-hairline:      rgba(255,255,255,.07);          /* Tempus-fine divider */
  --rr-text:          var(--text, var(--rb-fg-light, #f9fafb));
  --rr-text-dim:      var(--text-dim, #9ca3af);
  --rr-text-faint:    var(--text-faint, #8d97ad);
  --rr-danger:        var(--danger, var(--rb-red, #ef4444));
  --rr-font-display:  var(--font-display, var(--rb-font-display, "Sora", system-ui, sans-serif));
  --rr-font-ui:       var(--font-ui, var(--rb-font-body, "DM Sans", system-ui, sans-serif));
  --rr-font-mono:     var(--font-mono, var(--rb-font-mono, "Geist Mono", ui-monospace, monospace));
  --rr-ease:          cubic-bezier(0.16,1,0.3,1);
  --rr-ease-out:      cubic-bezier(0.33,1,0.68,1);
}

/* tabular numerals everywhere numbers appear — precision-instrument detail */
.rr-card-count, .rr-tip-line, .rr-ros, .rr-m-count, .rr-reason-val,
.rr-card-uplift, .rr-gridlabel, .rr-today-tag, .rr-edge-tag {
  font-variant-numeric: tabular-nums;
}

/* ---- section shell ------------------------------------------------------- */
.rr{margin:0 0 34px;opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--rr-ease),transform .6s var(--rr-ease)}
.rr.rr-shown{opacity:1;transform:none}
.rr *{box-sizing:border-box}
.rr-head{margin-bottom:20px}
.rr-eyebrow{font-family:var(--rr-font-mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--rr-accent);font-weight:600;margin-bottom:10px}
.rr-title{font-family:var(--rr-font-display);font-weight:700;font-size:clamp(23px,2.6vw,31px);
  letter-spacing:-0.022em;line-height:1.12;margin:0 0 8px;color:var(--rr-text)}
.rr-sub{color:var(--rr-text-dim);font-size:14px;line-height:1.6;margin:0;max-width:660px}

/* ---- timeline ------------------------------------------------------------ */
.rr-timeline-scroll{position:relative}
.rr-timeline{position:relative;height:196px;border:1px solid var(--rr-border);border-radius:18px;
  background:
    radial-gradient(680px 260px at 37% 64%,rgba(0,212,255,.066),transparent 72%),
    linear-gradient(180deg,var(--rr-bg-2),var(--rr-bg-1));
  overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.rr-band{position:absolute;top:0;bottom:0;background:rgba(0,212,255,.055);
  border-left:1px dashed rgba(0,212,255,.20);border-right:1px dashed rgba(0,212,255,.20)}
.rr-band-tag{position:absolute;top:13px;left:50%;transform:translateX(-50%);
  font-family:var(--rr-font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(0,212,255,.58);white-space:nowrap}
.rr-gridline{position:absolute;top:30px;bottom:34px;border-left:1px dotted rgba(255,255,255,.13)}
.rr-gridlabel{position:absolute;bottom:11px;transform:translateX(-50%);font-family:var(--rr-font-mono);
  font-size:9px;letter-spacing:.12em;color:var(--rr-text-faint)}
/* axis hairline + monthly tick graduations — the instrument scale */
.rr-axis{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.12)}
.rr-axis::after{content:"";position:absolute;left:0;right:0;top:-3px;height:7px;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.16) 0 1px,transparent 1px calc(100%/12))}
.rr-today{position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(0,212,255,.25),var(--rr-accent),rgba(0,212,255,.25));
  box-shadow:0 0 7px rgba(0,212,255,.42)}
.rr-today-tag{position:absolute;top:14px;left:11px;font-family:var(--rr-font-mono);font-size:9px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--rr-accent);font-weight:600}
.rr-edge-tag{position:absolute;top:14px;right:13px;font-family:var(--rr-font-mono);font-size:9px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--rr-text-faint)}

/* scan line — the sonar sweep. Calm, confident, instrument-grade. */
.rr-scan{position:absolute;top:0;bottom:0;width:1px;left:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,212,255,.85) 22%,
    rgba(0,212,255,.85) 78%,transparent);
  box-shadow:0 0 8px rgba(0,212,255,.45);will-change:left}
.rr-scan::before{content:"";position:absolute;top:0;bottom:0;right:0;width:72px;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.11))}

/* nodes — glow restrained vs. a game UI; enough to read tier at a glance */
.rr-node{position:absolute;top:50%;border-radius:50%;cursor:pointer;padding:0;border:0;
  background:transparent;transform:translate(-50%,-50%);
  transition:transform .18s var(--rr-ease)}
.rr-node-dot{display:block;width:100%;height:100%;border-radius:50%;background:var(--rr-accent)}
.rr-node[data-tier="bullseye"]{box-shadow:0 0 0 3px rgba(0,212,255,.13),0 0 17px 3px rgba(0,212,255,.46)}
.rr-node[data-tier="primetime"]{box-shadow:0 0 0 2px rgba(0,212,255,.11),0 0 12px 2px rgba(0,212,255,.34)}
.rr-node[data-tier="primetime"] .rr-node-dot{background:radial-gradient(circle at 38% 38%,#e4fbff,#00d4ff 72%)}
.rr-node[data-tier="approaching"]{box-shadow:0 0 8px 1px rgba(0,212,255,.18)}
.rr-node[data-tier="approaching"] .rr-node-dot{background:rgba(0,212,255,.58)}
.rr-node[data-tier="early"] .rr-node-dot,
.rr-node[data-tier="no_signal"] .rr-node-dot{background:rgba(255,255,255,.30)}
.rr-node[data-tier="expired"]{box-shadow:0 0 9px 1px rgba(239,68,68,.34)}
.rr-node[data-tier="expired"] .rr-node-dot{background:var(--rr-danger)}
.rr-node:hover,.rr-node:focus-visible{transform:translate(-50%,-50%) scale(1.22);outline:none}
.rr-node:focus-visible{box-shadow:0 0 0 3px rgba(0,212,255,.5),0 0 16px 3px rgba(0,212,255,.5)}
.rr-node.rr-ping{animation:rr-ping 280ms var(--rr-ease-out)}
@keyframes rr-ping{
  0%{filter:none}
  45%{filter:brightness(1.45) drop-shadow(0 0 12px rgba(0,212,255,.8))}
  100%{filter:none}}

/* node tooltip */
.rr-tip{position:absolute;bottom:calc(50% + 22px);transform:translateX(-50%);
  background:var(--rr-bg-3);border:1px solid var(--rr-border-strong);border-radius:11px;
  padding:10px 13px;min-width:182px;pointer-events:none;opacity:0;
  transition:opacity .14s ease;box-shadow:0 14px 36px rgba(0,0,0,.52);z-index:5}
.rr-tip.rr-tip-on{opacity:1}
.rr-tip-payer{font-family:var(--rr-font-display);font-weight:700;font-size:13px;
  color:var(--rr-text);margin-bottom:4px;letter-spacing:-0.01em}
.rr-tip-line{font-family:var(--rr-font-mono);font-size:11px;color:var(--rr-text-dim);line-height:1.6}
.rr-tip-line b{color:var(--rr-accent);font-weight:600}

/* skeleton */
.rr-skel-node{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);background:rgba(255,255,255,.08);
  animation:rr-shimmer 1.4s ease-in-out infinite}
@keyframes rr-shimmer{0%,100%{opacity:.32}50%{opacity:.8}}

/* ---- cards strip --------------------------------------------------------- */
.rr-cards{display:flex;gap:16px;margin-top:18px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.rr-cards:empty{display:none}
.rr-card{flex:0 0 324px;min-height:208px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.022));
  border:1px solid rgba(0,212,255,.14);border-radius:14px;padding:24px;display:flex;
  flex-direction:column;cursor:pointer;text-align:left;font:inherit;
  transition:transform .22s var(--rr-ease),border-color .22s var(--rr-ease),box-shadow .22s var(--rr-ease)}
.rr-card:hover,.rr-card:focus-visible{transform:translateY(-3px);
  border-color:rgba(0,212,255,.32);box-shadow:0 14px 34px rgba(0,0,0,.34);outline:none}
.rr-card-pre{font-family:var(--rr-font-mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;font-weight:600;color:var(--rr-text-faint);margin-bottom:12px}
.rr-card-pre.rr-hot{color:var(--rr-accent)}
.rr-card-payer{font-family:var(--rr-font-display);font-weight:500;font-size:19px;
  color:var(--rr-text);letter-spacing:-0.015em;line-height:1.2}
.rr-card-count{font-family:var(--rr-font-mono);font-weight:700;font-size:30px;
  color:var(--rr-accent);line-height:1.05;margin-top:14px;letter-spacing:-0.01em}
.rr-card-count.rr-muted{color:var(--rr-text-dim)}
.rr-card-cap{font-family:var(--rr-font-ui);font-size:12px;color:var(--rr-text-dim);margin-top:3px}
.rr-card-uplift{font-family:var(--rr-font-mono);font-size:12px;color:var(--rr-text);margin-top:12px}
.rr-card-uplift .rr-est{color:var(--rr-text-faint);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;margin-right:6px}
.rr-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;
  padding-top:16px;border-top:1px solid var(--rr-hairline)}
.rr-ros{font-family:var(--rr-font-mono);font-size:11px;font-weight:700;padding:3px 10px;
  border-radius:999px;background:var(--rr-accent-soft);color:var(--rr-accent);letter-spacing:.05em}
.rr-ros.rr-muted{background:rgba(255,255,255,.05);color:var(--rr-text-dim)}
.rr-ros.rr-expired{background:rgba(239,68,68,.12);color:var(--rr-danger)}
.rr-card-cta{font-family:var(--rr-font-ui);font-size:13px;font-weight:600;color:var(--rr-accent)}

/* ---- empty / edge state -------------------------------------------------- */
.rr-empty{border:1px solid var(--rr-border);border-radius:18px;padding:42px 32px;text-align:center;
  background:
    radial-gradient(420px 180px at 50% 0%,rgba(0,212,255,.05),transparent 70%),
    linear-gradient(180deg,var(--rr-bg-2),var(--rr-bg-1));margin-top:18px}
.rr-empty-icon{font-family:var(--rr-font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rr-text-faint);margin-bottom:14px}
.rr-empty-h{font-family:var(--rr-font-display);font-weight:700;font-size:19px;
  color:var(--rr-text);margin:0 0 10px;letter-spacing:-0.015em}
.rr-empty-p{color:var(--rr-text-dim);font-size:13.5px;line-height:1.65;margin:0 auto 20px;max-width:520px}
.rr-empty-cta{display:inline-flex;align-items:center;gap:7px;padding:11px 20px;border-radius:11px;
  background:var(--rr-bg-3);border:1px solid var(--rr-border-strong);color:var(--rr-text);
  font-family:var(--rr-font-ui);font-weight:600;font-size:13px;cursor:pointer;
  transition:border-color .15s,background .15s;text-decoration:none}
.rr-empty-cta:hover{border-color:var(--rr-accent);background:var(--rr-bg-2)}

/* ---- detail modal -------------------------------------------------------- */
.rr-modal-ov{display:none;position:fixed;inset:0;background:rgba(5,8,16,.78);z-index:1000;
  align-items:flex-end;justify-content:center;padding:0;backdrop-filter:blur(3px)}
.rr-modal-ov.rr-open{display:flex}
.rr-modal{background:var(--rr-bg-2);border:1px solid var(--rr-border-strong);
  border-radius:18px 18px 0 0;width:100%;max-width:800px;max-height:92vh;overflow-y:auto;
  padding:30px 30px 34px;transform:translateY(40px);transition:transform .24s var(--rr-ease)}
.rr-modal-ov.rr-open .rr-modal{transform:none}
.rr-modal-x{float:right;background:transparent;border:1px solid var(--rr-border-strong);
  color:var(--rr-text-dim);width:32px;height:32px;border-radius:9px;cursor:pointer;
  font-size:15px;line-height:1;transition:border-color .15s,color .15s}
.rr-modal-x:hover{border-color:var(--rr-danger);color:var(--rr-danger)}
.rr-m-pre{font-family:var(--rr-font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rr-accent);font-weight:600;margin-bottom:8px}
.rr-m-payer{font-family:var(--rr-font-display);font-weight:700;font-size:25px;color:var(--rr-text);
  letter-spacing:-0.022em;margin:0 0 5px}
.rr-m-count{font-family:var(--rr-font-mono);font-size:12.5px;color:var(--rr-text-dim);letter-spacing:.01em}
.rr-m-sect{font-family:var(--rr-font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rr-text-faint);font-weight:600;margin:26px 0 13px;
  padding-bottom:9px;border-bottom:1px solid var(--rr-hairline)}
.rr-m-reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.rr-reason{background:var(--rr-bg-1);border:1px solid var(--rr-border);border-radius:12px;padding:15px}
.rr-reason-lbl{font-family:var(--rr-font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rr-text-faint);margin-bottom:7px}
.rr-reason-val{font-family:var(--rr-font-display);font-weight:700;font-size:15px;
  color:var(--rr-text);margin-bottom:10px;letter-spacing:-0.01em}
.rr-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.rr-bar-fill{height:100%;background:linear-gradient(90deg,var(--rr-accent),#62f1ff);border-radius:3px;
  transition:width .5s var(--rr-ease)}
.rr-m-note{color:var(--rr-text-dim);font-size:13px;line-height:1.7}
.rr-m-note b{color:var(--rr-text);font-weight:600}
.rr-m-memo{background:var(--rr-bg-1);border:1px solid var(--rr-border);
  border-left:3px solid var(--rr-accent);border-radius:9px;padding:16px 18px;
  font-family:var(--rr-font-ui);font-size:13px;color:var(--rr-text-dim);line-height:1.7;
  white-space:pre-line;margin-top:4px}
.rr-m-cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:14px 24px;
  border-radius:11px;background:linear-gradient(135deg,var(--rr-accent),#00aacc);
  color:var(--rr-base);border:none;font-family:var(--rr-font-display);font-weight:700;
  font-size:14px;cursor:pointer;text-decoration:none;
  box-shadow:0 0 0 1px var(--rr-accent),0 8px 22px rgba(0,212,255,.22)}

/* ---- responsive ---------------------------------------------------------- */
@media (min-width:760px){
  .rr-modal-ov{align-items:center}
  .rr-modal{border-radius:18px}
}
@media (max-width:760px){
  .rr-timeline-scroll{overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .rr-timeline{min-width:680px}
  .rr-cards{flex-direction:column}
  .rr-card{flex-basis:auto;width:100%}
  .rr-m-reasons{grid-template-columns:1fr}
}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .rr{opacity:1;transform:none;transition:none}
  .rr-skel-node{animation:none;opacity:.6}
  .rr-node.rr-ping{animation:none}
  .rr-modal,.rr-bar-fill{transition:none}
}