/* =====================================================================
   PICO · feed.css — «LIVE FEED · ENTRIES & EXITS» (js/core/feed.js), la insignia NEW de las filas
   (PICO.feed.badge) y la rejilla de la portada «top 10 + feed». Estilo STADIUM: radio 0, bordes gordos,
   sombras duras, pantalla con barrido, letra condensada en mayúsculas.
   Las animaciones se paran SOLO con html.sin-movimiento (regla global de base.css), nunca con prefers-reduced-motion.
   ===================================================================== */

.feed {
  --fc: var(--green);
  position: relative; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border: 3px solid var(--mint);
  box-shadow: 10px 10px 0 var(--green-deep);
  container: feed / inline-size;
}

/* barra de arriba: punto rojo (solo con dato LIVE), título y botones de raya */
.feed__bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  padding: 13px 16px;
  background: var(--ink);
  border-bottom: 3px solid color-mix(in srgb, var(--green) 38%, var(--ink));
}
.feed__bar .dot { visibility: hidden; }
.feed.is-live .feed__bar .dot { visibility: visible; }
.feed__title {
  min-width: 0;
  font: 800 15px/1.15 var(--f-num); letter-spacing: .2em; text-transform: uppercase;
  color: var(--green);
}
.feed__title b { font-weight: 900; color: var(--white); }
/* botones de raya: en un feed estrecho, fila propia a todo lo ancho; en uno ancho, a la derecha del título */
.feed__tabs { width: 100%; display: flex; border: 2px solid var(--mint-3); }
.feed__tab {
  flex: 1;
  appearance: none; margin: 0; border: 0; background: transparent; cursor: pointer;
  padding: 9px 8px 8px;
  font: 800 12px/1 var(--f-num); letter-spacing: .16em; text-transform: uppercase;
  color: var(--mint-2);
}
@container feed (min-width: 560px) {
  .feed__tabs { width: auto; margin-left: auto; }
  .feed__tab { flex: none; padding: 8px 12px 7px; }
}
.feed__tab + .feed__tab { border-left: 2px solid var(--mint-3); }
.feed__tab:hover { color: var(--white); }
.feed__tab[aria-pressed="true"] { color: var(--ink); background: var(--green); }
.feed__tab:focus-visible { outline-offset: -4px; outline-color: var(--yellow); }

/* pantalla con barrido suave (sin viñeta: el texto tiene que leerse entero) */
.feed__screen { position: relative; flex: 1; min-height: 96px; background: var(--screen); }
.feed__screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .16) 3px 4px);
}
.feed__list { position: relative; list-style: none; margin: 0; padding: 0; }

/* un cambio: hora | etiqueta ▲ ENTERS / ▼ OUT + frase + recorrido y PnL */
.feed__item {
  position: relative;
  display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 14px; row-gap: 6px;
  padding: 13px 16px 13px 20px;
  border-bottom: 1px solid var(--ink-3);
}
.feed__item:last-child { border-bottom: 0; }
.feed__item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--fc); }
.feed__item--enter { --fc: var(--green); }
.feed__item--exit { --fc: var(--red); }
.feed__item--enter.feed__item--podium { --fc: var(--gold); }
.feed__time { grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
.feed__time b { font: 900 23px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--white); }
.feed__utc { font: 800 10px/1 var(--f-num); letter-spacing: .24em; color: var(--mint-3); }
.feed__ago { margin-top: 3px; font: 700 12.5px/1.1 var(--f-num); letter-spacing: .04em; color: var(--mint-2); white-space: nowrap; }
.feed__tag {
  justify-self: start;
  display: inline-flex; align-items: stretch;
  font: 900 11.5px/1 var(--f-num); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.feed__tag b { padding: 4px 8px 3px 7px; font-weight: 900; color: var(--ink); background: var(--fc); }
.feed__tag i { padding: 4px 7px 3px; font-style: normal; color: var(--fc); background: var(--ink); box-shadow: inset 0 0 0 2px var(--fc); }
.feed__txt {
  font: 600 18px/1.22 var(--f-num); letter-spacing: .01em;
  color: var(--mint); overflow-wrap: anywhere;
}
.feed__txt b { font-weight: 800; color: var(--white); }
/* [Fotos] la foto del squad, en línea delante de su nombre */
.feed__txt .emb { display: inline-block; vertical-align: -6px; margin-right: 8px; --es: 25px; }
.feed__item--enter .feed__rk { color: var(--green); }
.feed__item--enter.feed__item--podium .feed__rk { color: var(--gold); }
.feed__name { font-weight: 800; color: var(--white); text-decoration: none; }
.feed__name:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.feed__sub { font: 700 13px/1.25 var(--f-num); letter-spacing: .05em; font-variant-numeric: tabular-nums; color: var(--mint-3); }
.feed__sub .up { color: var(--green); }
.feed__sub .dn { color: var(--red-2); }

/* entra un cambio nuevo: se desliza desde la izquierda y destella con su color */
.feed__item.is-in { animation: feedIn .9s var(--ease-out) both; }
.feed__item.is-in .feed__tag { animation: feedTag 1.6s steps(2, jump-none) 3; }
@keyframes feedIn {
  0%   { translate: -34px 0; opacity: 0; background-color: color-mix(in srgb, var(--fc) 42%, transparent); }
  35%  { translate: 0 0; opacity: 1; background-color: color-mix(in srgb, var(--fc) 30%, transparent); }
  100% { translate: 0 0; opacity: 1; background-color: transparent; }
}
@keyframes feedTag { 50% { filter: brightness(1.45); } }

/* sin cambios todavía: «Watching the board — no changes since 04:02 UTC» con un cursor que parpadea */
.feed__empty {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 24px 18px 24px 20px;
}
.feed__empty p {
  font: 700 15px/1.45 var(--f-num); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mint-2);
}
.feed__empty p::before {
  content: ''; display: inline-block; width: 10px; height: 14px; margin: 0 10px -1px 0;
  background: var(--green); animation: feedBlink 1.1s steps(2, jump-none) infinite;
}
@keyframes feedBlink { 50% { opacity: 0; } }
/* «Top 50: 6 changes · see them» cuando la raya elegida está tranquila */
.feed__hint {
  appearance: none; margin: 0; cursor: pointer;
  padding: 8px 12px 7px;
  font: 800 12px/1 var(--f-num); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); background: var(--purple-2); border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.feed__hint::after { content: ' →'; }
