/* rail-strip. Module scoped (rl-), site.css variables only. The ZEC side is sealed and drawn in ink;
   the ETH it buys lands on a public chain and sits on pastel. */

.rl-strip {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  min-width: 0;
}

.rl-line {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.rl-line .num:first-child {
  display: inline-block;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
}

.rl-out {
  display: inline-block;
  padding: 0 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--m) 18%, var(--paper));
  color: var(--ink);
}

.rl-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--ink-2);
}

.rl-facts li { margin: 0; }
.rl-facts .num { color: var(--ink); }

.rl-strip .src {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.rl-strip[data-state="unread"] .hint { margin: 0; font-size: 14px; color: var(--ink-2); }