/* TDGRank styles. Uses the app's CSS variables. No red anywhere: answers are never shown in red. */
.rk{margin:8px 0}
.rk-help{color:var(--mute);margin:0 0 12px}
.rk-list{display:flex;flex-direction:column;gap:10px;position:relative}
.rk-card{display:flex;align-items:stretch;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;position:relative;box-shadow:0 1px 2px #0001}
.rk-card.own{border-color:#1d2f55;border-left:5px solid #1d2f55}
.rk-card.dragging{z-index:5;box-shadow:0 8px 22px #0004;opacity:.95;border-color:var(--navy)}
.rk-grip{flex:0 0 52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#ffffff;border:1px solid var(--line);border-radius:8px;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.rk-card.dragging .rk-grip{cursor:grabbing}
.rk-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:18px}
.rk-dots{color:var(--mute);font-size:18px;letter-spacing:-3px;line-height:1}
.rk-body{flex:1 1 auto;min-width:0}
.rk-who{font-weight:700;color:var(--navy);margin-bottom:6px}
.rk-card.own .rk-who{color:var(--ink)}
.rk-pair{display:flex;gap:12px;align-items:flex-start}
.rk-map{flex:0 0 150px;width:150px;aspect-ratio:4/3;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#ffffff}
.rk-map svg,.rk-map img,.rk-map canvas{display:block;width:100%;height:100%}
.rk-mapph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:14px;border:1px dashed var(--line);box-sizing:border-box}
.rk-texts{flex:1 1 auto;min-width:0}
.rk-lab{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mute);margin-top:4px}
.rk-txt{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.rk-ctl{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:6px}
.rk-ctl .btn:disabled{opacity:.5}
.rk-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rk-bar{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.rk-submit{min-width:160px}
.rk-grip:focus-visible,.rk-ctl .btn:focus-visible{outline:3px solid #e4572e;outline-offset:2px}
.rk-why .rk-card{margin-bottom:12px}
.rk-prompt{font-weight:700;font-size:18px;color:var(--navy);margin:6px 0}
.rk-answer{margin-top:6px}
@media (max-width:640px){
  .rk-pair{flex-direction:column}
  .rk-map{width:100%;flex-basis:auto}
  .rk-card{flex-wrap:wrap}
  .rk-ctl{flex-direction:row;width:100%}
}

/* v2 additions: pinned own card, map enlarge, review picker. No red. */
.rk-card.pinned{margin:0 0 14px;background:#eef1f8;border-color:#1d2f55;flex-direction:column;gap:4px}
.rk-pin{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.rk-card.top{margin-bottom:12px;border-left:5px solid var(--navy)}
.rk-map{position:relative}
.rk-enl{position:absolute;right:6px;bottom:6px;background:#fffd}
.rk-lb{position:fixed;inset:0;background:#000d;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px}
.rk-lbin{width:min(96vw,1300px);max-height:92vh;overflow:auto;background:#fff;border-radius:8px;padding:8px}
.rk-lbx{position:fixed;right:10px;bottom:10px}

/* v3: 360 tag. Blue, never red. */
.rk-tag{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:10px;background:var(--navy);color:#fff;font-size:12px;font-weight:700;letter-spacing:.03em;vertical-align:middle}

/* v4 (D-150, AR-10): rank number beside the move buttons; neutral gray flash on a card that moved. Fixed colors only. */
.rk-ctl .rk-num{align-self:center}
.rk-card.flash{animation:rkflash .7s ease-out}
@keyframes rkflash{0%{background:#d9dce5}100%{background:#ffffff}}
@media (prefers-reduced-motion:reduce){.rk-card.flash{animation:none;background:#d9dce5}}