/* ============================================================
   CATBACK trades.css — live trades terminal window.
   Colors/fonts strictly from tokens.css custom properties.
   Rem-based grid columns so the header row and data rows align
   even though their font sizes differ.
   ============================================================ */

/* ---- DESK 01: the terminal is a unit mounted on the wall ------
   #trades-body is the alcove; the bracket foot below the casing
   sells "this box is screwed to the branch wall". */
#trades-body {
  position: relative;
  padding-bottom: 22px;
}
#trades-body::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 168px;
  height: 16px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    linear-gradient(180deg,
      var(--charcoal) 0 4px,
      var(--forest-2) 4px 7px,
      var(--charcoal) 7px 12px,
      var(--shade) 12px 16px);
  box-shadow: 0 0 0 var(--px) var(--shade-soft);
}

.trades-term {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden; /* clip slide-in / flash inside the window */
  /* the casing: opaque face, stacked pixel bezel, and a soft cast
     shadow so the unit stands off the plate behind it */
  background-color: var(--ink-3);
  box-shadow:
    0 0 0 var(--px) var(--forest),
    0 0 0 calc(2 * var(--px)) var(--ink-3),
    0 0 0 calc(3 * var(--px)) var(--forest-2),
    calc(3 * var(--px)) calc(4 * var(--px)) 0 0 var(--shade-soft),
    0 16px 26px var(--shade),
    inset 0 0 30px var(--glow-soft);
}

/* ---- title bar --------------------------------------------- */
.trades-titlebar {
  position: relative; /* hosts the animated static overlay */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  /* brushed emerald header rail — the unit's engraved face plate */
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(0, 0, 0, 0.10) 3px 4px),
    linear-gradient(180deg, var(--c-emerald) 0 46%, var(--forest-2) 46% 100%);
  border-bottom: var(--px) solid var(--forest-2);
  box-shadow: inset 0 var(--px) 0 0 rgba(255, 255, 255, 0.18);
}

/* subtle animated CRT static across the title bar (transform-only,
   runs only while the terminal is onscreen — js toggles .is-onscreen) */
.trades-titlebar::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background:
    repeating-linear-gradient(0deg, var(--white-hi) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, var(--cream) 0 1px, transparent 1px 2px);
}
.trades-term.is-onscreen .trades-titlebar::after {
  animation: trades-static 0.7s steps(1, end) infinite;
}
@keyframes trades-static {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3px, 2px); }
  50%  { transform: translate(2px, -2px); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}

/* status lamps on the face plate — branch hues only, never a
   decorative red (red is reserved for SELL / ERROR below) */
.trades-dots { display: inline-flex; gap: 6px; }
.trades-dots i {
  display: block;
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 var(--px) rgba(0, 0, 0, 0.35);
}
.trades-dots i:nth-child(1) { background: var(--charcoal); }
.trades-dots i:nth-child(2) { background: var(--gold); }
.trades-dots i:nth-child(3) { background: var(--moss); }

.trades-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1px;
  /* engraved-white lettering on the emerald rail */
  color: var(--ink-3);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}

.trades-flags {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.trades-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--ink-3);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
}
.trades-live-dot {
  position: relative; /* anchor for the ping ring */
  width: 8px;
  height: 8px;
  background: var(--ink-3);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
  animation: trades-blink 1.1s steps(1, end) infinite;
}

/* cyan ping ring on each new trade (js re-toggles .is-ping; scale/opacity only) */
.trades-live-dot.is-ping::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--px));
  border: var(--px) solid var(--gold);
  pointer-events: none;
  opacity: 0;
  animation: trades-ping 460ms steps(4, end) both;
}
@keyframes trades-ping {
  from { transform: scale(1);   opacity: 0.9; }
  to   { transform: scale(2.4); opacity: 0; }
}
@keyframes trades-blink {
  0%, 54%   { opacity: 1; }
  55%, 100% { opacity: 0.15; }
}

