/* ============================================================================
   ReimburseOS v2 — Component System
   Consumes /shared/tokens.css. Commure × ReimburseOS.
   Load order: tokens.css → components.css → motion.js
   ============================================================================ */

/* ---- Reset / base -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
.rb-scope{font-family:var(--rb-font-body);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
.rb-mono{font-family:var(--rb-font-mono);font-variant-numeric:tabular-nums}
.rb-display{font-family:var(--rb-font-display);letter-spacing:var(--rb-tracking-tight)}

/* ---- Pre-headline (Commure preheader) ----------------------------------- */
.rb-eyebrow{font-family:var(--rb-font-mono);font-size:var(--rb-text-xs);
  font-weight:500;letter-spacing:var(--rb-tracking-wide);text-transform:uppercase}
.rb-eyebrow--dark{color:var(--rb-fg-light-faint)}
.rb-eyebrow--light{color:var(--rb-cyan-deep)}

/* ---- Section wrappers (alternating rhythm) ------------------------------ */
.rb-section{padding:var(--rb-space-24) 0}
.rb-section--emphasis{padding:var(--rb-space-32) 0}
.rb-section--dark{background:var(--rb-bg-dark);color:var(--rb-fg-light)}
.rb-section--light{background:var(--rb-bg-light);color:var(--rb-fg-dark)}
.rb-container{max-width:1180px;margin:0 auto;padding:0 24px}
.rb-container--narrow{max-width:920px}

/* ---- Buttons ------------------------------------------------------------- */
.rb-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--rb-font-body);
  font-size:var(--rb-text-base);font-weight:500;line-height:1;cursor:pointer;
  border:1px solid transparent;border-radius:var(--rb-radius-md);padding:14px 26px;
  transition:transform var(--rb-dur-base) var(--rb-ease),
    background var(--rb-dur-base) var(--rb-ease),
    box-shadow var(--rb-dur-base) var(--rb-ease),
    border-color var(--rb-dur-base) var(--rb-ease);text-decoration:none}
.rb-btn--primary{background:var(--rb-cyan);color:#0a0f1c}
.rb-btn--primary:hover{transform:translateY(-1px);box-shadow:var(--rb-shadow-cyan)}
.rb-btn--ghost-dark{background:transparent;color:var(--rb-fg-light);
  border-color:var(--rb-border-dark)}
.rb-btn--ghost-dark:hover{border-color:var(--rb-cyan);color:var(--rb-cyan)}
.rb-btn--ghost-light{background:transparent;color:var(--rb-fg-dark);
  border-color:var(--rb-border-light)}
.rb-btn--ghost-light:hover{border-color:var(--rb-cyan-deep);transform:translateY(-1px)}
.rb-btn--text{background:none;border:none;padding:0;color:inherit;font-weight:500}
.rb-btn--text .rb-arrow{transition:transform var(--rb-dur-base) var(--rb-ease)}
.rb-btn--text:hover{color:var(--rb-cyan)}
.rb-btn--text:hover .rb-arrow{transform:translateX(2px)}
.rb-btn--block{width:100%;justify-content:center}
.rb-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

/* ---- Cards --------------------------------------------------------------- */
.rb-card{border-radius:var(--rb-radius-lg);padding:var(--rb-space-6);
  transition:transform var(--rb-dur-base) var(--rb-ease),
    border-color var(--rb-dur-base) var(--rb-ease),
    box-shadow var(--rb-dur-base) var(--rb-ease)}
.rb-card--dark{background:var(--rb-bg-dark-3);border:1px solid var(--rb-border-dark)}
.rb-card--light{background:var(--rb-bg-light-3);border:1px solid var(--rb-divider);
  box-shadow:var(--rb-shadow-sm)}
.rb-card--hover:hover{transform:translateY(-2px);box-shadow:var(--rb-shadow-md);
  border-color:var(--rb-cyan)}

/* ---- Tooltip (question-mark info) --------------------------------------- */
.rb-tip{position:relative;display:inline-flex;width:15px;height:15px;
  align-items:center;justify-content:center;border-radius:50%;
  border:1px solid currentColor;opacity:.5;font-size:10px;font-weight:600;
  cursor:help;vertical-align:middle;margin-left:5px;transition:opacity var(--rb-dur-fast) ease}
.rb-tip:hover,.rb-tip:focus-visible{opacity:1}
.rb-tip__pop{position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);width:max-content;max-width:240px;
  background:var(--rb-bg-dark-3);color:var(--rb-fg-light);
  border:1px solid var(--rb-border-dark);border-radius:var(--rb-radius-md);
  padding:9px 12px;font-family:var(--rb-font-body);font-size:var(--rb-text-sm);
  font-weight:400;line-height:1.5;letter-spacing:normal;text-transform:none;
  box-shadow:var(--rb-shadow-lg);opacity:0;pointer-events:none;
  transition:opacity var(--rb-dur-fast) var(--rb-ease),transform var(--rb-dur-fast) var(--rb-ease);
  z-index:var(--rb-z-sticky)}
