/* RemoteReps hero mosaic: a bento of mixed-size tiles. One blue hero tile carries the
   platform, six white group tiles expand to their modules and pin the tools they
   replaced, two stat tiles carry the numbers. Depth is tonal (fog frame, white tiles,
   blue hero) plus the 1px blue ring. No shadows, no gradients. */
.rr-map {
  aspect-ratio: auto;
  padding: 10px;
  background: var(--bg2);
  overflow: visible;                   /* the ring may spill past the frame; never crop it */
}
.rr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: minmax(148px, auto) minmax(104px, auto) minmax(122px, auto) minmax(150px, auto);
  grid-template-areas:
    "a c d e"
    "a h h e"
    "b h h i"
    "b f g g";
  gap: 10px;
}
.rr-tiles { display: contents; }       /* transparent on desktop: the grid places the tiles directly */
.rr-hero { grid-area: h; }
.rr-area-a { grid-area: a; } .rr-area-b { grid-area: b; } .rr-area-c { grid-area: c; } .rr-area-d { grid-area: d; }
.rr-area-e { grid-area: e; } .rr-area-f { grid-area: f; } .rr-area-g { grid-area: g; } .rr-area-i { grid-area: i; }

/* Shared tile */
.rr-tile, .rr-hero, .rr-stat {
  position: relative;
  background: var(--bg);
  border-radius: var(--r-md);
  padding: 16px 18px 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rr-tile-title, .rr-stat-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.22;
  color: var(--text);
  text-wrap: balance;
}

/* Group tile: a flip card. Front = title and the retired tools' marks; the plus button
   rotates it to a back face with the module list. Faces carry the surface, the tile is the stage. */
.rr-tile { background: none; padding: 0; perspective: 1400px; }
.rr-card { position: relative; flex: 1; display: flex; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1); }
.rr-tile.is-flipped .rr-card { transform: rotateY(180deg); }
.rr-face {
  background: var(--bg);
  border-radius: var(--r-md);
  padding: 16px 18px 16px;
  display: flex; flex-direction: column; min-width: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.rr-front { flex: 1; }
.rr-back { position: absolute; inset: 0; transform: rotateY(180deg); overflow: auto; padding: 14px 18px 14px; }
.rr-back-title { font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: -0.005em; }

.rr-avatars { display: flex; margin-top: auto; padding-top: 14px; }
/* Tile illustration: fills the empty middle of a tall tile, centred */
.rr-illo { flex: 1; display: grid; place-items: center; padding: 10px 0 0; }
.rr-illo img { width: 150px; max-width: 70%; height: auto; display: block; }
.rr-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--bg); box-shadow: 0 0 0 2px var(--bg), inset 0 0 0 1px var(--bg3);
  display: grid; place-items: center;
}
.rr-avatar + .rr-avatar { margin-left: -12px; }
.rr-avatar img, .rr-avatar svg { width: 24px; height: 24px; display: block; }
.rr-avatar img { border-radius: 50%; }

.rr-mods { list-style: none; margin: 6px 0 0; padding: 6px 36px 0 0; border-top: 1px solid var(--bg3); }
.rr-mods li { padding: 2px 0; line-height: 1.3; }
.rr-mod { display: block; font-size: 13.5px; color: var(--text); }
.rr-sub { display: block; font-size: 12px; color: var(--muted); }
.rr-replaced-text { font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: auto; padding: 8px 40px 0 0; }
.rr-replaced-text b { font-weight: 600; color: var(--text); }
/* Static tile: no flip, so it paints its own white face and reserves no room for the button */
.rr-tile--static { background: var(--bg); padding: 16px 18px 16px; perspective: none; }
.rr-tile--static .rr-mods { margin-top: 10px; padding: 0; border-top: 0; }
.rr-tile--static .rr-replaced-text { padding-right: 0; }

/* The plus button: bottom-right of the stage, above both faces; turns into a cross when flipped */
.rr-flip {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0;
  background: var(--bg2); color: var(--text); cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.2s, color 0.2s, transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.rr-flip svg { width: 12px; height: 12px; display: block; }
.rr-flip:hover { background: var(--accent); color: #fff; }
.rr-flip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rr-tile.is-flipped .rr-flip { transform: rotate(45deg); background: var(--text); color: #fff; }
.rr-tile.is-flipped .rr-flip:hover { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .rr-card, .rr-flip { transition: none; }
}

/* Hero tile: the one blue surface */
.rr-hero { background: var(--accent); color: #fff; padding: 20px 22px; overflow: hidden; }
.rr-hero-mark { width: 40px; height: 40px; border-radius: 11px; background: #fff; display: grid; place-items: center; }
.rr-hero-mark img { width: 26px; height: 26px; display: block; }
.rr-hero-title { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; margin-top: 14px; max-width: 14ch; text-wrap: balance; }
.rr-hero-sub { font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.82); margin-top: 8px; max-width: 44ch; }
.rr-hero-sub b { font-weight: 600; color: #fff; }
/* The One Ring: sits in the card's top-right corner, spilling past the edge,
   and casts a soft shadow onto the card and the tiles beside it */
.rr-hero { overflow: visible; z-index: 2; }
.rr-ring {
  position: absolute;
  top: -24px;                          /* 15% of the ring's width sits past the card edge */
  right: -24px;
  width: 159px;
  pointer-events: none;
}
.rr-ring img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.5)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
}

/* Stat tiles */
.rr-stat-num { font-size: 38px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; margin-top: auto; padding-top: 10px; }
.rr-stat-num small { font-size: 26px; letter-spacing: -0.02em; color: var(--text); margin-left: 6px; }
.rr-stat-label { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.35; }
.rr-personas { display: flex; margin-top: auto; padding-top: 10px; }
.rr-persona {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--text); background: var(--bg2);
  box-shadow: 0 0 0 2px var(--bg);
}
.rr-persona + .rr-persona { margin-left: -8px; }
.rr-persona:nth-child(2) { background: var(--bg3); }
.rr-persona:nth-child(3) { background: var(--accent); color: #fff; }
.rr-persona:nth-child(4) { background: var(--text); color: #fff; }

@media (max-width: 768px) {
  .rr-map { padding: 10px; border-radius: var(--r-md); }
  /* Blue hero on top, then one horizontal snap carousel of equal-height tiles */
  .rr-grid { display: flex; flex-direction: column; gap: 10px; }
  .rr-hero, .rr-tile, .rr-stat { grid-area: auto; }
  .rr-hero { order: -1; padding-bottom: 24px; }
  .rr-ring { width: 132px; right: -10px; top: -18px; }   /* stays inside the outer frame's padding */
  .rr-tiles {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -10px;                   /* bleed to the frame edge so cards can peek in from the right */
    padding: 0 10px;
    scroll-padding-inline: 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .rr-tiles::-webkit-scrollbar { display: none; }
  .rr-tiles > * { flex: 0 0 76%; max-width: 300px; height: 236px; scroll-snap-align: start; }
  .rr-replaced { flex-direction: row; align-items: center; gap: 12px; }
  .rr-hero-title { font-size: 30px; }
  .rr-tile, .rr-stat, .rr-face { border-radius: var(--r-sm); min-height: 0; }
  .rr-stat, .rr-tile--static, .rr-face { padding: 18px; }
  .rr-back { padding: 14px 18px; }
  .rr-illo img { width: 104px; }
  .rr-stat-num { font-size: 44px; padding-top: 14px; }
}