.trades-demo-badge {
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--ink);
  background: var(--amber);
  padding: 4px 6px;
  box-shadow: 0 0 0 var(--px) var(--ink);
}
.trades-demo-badge[hidden] { display: none; }

/* ---- shared row grid ---------------------------------------- */
.trades-cols,
.tr-row {
  display: grid;
  grid-template-columns: 7.8rem 5.7rem 6.2rem minmax(0, 1fr) 5.4rem auto;
  grid-template-areas: 'side sol tokens wallet time sig';
  align-items: center;
  column-gap: 10px;
  padding: 7px 12px 7px 10px;
}

.trades-cols {
  font-family: var(--font-term);
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--terminal-dim);
  border-bottom: var(--px) solid var(--forest-2);
  user-select: none;
  /* faint sticky treatment: opaque backing + stepped drop so the header
     reads as a fixed rail if the terminal ever scrolls internally */
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  box-shadow: 0 calc(2 * var(--px)) 0 0 var(--scanline);
}
.trades-cols span:nth-child(2),
.trades-cols span:nth-child(3),
.trades-cols span:nth-child(6) { text-align: right; }

.trades-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden; /* the stepped slide-in never bleeds outside */
}

/* ---- rows ---------------------------------------------------- */
.tr-row {
  position: relative;
  font-family: var(--font-term);
  font-size: 19px;
  line-height: 1.25;
  color: var(--terminal-soft);
  border-left: calc(2 * var(--px)) solid transparent;
  border-bottom: var(--px) solid var(--forest);
  transition:
    transform var(--dur-fast) var(--ease-snap),
    border-left-color var(--dur-fast) var(--ease-mech);
}
.trades-list li:last-child { border-bottom: 0; }

/* refined hover: slight lift + left accent tick (focus-within = keyboard parity) */
.tr-row:hover,
.tr-row:focus-within {
  transform: translateY(-1px);
  border-left-color: var(--terminal);
  z-index: 1;
}
.tr-row.is-whale:hover,
.tr-row.is-whale:focus-within { border-left-color: var(--gold); }

.tr-side {
  grid-area: side;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  overflow: hidden;
}
.tr-sol {
  grid-area: sol;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-tokens {
  grid-area: tokens;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-wallet {
  grid-area: wallet;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-time {
  grid-area: time;
  white-space: nowrap;
  color: var(--terminal-dim);
}
.tr-sigwrap {
  grid-area: sig;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

/* side: glyph AND word, never color alone */
.is-buy .tr-side  { color: var(--terminal); }
.is-sell .tr-side { color: var(--alert); }

/* SELL rows stay muted (side keeps full contrast) */
.is-sell .tr-sol,
.is-sell .tr-tokens,
.is-sell .tr-wallet { opacity: 0.78; }

/* whale: subtle gold left border + pixel tag */
.tr-row.is-whale { border-left-color: var(--gold); }

/* whale arrival: one gold shimmer sweep, stepped (js adds .tr-shimmer only
   on animated live inserts, never under reduced motion) */
.tr-row.tr-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 26%;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0 12%,
    var(--gold) 12% 42%,
    var(--white-hi) 42% 58%,
    var(--gold) 58% 88%,
    transparent 88% 100%);
  opacity: 0;
  animation: tr-shimmer-sweep 640ms steps(6, end) 120ms both;
}
@keyframes tr-shimmer-sweep {
  from { transform: translateX(0);    opacity: 0.2; }
  to   { transform: translateX(560%); opacity: 0; }
}

.tr-whale-tag {
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--ink);
  background: var(--gold);
  padding: 3px 5px;
}

/* signature chip */
.tr-sig {
  position: relative;
  font-family: var(--font-term);
  font-size: 17px;
  padding: 1px 8px;
  white-space: nowrap;
  transition:
    color var(--dur-fast) var(--ease-snap),
    border-color var(--dur-fast) var(--ease-snap),
    box-shadow var(--dur-fast) var(--ease-snap);
}
.tr-sig.is-demo {
  color: var(--terminal-dim);
  border: var(--px) dashed var(--terminal-dim);
}
/* tooltip-style brightening on hover (native title tooltip carries the detail) */
.tr-sig.is-demo:hover,
.tr-sig.is-demo:focus-visible {
  color: var(--terminal-soft);
  border-color: var(--terminal-dim);
  background: var(--forest);
  box-shadow: 0 0 10px var(--glow-soft);
}
a.tr-sig {
  color: var(--sol-cyan);
  background: var(--forest);
  border: var(--px) solid var(--forest-2);
}
a.tr-sig:hover,
a.tr-sig:focus-visible {
  color: var(--terminal);
  border-color: var(--sol-cyan);
  box-shadow: 0 0 10px var(--glow-cyan);
}
a.tr-sig::before { /* invisible >=40px touch target */
  content: '';
  position: absolute;
  inset: -11px -6px;
}

/* ---- entry animation: stepped slide-in, eased ----------------- */
@keyframes tr-slide-in {
  0%   { transform: translateY(-16px); opacity: 0; }
  32%  { transform: translateY(-16px); opacity: 0; }
  33%  { transform: translateY(-9px);  opacity: 0.5; }
  65%  { transform: translateY(-9px);  opacity: 0.5; }
  66%  { transform: translateY(-3px);  opacity: 0.85; }
  99%  { transform: translateY(-3px);  opacity: 0.85; }
  100% { transform: translateY(0);     opacity: 1; }
}
.tr-row.tr-anim { animation: tr-slide-in 180ms var(--ease-snap); }

/* 1px micro-bounce on the side glyph at insert (buy hops up, sell dips down;
   .tr-anim is only applied when motion is allowed) */
.tr-row.tr-anim.is-buy .tr-glyph  { animation: tr-glyph-up 240ms steps(1, end) 60ms; }
.tr-row.tr-anim.is-sell .tr-glyph { animation: tr-glyph-down 240ms steps(1, end) 60ms; }
@keyframes tr-glyph-up {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-1px); }
  70%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}