.feed__hint:hover { background: var(--green); }

.feed__foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  padding: 10px 14px 10px 16px;
  background: var(--ink);
  border-top: 3px solid color-mix(in srgb, var(--green) 38%, var(--ink));
}
.feed__foot .fresh { font-size: 12px; letter-spacing: .16em; }
.feed__note { font: 700 11.5px/1.2 var(--f-num); letter-spacing: .14em; text-transform: uppercase; color: var(--mint-3); }
.feed__more {
  appearance: none; margin: 0 0 0 auto; cursor: pointer;
  padding: 8px 12px 7px;
  font: 800 12px/1 var(--f-num); letter-spacing: .16em; text-transform: uppercase;
  color: var(--mint); background: transparent; border: 2px solid var(--mint-3);
}
.feed__more:hover { color: var(--ink); background: var(--green); border-color: var(--green); }

/* insignia NEW de una fila (PICO.feed.badge): entró en el top 10 (o en el podio) hace ≤ 30 min */
.fnew {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 7px 3px;
  font: 800 11px/1 var(--f-num); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink); background: var(--yellow);
  box-shadow: 2px 2px 0 var(--ink);
}
.fnew b { font-weight: 900; }
.fnew--podium { background: var(--gold); }
.fnew--top50 { background: var(--purple-2); }

/* =====================================================================
   PORTADA: el TOP 10 y el feed. ≥ 1360 px, uno al lado del otro; por debajo, el feed encima de la tabla.
   ===================================================================== */
.board-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.board-grid__main { min-width: 0; }
.board-grid__feed { order: -1; min-width: 0; }

@media (min-width: 1360px) {
  .board-grid { grid-template-columns: minmax(0, 1fr) 384px; align-items: start; gap: 30px; }
  .board-grid__feed { order: 0; }
  /* la tabla cede sitio: columnas algo más estrechas, sin la cifra de mcap y con R/U en el desglose */
  .board-grid .lb__head, .board-grid .lbr { grid-template-columns: 50px 54px minmax(0, 1fr) 76px 196px 168px; column-gap: 12px; }
  .board-grid .lbr .coinchip__mc { display: none; }
  .board-grid .lbr .pnl__split .l { display: none; }
  .board-grid .lbr .pnl__split .s { display: inline; }
}

@media (max-width: 760px) {
  .feed { box-shadow: 7px 7px 0 var(--green-deep); }
  .feed__bar { padding: 11px 12px; }
  .feed__title { font-size: 13px; letter-spacing: .16em; }
  .feed__tab { padding: 10px 6px 9px; }
  .feed__item { grid-template-columns: 50px minmax(0, 1fr); column-gap: 11px; padding: 12px 12px 12px 17px; }
  .feed__time b { font-size: 20px; }
  .feed__txt { font-size: 16.5px; }
  .feed__sub { font-size: 12.5px; }
  .feed__empty { padding: 20px 14px 20px 17px; }
  .feed__empty p { font-size: 13.5px; }
  .feed__foot { padding: 9px 12px; }
  .board-grid { gap: 28px; }
}