.rb-tip:hover .rb-tip__pop,.rb-tip:focus-visible .rb-tip__pop{
  opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- Peer market scale (THE FIX: star above, percentiles below) --------- */
.rb-scale{position:relative;padding:38px 0 34px;margin:8px 0}
.rb-scale__track{position:relative;height:8px;border-radius:var(--rb-radius-pill);
  background:linear-gradient(90deg,var(--rb-red) 0%,var(--rb-amber) 50%,var(--rb-green) 100%)}
.rb-scale__star{position:absolute;top:-30px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  transition:left var(--rb-dur-slow) var(--rb-ease)}
.rb-scale__star.is-dragging{transition:none}
.rb-scale__val{font-family:var(--rb-font-mono);font-weight:600;font-size:14px;
  color:var(--rb-cyan);white-space:nowrap;margin-bottom:2px}
.rb-scale__marker{width:18px;height:18px;color:var(--rb-cyan);cursor:grab;
  filter:drop-shadow(0 0 6px var(--rb-cyan-glow))}
.rb-scale__marker:active{cursor:grabbing}
.rb-scale__stem{position:absolute;top:-4px;left:50%;width:1px;height:3px;
  transform:translateX(-50%);background:var(--rb-cyan)}
.rb-scale__ticks{position:absolute;left:0;right:0;top:calc(100% + 8px);
  display:flex;justify-content:space-between}
.rb-scale__tick{display:flex;flex-direction:column;align-items:center;gap:2px;
  font-family:var(--rb-font-mono);font-size:11px}
.rb-scale__tick-pct{color:var(--rb-fg-dark-faint)}
.rb-scale__tick-val{color:var(--rb-fg-dark-muted);font-weight:500}
.rb-section--dark .rb-scale__tick-pct{color:var(--rb-fg-light-faint)}
.rb-section--dark .rb-scale__tick-val{color:var(--rb-fg-light-muted)}

/* ---- KPI tiles ----------------------------------------------------------- */
.rb-kpi{display:flex;flex-direction:column;gap:6px}
.rb-kpi__label{font-size:var(--rb-text-sm);color:var(--rb-fg-dark-muted);
  display:flex;align-items:center}
.rb-kpi__value{font-family:var(--rb-font-mono);font-size:var(--rb-text-2xl);
  font-weight:600;line-height:1}
.rb-kpi__value--accent{color:var(--rb-cyan-deep)}
.rb-kpi__value--gap{color:var(--rb-red)}

/* ---- CPT row (dashboard) ------------------------------------------------- */
.rb-cpt-row{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:18px;
  align-items:center;padding:16px 18px;border-radius:var(--rb-radius-md);
  border:1px solid var(--rb-divider);background:var(--rb-bg-light-3);
  transition:border-color var(--rb-dur-base) var(--rb-ease),
    box-shadow var(--rb-dur-base) var(--rb-ease)}
.rb-cpt-row:hover{border-color:var(--rb-cyan);box-shadow:var(--rb-shadow-sm)}
.rb-cpt-row__code{font-family:var(--rb-font-mono);font-weight:600;font-size:var(--rb-text-md)}
.rb-cpt-row__blur{filter:blur(4px);user-select:none;pointer-events:none}
.rb-cpt-row--locked{opacity:.55}
.rb-cpt-row--below{opacity:.4;filter:grayscale(.6)}

/* ---- Modal --------------------------------------------------------------- */
.rb-modal-backdrop{position:fixed;inset:0;background:rgba(10,15,28,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:var(--rb-z-modal);display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;transition:opacity var(--rb-dur-base) var(--rb-ease)}
.rb-modal-backdrop.is-open{opacity:1}
.rb-modal{background:var(--rb-bg-light-3);color:var(--rb-fg-dark);
  border-radius:var(--rb-radius-xl);max-width:480px;width:100%;
  padding:var(--rb-space-8);box-shadow:var(--rb-shadow-lg);
  transform:translateY(14px) scale(.985);
  transition:transform var(--rb-dur-base) var(--rb-ease);max-height:90vh;overflow:auto}
.rb-modal-backdrop.is-open .rb-modal{transform:none}
.rb-modal__title{font-family:var(--rb-font-display);font-size:var(--rb-text-xl);
  font-weight:600;letter-spacing:var(--rb-tracking-tight);margin:0 0 10px}
.rb-modal__body{font-size:var(--rb-text-md);line-height:var(--rb-leading-normal);
  color:var(--rb-fg-dark-muted)}
.rb-modal__actions{display:flex;gap:12px;margin-top:var(--rb-space-6)}

/* ---- Loading states ------------------------------------------------------ */
.rb-spinner{width:24px;height:24px;border-radius:50%;
  border:2px solid var(--rb-cyan-soft);border-top-color:var(--rb-cyan);
  animation:rb-spin .7s linear infinite}
@keyframes rb-spin{to{transform:rotate(360deg)}}
.rb-loading{display:inline-flex;align-items:center;gap:10px;
  font-size:var(--rb-text-sm);color:var(--rb-fg-dark-muted)}
.rb-progress{height:4px;border-radius:var(--rb-radius-pill);
  background:var(--rb-cyan-soft);overflow:hidden}
.rb-progress__fill{height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--rb-cyan),var(--rb-cyan-deep));
  width:0;transition:width .5s var(--rb-ease)}
