/*
 * THE FEED ROW.
 *
 * Extracted from views/crypto-whales.ejs so the whale page and the terminal's
 * whale rail share ONE row system instead of each inventing a card. Whatever
 * renders a big trade, on any surface, renders it through these classes: the
 * eye then tracks one column down a feed rather than re-parsing a differently
 * shaped blob per source.
 *
 * time | coin | side | size | detail | action
 *
 * The terminal narrows the grid for a rail (see combined-orderbook.css) but
 * does not redefine the vocabulary: the colours, weights and the size bar are
 * decided here, once.
 */
/* ── Tier 2: the feed ─────────────────────────────────────────────
   A tape is read by COLUMN, not by card. The old feed rendered each
   trade as a self-contained blob three lines tall with its own widths,
   so nothing lined up vertically and the eye had to re-parse every
   row. Fixed columns mean coin, side, size and venue all sit on the
   same x each time; size is right-aligned tabular so magnitudes
   compare by eye. The size bar is now the row's own background rather
   than a third line, which triples the rows visible per screen. */
.cw-row {
    position: relative; display: grid; align-items: center;
    grid-template-columns: 58px 92px 52px 104px minmax(0, 1fr) 30px;
    gap: 10px; padding: 9px 12px;
    border-bottom: 1px solid rgba(37,74,110,0.28);
    font-size: 0.75rem; text-decoration: none;
}
.cw-row:last-child { border-bottom: 0; }
.cw-row:hover { background: rgba(37,74,110,0.18); }
/* Magnitude as the row's own bar: no extra line, still comparable. */
.cw-row-bar { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; opacity: 0.16; pointer-events: none; }
.cw-row-bar.is-buy { background: linear-gradient(90deg, var(--tt-up, #37D98A), transparent); }
.cw-row-bar.is-sell { background: linear-gradient(90deg, var(--tt-down, #FA5772), transparent); }
/* :not() the bar. At equal specificity the later rule wins, so a bare
   `.cw-row > *` re-set the absolutely-positioned bar to relative, which
   put it back in flow as grid column 1 and shifted every cell right. */
.cw-row > *:not(.cw-row-bar) { position: relative; z-index: 1; min-width: 0; }
.cw-row-time { font-size: 0.64rem; color: #8FB0C9; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cw-row-coin { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; color: #FFF6EA; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-row-side { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.4px; text-align: center; padding: 2px 0; border-radius: 4px; }
.cw-row-side.is-buy { background: var(--tt-up-soft, rgba(55,217,138,0.13)); color: var(--tt-up, #37D98A); }
.cw-row-side.is-sell { background: var(--tt-down-soft, rgba(250,87,114,0.13)); color: var(--tt-down, #FA5772); }
.cw-row-usd { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 0.86rem; text-align: right; font-variant-numeric: tabular-nums; }
.cw-row-usd.is-buy { color: var(--tt-up, #37D98A); }
.cw-row-usd.is-sell { color: var(--tt-down, #FA5772); }
.cw-row-meta { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: hidden; color: #8FB0C9; font-size: 0.68rem; }
.cw-row-meta > * { white-space: nowrap; }
.cw-row-venue { font-weight: 700; padding: 1px 7px; border-radius: 4px; font-size: 0.62rem; }
.cw-row-act { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: #8FB0C9; cursor: pointer; font-size: 0.9rem; padding: 0; min-width: 30px; min-height: 30px; border-radius: 6px; }
.cw-row-act:hover { color: var(--tt-gold, #F7C11E); background: rgba(247,193,30,0.1); }
.cw-row-wallet { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.64rem; font-weight: 700; color: color-mix(in srgb, var(--tt-wallet, #A78BFA) 65%, white); text-decoration: none; }
.cw-row-wallet:hover { color: color-mix(in srgb, var(--tt-wallet, #A78BFA) 37%, white); text-decoration: underline; }
.cw-row-flag { font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; padding: 1px 5px; border-radius: 3px; background: rgba(247,193,30,0.14); color: var(--tt-gold, #F7C11E); }

/* A forced close is not "notable size". Gold already means the latter on the
   whale page ("twice the usual size", "big trade #3"), so the terminal's
   liquidation marker takes the down colour instead of overloading one badge
   with two meanings across two surfaces. */
.cw-row-flag.is-forced { background: var(--tt-down-soft, rgba(250,87,114,0.13)); color: var(--tt-down, #FA5772); }

/* ── Liveness ────────────────────────────────────────────────────────────── */
/* These stayed inline on the whale page when the row vocabulary moved here, so
   the terminal's rail could never announce a new row at all. A feed that does
   not show you what just arrived is a table. */
.cw-row.is-new { animation: cw-row-in 320ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes cw-row-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cw-row.is-new { animation: none; }
}