/* =========================================================================
   Board-preview component (window.SIBoardCard) — shared by the Ranks feed
   ('card' variant, boxed) and rail/band contexts ('flush' variant, chrome
   stripped, hairline-separated). Anatomy identical in both:
   author row → 2-line title → ranked top-3 → footer (▲ · takes · View →).
   Dark theme, white accent, green only for the vote arrow.
   ========================================================================= */

/* OFFICIAL badge (used inside cards and beside section titles) */
.rkp-official {
  display: inline-flex; align-items: center; font-size: 8.5px; font-weight: 800;
  letter-spacing: 0.07em; color: #0f1216; background: #fff; padding: 2px 7px;
  border-radius: 5px; flex: none;
}

.rkp-card {
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: transparent;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.rkp-card:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.02); }
.rkp-card.is-official { border-color: rgba(255, 255, 255, 0.22); }
.rkp-card.is-official:hover { border-color: rgba(255, 255, 255, 0.4); }

.rkp-chead { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rkp-cav,
img.rkp-cav {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none;
  background: rgba(255, 255, 255, 0.08); display: inline-block;
}
/* Official boards wear the site lockup — logo tile + oblique wordmark (same
   treatment as the global nav brand). */
.rkp-cav.is-brand,
img.rkp-cav.is-brand {
  border-radius: 6px; object-fit: contain; background: transparent;
  box-shadow: 0 0 10px rgba(0, 168, 255, 0.35);
}
.rkp-cuser { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rkp-cuser-brand {
  display: inline-block;   /* transforms don't apply to inline boxes */
  font-weight: 600;
  transform: skewX(-10deg);
  transform-origin: 0 100%;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
}
.rkp-official-sm { font-size: 8.5px; }
/* Type badge (BOARD/ARTICLE) — outlined chip, rendered only in mixed-type
   contexts (Featured hero; the future single Community Content feed). */
.rkp-ctype {
  display: inline-flex; align-items: center; font-size: 8.5px; font-weight: 800;
  letter-spacing: 0.07em; color: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.25); padding: 1px 6px;
  border-radius: 4px; flex: none;
}
.rkp-cmeta { margin-left: auto; font-size: 11.5px; color: rgba(255, 255, 255, 0.3); white-space: nowrap; flex: none; }

.rkp-ctitle {
  font-size: 17px; font-weight: 800; line-height: 1.28; letter-spacing: -0.01em; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 44px;
}

.rkp-cprev { display: flex; flex-direction: column; gap: 7px; }
.rkp-crow { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rkp-crank { font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, 0.3); width: 14px; text-align: center; flex: none; }
.rkp-cface,
img.rkp-cface {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none;
  background: rgba(255, 255, 255, 0.08);
}
.rkp-cface.is-logo,
img.rkp-cface.is-logo { border-radius: 4px; object-fit: contain; background: transparent; }
.rkp-cface-blank {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff;
}
.rkp-cname { font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rkp-cmore { font-size: 11.5px; color: rgba(255, 255, 255, 0.3); margin-left: 23px; }
/* Article body: 3-line clamped excerpt in place of the ranked top-3. */
.rkp-cexcerpt {
  font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.55);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rkp-cread { display: inline-flex; align-items: center; }

.rkp-cfoot {
  display: flex; align-items: center; gap: 14px; padding-top: 11px; margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.42);
}
.rkp-cup { display: inline-flex; align-items: center; gap: 5px; }
.rkp-cup-arrow { color: #47c47d; }
.rkp-ctakes { display: inline-flex; align-items: center; gap: 5px; }
.rkp-cview { margin-left: auto; font-weight: 700; color: #fff; }

/* ---- flush variant: same anatomy, chrome stripped, list-scale type ------- */
.rkp-card.is-flush {
  border: none; border-radius: 0; background: transparent;
  padding: 13px 0; gap: 8px;
}
.rkp-card.is-flush:hover { background: transparent; }
.rkp-card.is-flush:hover .rkp-ctitle { text-decoration: underline; text-underline-offset: 2px; }
.rkp-card.is-flush + .rkp-card.is-flush { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.rkp-card.is-flush .rkp-chead { gap: 7px; }
.rkp-card.is-flush .rkp-cav { width: 18px; height: 18px; }
.rkp-card.is-flush .rkp-cuser { font-size: 11px; }
.rkp-card.is-flush .rkp-official-sm { font-size: 8px; padding: 1px 6px; border-radius: 4px; }
.rkp-card.is-flush .rkp-cmeta { font-size: 10px; }
.rkp-card.is-flush .rkp-ctitle { font-size: 13px; font-weight: 700; line-height: 1.32; min-height: 0; }
.rkp-card.is-flush .rkp-cprev { gap: 5px; }
.rkp-card.is-flush .rkp-crank { font-size: 10.5px; width: 11px; }
.rkp-card.is-flush .rkp-cface,
.rkp-card.is-flush img.rkp-cface { width: 18px; height: 18px; }
.rkp-card.is-flush .rkp-cface-blank { font-size: 7px; }
.rkp-card.is-flush .rkp-cname { font-size: 11.5px; }
.rkp-card.is-flush .rkp-cmore { font-size: 10px; margin-left: 19px; }
.rkp-card.is-flush .rkp-cfoot { font-size: 11px; gap: 13px; padding-top: 0; border-top: none; }