/* Rare² dashboard appearance only.
 * The repeated root class intentionally wins over the processor's stylesheet,
 * including when WordPress prints that stylesheet after shortcode rendering.
 * No rules apply outside .rare2-dp. No processing elements or controls are removed.
 */
.rare2-dp.rare2-dp {
  --r2-blue: #2457ff;
  --r2-ink: #102b4b;
  --r2-muted: #536c8b;
  position: relative;
  padding: 22px;
  background: #102b4b;
  border: 1px solid #102b4b;
  border-radius: 12px;
  color: var(--r2-ink);
  box-shadow: none;
}

/* Remove the duplicated branding inside the app; the website header is untouched. */
.rare2-dp.rare2-dp .r2-brand-image,
.rare2-dp.rare2-dp .r2-server-icon { display: none !important; }

.rare2-dp.rare2-dp .r2-top {
  position: absolute;
  top: 23px;
  right: 22px;
  margin: 0;
  padding: 0;
  min-height: 0;
}
.rare2-dp.rare2-dp .r2-server { gap: 0; }
.rare2-dp.rare2-dp .r2-pill { font-size: 11px; padding: 6px 11px; }
.rare2-dp.rare2-dp .r2-heading {
  display: block;
  margin: 0;
  padding: 0 155px 19px 0;
}
.rare2-dp.rare2-dp .r2-heading h1,
.rare2-dp.rare2-dp .r2-heading h2 {
  color: #fff;
  font-size: clamp(24px, 2.6vw, 29px);
  line-height: 1.2;
  letter-spacing: -.65px;
}
.rare2-dp.rare2-dp .r2-heading .r2-eyebrow {
  color: #b9cfee;
  font-size: 10px;
  letter-spacing: 1.2px;
  margin-bottom: 7px;
}
.rare2-dp.rare2-dp .r2-subtitle { color: #d2def0; font-size: 13px; margin-top: 6px; }
.rare2-dp.rare2-dp .r2-version { display: none; }

/* The reference app's white surfaces, fine borders and modest corners. */
.rare2-dp.rare2-dp .r2-routing,
.rare2-dp.rare2-dp .r2-card,
.rare2-dp.rare2-dp .r2-metric,
.rare2-dp.rare2-dp .r2-actual,
.rare2-dp.rare2-dp .r2-email-card {
  background: #fff;
  border: 1px solid #dbe4f0;
  border-radius: 9px;
  box-shadow: none;
}
.rare2-dp.rare2-dp .r2-routing { padding: 16px; margin-bottom: 16px; }
.rare2-dp.rare2-dp .r2-card { padding: 17px; }
.rare2-dp.rare2-dp .r2-routing-heading h3 { font-size: 17px; letter-spacing: -.25px; }
.rare2-dp.rare2-dp .r2-routing-disclosure { color: #536b88; }

/* Uniform card edges: no coloured top strips, even on individual stage classes. */
.rare2-dp.rare2-dp .r2-flow { gap: 12px; }
.rare2-dp.rare2-dp .r2-flow-card {
  --flow-color: #2457ff;
  --r2-icon-ink: #2457ff;
  --r2-icon-bg: #edf4ff;
  border: 1px solid #dbe4f0;
  border-top: 1px solid #dbe4f0;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  gap: 5px;
}
.rare2-dp.rare2-dp .r2-flow-code { --r2-icon-ink: #008e70; --r2-icon-bg: #eafbf4; }
.rare2-dp.rare2-dp .r2-flow-large { --r2-icon-ink: #7750d7; --r2-icon-bg: #f3efff; }
.rare2-dp.rare2-dp .r2-flow-cloud { --r2-icon-ink: #627a97; --r2-icon-bg: #f1f4f8; }
.rare2-dp.rare2-dp .r2-flow-human { --r2-icon-ink: #a46a0b; --r2-icon-bg: #fff7e9; }
.rare2-dp.rare2-dp .r2-flow-top { flex-direction: row-reverse; margin-bottom: 2px; }
.rare2-dp.rare2-dp .r2-flow-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--r2-icon-bg);
  color: var(--r2-icon-ink);
  font-size: 16px;
  box-shadow: none;
}
.rare2-dp.rare2-dp .r2-flow-code .r2-flow-icon { font-size: 12px; }
.rare2-dp.rare2-dp .r2-flow-mode { text-align: left; font-size: 8px; letter-spacing: .35px; color: #5b708c; }
.rare2-dp.rare2-dp .r2-flow-card h3 { font-size: 13px; color: #102b4b; }
.rare2-dp.rare2-dp .r2-flow-card p { font-size: 11px; color: #586d88; }
.rare2-dp.rare2-dp .r2-flow-card strong { font-size: 12px; min-height: 34px; margin-top: 4px; }
.rare2-dp.rare2-dp .r2-flow-status {
  margin-top: auto;
  padding: 4px 6px;
  font-size: 9px;
  line-height: 1.4;
  border-radius: 5px;
  color: #526985;
  background: #f1f5fa;
}
.rare2-dp.rare2-dp .r2-flow-card:not(:last-child):after { background: transparent; color: #8096b2; }
.rare2-dp.rare2-dp .r2-flow-detail { background: #f5f8fc; border: 1px solid #e3eaf3; border-radius: 7px; }

/* Activity continues to be driven by the existing dashboard's classes. */
.rare2-dp.rare2-dp .r2-flow-card.r2-flow-active {
  background: #edf4ff !important;
  border-color: #2457ff;
  outline: 2px solid #2457ff;
  outline-offset: 1px;
  animation: rare2-style-stage-glow 2.4s ease-in-out infinite !important;
}
.rare2-dp.rare2-dp .r2-flow-active .r2-flow-icon {
  color: #fff;
  background: #2457ff;
  box-shadow: 0 0 12px #2457ff35;
}
.rare2-dp.rare2-dp .r2-flow-active .r2-flow-status { color: #fff !important; background: #2457ff !important; }
.rare2-dp.rare2-dp .r2-flow-done:not(.r2-flow-active) .r2-flow-status { color: #08735b; background: #eaf8f1; }
@keyframes rare2-style-stage-glow {
  0%, 100% { box-shadow: 0 0 0 2px #2457ff20, 0 0 13px #2457ff30; }
  50% { box-shadow: 0 0 0 4px #2457ff28, 0 0 23px #2457ff58; }
}

.rare2-dp.rare2-dp .r2-drop { background: #f7faff; border-color: #c6d8f2; border-radius: 8px; }
.rare2-dp.rare2-dp .r2-drop.r2-drag { background: #edf3ff; border-color: #2457ff; }
.rare2-dp.rare2-dp .r2-number { color: #2457ff; background: #eff5ff; }
.rare2-dp.rare2-dp .r2-primary { background: #2457ff; border-color: #2457ff; border-radius: 7px; box-shadow: none; }
.rare2-dp.rare2-dp .r2-primary:hover:not(:disabled) { background: #1947da; border-color: #1947da; }
.rare2-dp.rare2-dp .r2-secondary { border-color: #d7e3f4; border-radius: 7px; }
.rare2-dp.rare2-dp .r2-progress > div { background: #2457ff; }
.rare2-dp.rare2-dp .r2-demo-heading h3 { color: #fff; }
.rare2-dp.rare2-dp .r2-demo-heading > span { color: #d2def0; }
.rare2-dp.rare2-dp .r2-results { background: #fff; border-color: #c8dfd6; border-radius: 9px; }
.rare2-dp.rare2-dp .r2-review-note { background: #f5f8fc; border: 1px solid #dbe4f0; border-radius: 9px; }
.rare2-dp.rare2-dp .r2-footer { color: #c4d2e5; }

@media (max-width: 1000px) and (min-width: 761px) {
  .rare2-dp.rare2-dp { padding: 18px; }
  .rare2-dp.rare2-dp .r2-top { top: 19px; right: 18px; }
  .rare2-dp.rare2-dp .r2-flow { gap: 9px; }
  .rare2-dp.rare2-dp .r2-flow-card { padding: 10px 8px; }
  .rare2-dp.rare2-dp .r2-flow-mode { font-size: 7px; letter-spacing: 0; }
}
@media (max-width: 760px) {
  .rare2-dp.rare2-dp { padding: 16px; border-radius: 10px; }
  .rare2-dp.rare2-dp .r2-heading { padding: 0 0 16px; }
  .rare2-dp.rare2-dp .r2-top { position: static; justify-content: flex-end; margin: 0 0 12px; }
  .rare2-dp.rare2-dp .r2-flow-card { padding: 11px; }
  .rare2-dp.rare2-dp .r2-flow-mode { font-size: 8px; }
  .rare2-dp.rare2-dp .r2-flow-card p { min-height: 0; }
  .rare2-dp.rare2-dp .r2-demo-heading { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .rare2-dp.rare2-dp .r2-flow-card.r2-flow-active {
    animation: none !important;
    box-shadow: 0 0 0 2px #2457ff25;
  }
  .rare2-dp.rare2-dp .r2-pill.r2-ready { animation: none !important; }
}