/* Pixboard rail -- served under the opaque path (/<PATH>/r.css). Light theme to
   match the RTE site (brand #6366f1). Class names are site-named ("rte-"), never
   ad/sponsor/banner tokens, so a blocker has nothing to match. */

.rte-rail {
  position: fixed; top: 50%; right: 10px; transform: translateY(-50%);
  z-index: 1030; display: flex; flex-direction: column; align-items: center;
  gap: 5px; max-height: 88vh;
}
.rte-rail-list {
  list-style: none; margin: 0; padding: 2px; display: flex; flex-direction: column;
  gap: 5px; overflow-y: auto; overflow-x: hidden; max-height: 80vh; scrollbar-width: thin;
}
.rte-cell { margin: 0; padding: 0; line-height: 0; }
.rte-tile {
  display: block; width: 40px; height: 40px; border-radius: 8px; overflow: hidden;
  border: 1px solid #e2e8f0; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.rte-tile:hover, .rte-tile:focus-visible {
  transform: scale(1.06); box-shadow: 0 5px 16px rgba(99,102,241,.4);
  border-color: #6366f1; outline: none;
}
.rte-tile img { display: block; width: 40px; height: 40px; object-fit: cover; }
.rte-mark {
  margin-top: 4px; font-size: 9px; line-height: 1.2; color: #94a3b8; text-align: center;
  text-decoration: none; max-width: 54px; letter-spacing: .01em;
}
.rte-mark:hover { color: #6366f1; }

/* Flyout cards -- fixed to the viewport, positioned by JS. */
.rte-cards { position: static; }
.rte-card {
  position: fixed; z-index: 1050; width: 320px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(15,23,42,.28); overflow: hidden;
  opacity: 0; pointer-events: none; transform: translateY(4px);
  transition: opacity .13s ease, transform .13s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.rte-card.rte-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
/* 3:2 hero, letterboxed (never cropped) on a dark mat. */
.rte-card-hero { background: #0f172a; aspect-ratio: 3 / 2; }
.rte-hero { display: block; width: 100%; height: 100%; object-fit: contain; background: #0f172a; }
.rte-card-body { padding: 13px 15px 14px; }
.rte-card-h { font-weight: 700; font-size: 15px; line-height: 1.3; color: #0f172a; margin-bottom: 5px; }
.rte-card-p { font-size: 13px; line-height: 1.5; color: #475569; margin: 0 0 11px; }
.rte-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rte-card-host { font-size: 11px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rte-card-cta {
  flex: none; font-size: 13px; font-weight: 600; color: #fff; background: #6366f1;
  padding: 6px 13px; border-radius: 7px; text-decoration: none;
}
.rte-card-cta:hover { background: #4f46e5; }

/* Invisible bridge spanning the tile->card gap so the pointer can cross. */
.rte-bridge { position: fixed; z-index: 1049; pointer-events: auto; background: transparent; }

/* Hide only on narrow (phone) viewports; show down to the 700px breakpoint. */
@media (max-width: 699px) { .rte-rail { display: none; } }
@media (prefers-reduced-motion: reduce) { .rte-tile, .rte-card { transition: none; } }