/* ── Scoped entirely under .rdmw — never clashes with your theme ────────── */
.rdmw {
  --bg:          #0a0d14;
  --card:        #0f131c;
  --card-hover:  #121826;
  --border:      #1c2330;
  --border-hover:#2b3850;
  --txt:         #e9edf4;
  --muted:       #8a93a4;
  --accent:      #46d6e6;
  --accent-soft: rgba(70,214,230,.12);
  --amber:       #f0b13c;
  --dot:         #46d6e6;
  --radius:      16px;
  --anim-dur:    120ms;
  --anim-stagger:30ms;

  background:   var(--bg);
  color:        var(--txt);
  padding:      10px 10px 10px;
  border-radius:20px;
  box-sizing:   border-box;
  contain:      layout style;
}
.rdmw *, .rdmw *::before, .rdmw *::after { box-sizing: border-box; }

/* ── Header row: heading LEFT · tabs RIGHT (desktop) ───────────────────── */
.rdmw-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  flex-wrap:       wrap;
  margin-bottom:   26px;
}
.rdmw-title {
  margin:         0;
  font-size:      24px;
  font-weight:    700;
  letter-spacing: -.01em;
  color:          var(--txt);
  flex-shrink:    0;
}

/* ── Tabs (desktop) ──────────────────────────────────────────────────────── */
.rdmw-tabs {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
}
.rdmw-tab {
  font-family: inherit;
  font-size:   13px;
  font-weight: 600;
  color:       var(--muted);
  background:  transparent;
  border:      1px solid var(--border);
  border-radius: 999px;
  padding:     8px 18px;
  cursor:      pointer;
  white-space: nowrap;
  transition:  color .15s ease, border-color .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.rdmw-tab:hover         { color: var(--txt); border-color: var(--border-hover); }
.rdmw-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rdmw-tab.is-active     { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ── Grid ────────────────────────────────────────────────────────────────── */
.rdmw-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   18px;
  contain:               layout;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.rdmw-card {
  background:     var(--card);
  border:         1px solid var(--border);
  border-radius:  var(--radius);
  padding:        22px;
  display:        flex;
  flex-direction: column;
  min-height:     200px;
  position:       relative;
  will-change:    transform, opacity;
  transition:     transform .2s ease, border-color .2s ease,
                  background .2s ease, box-shadow .2s ease;
  animation:      rdmw-in var(--anim-dur) ease both;
}
.rdmw-card:hover {
  transform:    translateY(-4px);
  border-color: var(--border-hover);
  background:   var(--card-hover);
  box-shadow:   0 12px 30px -12px rgba(0,0,0,.6);
}
.rdmw-card-link {
  text-decoration: none;
  color:           inherit;
  display:         flex;
  flex-direction:  column;
  flex:            1;
}

/* ── Card internals ──────────────────────────────────────────────────────── */
.rdmw-card-top {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  margin-bottom:   18px;
}
.rdmw-icon {
  width:           42px;
  height:          42px;
  border-radius:   11px;
  background:      #161c28;
  border:          1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--muted);
  flex-shrink:     0;
}
.rdmw-icon svg { width: 18px; height: 18px; }

.rdmw-badge {
  font-size:      10.5px;
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--accent);
  background:     var(--accent-soft);
  border-radius:  999px;
  padding:        5px 11px;
  white-space:    nowrap;
}

.rdmw-name { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--txt); }
.rdmw-desc { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); flex: 1; }

/* ── Stats row ───────────────────────────────────────────────────────────── */
.rdmw-stats {
  display:    flex;
  gap:        20px;
  margin-top: 18px;
  font-size:  12.5px;
  color:      var(--muted);
  flex-wrap:  wrap;
}
.rdmw-stat   { display: flex; align-items: center; gap: 6px; }
.rdmw-stat b { color: var(--txt); font-weight: 700; }
.rdmw-dot    { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); flex-shrink: 0; }
.rdmw-star   { color: var(--amber); font-size: 13px; line-height: 1; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.rdmw-empty {
  grid-column: 1 / -1;
  text-align:  center;
  color:       var(--muted);
  font-size:   14px;
  padding:     40px 0;
  animation:   rdmw-in var(--anim-dur) ease both;
}

/* ── Entrance keyframe ───────────────────────────────────────────────────── */
@keyframes rdmw-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── Exit: JS adds .is-leaving to grid, removed after 80ms ──────────────── */
@keyframes rdmw-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.rdmw-grid.is-leaving {
  animation:      rdmw-out 80ms ease forwards;
  pointer-events: none;
}

/* ── Respect reduced-motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rdmw-card,
  .rdmw-empty,
  .rdmw-grid.is-leaving {
    animation:  none !important;
    transition: none !important;
  }
  .rdmw-card { will-change: auto; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */


/* Tablet — 2 columns */
@media (max-width: 960px) {
  .rdmw-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet/mobile — heading centered, tabs horizontally scrollable */
@media (max-width: 720px) {
  .rdmw-head {
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            14px;
  }
  .rdmw-title {
    width:      100%;
    text-align: center;
  }
  
  .rdmw-tabs {
    /* CRITICAL: flex-start is required for overflow scroll to work.
       justify-content:center clips overflowing items and breaks touch scroll. */
    justify-content:            flex-start;
    flex-wrap:                  nowrap;      /* never wrap to second line */
    overflow-x:                 auto;        /* enable horizontal scroll */
    -webkit-overflow-scrolling: touch;       /* momentum scroll on iOS */
    scroll-snap-type:           x mandatory;
    scrollbar-width:            none;        /* hide on Firefox */
    width:                      100%;
    padding-bottom:             2px;
  }
  .rdmw-tabs::-webkit-scrollbar { display: none; } /* hide on Chrome/Safari */
  .rdmw-tab {
    scroll-snap-align: start;
    flex-shrink:       0; /* never squish — overflow into scroll area instead */
  }
}

/* Mobile — 1 column; re-enforce scroll rules so nothing bleeds back in */
@media (max-width: 600px) {
  
  .rdmw-grid   { grid-template-columns: 1fr; gap: 14px; }
  .rdmw-title  { font-size: 21px; }
  .rdmw-card   { padding: 18px; }
  .rdmw-name   { font-size: 16px; }
  .rdmw-badge  { font-size: 10px; }
  /* re-enforce: must repeat these or base flex-wrap:wrap bleeds back */
  .rdmw-tabs {
    flex-wrap:       nowrap;
    overflow-x:      auto;
    justify-content: flex-start;
  }
  .rdmw-tab { flex-shrink: 0; }
}

/* Very small phones */
@media (max-width: 380px) {
  .rdmw       { padding: 10px 10px 10px; }
  .rdmw-title { font-size: 19px; }
}