/* RELATED TOKENS + CHERRY DEALS window v2 — see reltokens.js.
   Scoped .rt-*; themed via theme.css vars so it holds up in both wtf (light)
   and dark modes. The whole thing is one boxed window (surface bg, hairline,
   radius 16) hidden entirely until real data arrives, so these rules never
   paint an empty shell. Cherry lots ride inside the SAME window as a second
   sub-row under their own small header. */

.rt-wrap { margin: 14px 0 4px; }
.rt-wrap[hidden] { display: none !important; }

.rt-window {
  background: var(--panel, #161618);
  border: 1px solid var(--hairline, #2a2a2c);
  border-radius: 16px;
  padding: 16px 18px;
}

/* window header row */
.rt-head { margin: 0 0 10px; }
.rt-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink-hi, #f6f1fa); }
.rt-head .rt-sub { margin: 4px 0 0; }
.rt-sub { margin: 0; font-size: 12px; color: var(--ink-lo, #8e8e93); max-width: 72ch; }
.rt-sub[hidden] { display: none !important; }

.rt-strip {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}

/* token card v2 — the WHOLE card is one outbound link to Intel Terminal */
.rt-card {
  position: relative;
  flex: 0 0 200px; min-height: 92px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border-radius: 12px;
  text-decoration: none; color: inherit;
  background: var(--raised, rgba(255, 255, 255, .045));
  border: 1px solid var(--hairline, rgba(255, 255, 255, .08));
  transition: transform .12s ease, border-color .12s ease;
}
.rt-card:hover { transform: translateY(-2px); border-color: var(--hairline-2, rgba(255, 255, 255, .22)); }
/* outbound ↗ marker, hover only; linked cards only */
.rt-card::after {
  content: '↗'; position: absolute; top: 8px; right: 10px;
  font-size: 12px; font-weight: 700; color: var(--ink-mid, #cfc4e4);
  opacity: 0; transition: opacity .12s ease;
}
.rt-card:hover::after { opacity: .9; }
.rt-card:not([href]) { cursor: default; }
.rt-card:not([href]):hover { transform: none; border-color: var(--hairline, rgba(255, 255, 255, .08)); }
.rt-card:not([href])::after { content: none; }

.rt-card-top { display: flex; align-items: center; gap: 8px; min-height: 30px; }
/* grey circle skeleton; the real logo fades in over it on load */
.rt-logo-shell {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--well, rgba(255, 255, 255, .08)); overflow: hidden;
}
.rt-logo {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .2s ease;
}
.rt-logo-live .rt-logo { opacity: 1; }
.rt-id { display: flex; flex-direction: column; min-width: 0; }
.rt-sym { font-size: 14px; font-weight: 700; line-height: 1.15; color: var(--ink-hi, #f6f1fa); }
.rt-name {
  font-size: 12px; color: var(--ink-lo, #8e8e93); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 130px;
}
.rt-spark { width: 100%; height: 34px; display: block; }
.rt-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rt-mc { font-size: 12px; color: var(--ink-lo, #8e8e93); }
.rt-chip {
  font-size: 10.5px; padding: 2px 6px; border-radius: 999px;
  background: var(--well, rgba(255, 255, 255, .08));
}
.rt-chip.rt-up { color: #2ecc71; background: rgba(46, 204, 113, .12); }
.rt-chip.rt-down { color: #ff5470; background: rgba(255, 84, 112, .12); }

/* cherry lots — second sub-row inside the SAME window */
.rt-cherry:not(:empty) {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--hairline, rgba(255, 255, 255, .08));
}
.rt-subtitle { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-hi, #f6f1fa); }
.rt-cherry .rt-sub { margin: 2px 0 8px; }

.rt-lot {
  flex: 0 0 200px; display: flex; flex-direction: column; gap: 5px;
  padding: 10px; border-radius: 12px; text-decoration: none; color: inherit;
  background: var(--raised, rgba(255, 255, 255, .045));
  border: 1px solid var(--hairline, rgba(255, 255, 255, .08));
  transition: transform .12s ease, border-color .12s ease;
}
.rt-lot:hover { transform: translateY(-2px); border-color: var(--hairline-2, rgba(255, 255, 255, .22)); }
.rt-lot-head { display: flex; align-items: center; justify-content: space-between; }
.rt-lot-id { font-size: 11px; color: var(--ink-lo, #8e8e93); }
.rt-lot-assets { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.rt-lot-wish {
  font-size: 11.5px; color: var(--ink-mid, #cfc4e4); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.rt-lot-offers { font-size: 11px; color: var(--ink-lo, #8e8e93); }
.rt-cherry-foot { padding: 2px 2px 4px; }
.rt-cherry-cta { font-size: 12.5px; font-weight: 600; text-decoration: none; }

@media (max-width: 640px) {
  .rt-window { padding: 12px; }
}