@keyframes tr-glyph-down {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(1px); }
  70%  { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

/* BUY rows flash soft green once (opacity-only overlay, stepped) */
.tr-row.tr-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--terminal);
  opacity: 0;
  pointer-events: none;
  animation: tr-buy-flash 520ms var(--ease-mech) 60ms both;
}
@keyframes tr-buy-flash {
  0%   { opacity: 0.24; }
  39%  { opacity: 0.24; }
  40%  { opacity: 0.11; }
  79%  { opacity: 0.11; }
  80%  { opacity: 0.04; }
  100% { opacity: 0; }
}

/* reduced motion: kill one-shots + blink (JS also skips classes) */
@media (prefers-reduced-motion: reduce) {
  .trades-live-dot { animation: none; }
  .tr-row.tr-anim { animation: none; }
  .tr-row.tr-flash::after { animation: none; opacity: 0; }
  .trades-term.is-onscreen .trades-titlebar::after { animation: none; }
  .trades-live-dot.is-ping::after { animation: none; opacity: 0; }
  .tr-row.tr-shimmer::before { animation: none; opacity: 0; }
  .tr-row.tr-anim.is-buy .tr-glyph,
  .tr-row.tr-anim.is-sell .tr-glyph { animation: none; }
  .tr-row:hover,
  .tr-row:focus-within { transform: none; }
}

/* ---- footer line ---------------------------------------------- */
.trades-foot {
  margin: 0;
  padding: 10px 12px;
  border-top: var(--px) solid var(--forest-2);
  font-family: var(--font-term);
  font-size: 16px;
  color: var(--amber);
}

/* ---- mobile ----------------------------------------------------- */
@media (max-width: 700px) {
  .trades-cols { display: none; }

  .tr-row {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      'side sol time'
      'wallet tokens sig';
    row-gap: 3px;
    font-size: 17px;
    padding: 9px 10px 9px 8px;
  }
  .tr-sol,
  .tr-tokens { text-align: left; }
  .tr-time { justify-self: end; }
  .tr-sigwrap { justify-self: end; }
}