.rb-skeleton{background:linear-gradient(100deg,
  var(--rb-bg-light-2) 30%,var(--rb-bg-light-3) 50%,var(--rb-bg-light-2) 70%);
  background-size:200% 100%;animation:rb-shimmer 1.4s ease-in-out infinite;
  border-radius:var(--rb-radius-sm)}
@keyframes rb-shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){
  .rb-spinner,.rb-skeleton{animation-duration:0s}}

/* ---- Pricing card -------------------------------------------------------- */
.rb-price{display:flex;flex-direction:column;gap:18px;padding:var(--rb-space-8);
  border-radius:var(--rb-radius-lg);border:1px solid var(--rb-divider);
  background:var(--rb-bg-light-3)}
.rb-price--featured{border-color:var(--rb-cyan);
  box-shadow:0 0 0 1px var(--rb-cyan),var(--rb-shadow-md)}
.rb-price__amount{font-family:var(--rb-font-mono);font-size:var(--rb-text-3xl);
  font-weight:600;line-height:1}
.rb-price__list{list-style:none;padding:0;margin:0;display:flex;
  flex-direction:column;gap:10px;font-size:var(--rb-text-base);
  color:var(--rb-fg-dark-muted)}
.rb-price__list li{display:flex;gap:9px;align-items:flex-start}

/* ---- Nav ----------------------------------------------------------------- */
[data-rb-nav]{position:fixed;top:0;left:0;right:0;z-index:var(--rb-z-nav);
  transition:background var(--rb-dur-base) var(--rb-ease),
    border-color var(--rb-dur-base) var(--rb-ease);
  border-bottom:1px solid transparent}
[data-rb-nav].rb-nav-scrolled{background:rgba(10,15,28,.85);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--rb-divider-dark)}

/* ---- Icon wrapper (no emoji) -------------------------------------------- */
.rb-icon{display:inline-flex;align-items:center;justify-content:center;
  width:1em;height:1em;vertical-align:-.125em}
.rb-icon svg{width:100%;height:100%;stroke:currentColor;fill:none}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:760px){
  .rb-section{padding:var(--rb-space-16) 0}
  .rb-section--emphasis{padding:var(--rb-space-20) 0}
  .rb-cpt-row{grid-template-columns:auto 1fr auto;gap:12px;padding:14px}
  .rb-modal{padding:var(--rb-space-6)}
  .rb-modal__actions{flex-direction:column}
}