/* Search and Live: display only. Data, filters and paging stay in live.js. */
/* Hero and console-head keep the tape-premium treatment on both pages
   (Manrope h1, mono copy, Doto figure) — no overrides here. */
.tape-page .summary-row { position: relative; display: block; padding: 22px 0 18px; }
.tape-page .summary { width: 100%; }
.session-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding: 26px 24px;
  background: transparent;
  border: 1px solid #333330;
  border-radius: 6px;
}
[data-mode="members"] .session-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.session-metric { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.session-metric strong { color: var(--text); font: 400 34px var(--mono); font-variant-numeric: tabular-nums; }
.session-metric span { color: #b7b7b0; font-size: 10px; letter-spacing: 1.4px; }
.session-page { margin-top: 24px; color: #b7b7b0; font-size: 10px; }
.tape-page .page-size { position: absolute; right: 0; bottom: 18px; font-size: 10px; }
.tape-page .feed-frame { border: 0; background: none; }
.tape-page .feed-head { display: none; }
.tape-page #feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tape-page #feed > :not(.trade) { grid-column: 1 / -1; }
.tape-page .trade {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  gap: 0 12px;
  padding: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.018), transparent 38%),
    #020202;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015),
    -4px -4px 10px rgba(255,255,255,.01),
    8px 10px 22px rgba(0,0,0,.9);
  align-items: start;
  animation: none;
}
.tape-page .trade:last-child { border-bottom: 1px solid rgba(255,255,255,.045); }
.tape-page .trade:hover {
  background: linear-gradient(145deg, rgba(255,255,255,.028), transparent 40%), #050505;
  border-color: rgba(255,255,255,.085);
}
/* direction bar on the left edge: green long / red short / grey unknown */
.tape-page .trade {
  --card-long: #55e36a;
  --card-short: #ff3b51;
}
.tape-page .trade::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #3f3f3c;
}
.tape-page .trade:has(.badge.long) { border-color: rgba(85,227,106,.14); }
.tape-page .trade:has(.badge.short) { border-color: rgba(255,59,81,.14); }
.tape-page .trade:has(.badge.long)::before {
  background: #41ff5f;
  box-shadow: 1px 0 6px rgba(65,255,95,.48);
}
.tape-page .trade:has(.badge.short)::before {
  background: #ff1e2d;
  box-shadow: 1px 0 6px rgba(255,30,45,.48);
}
/* Disabled for now: do not generate or animate the live-card border layer. */
[data-mode="members"] .trade.latest-live::after {
  content: none;
  animation: none;
}
/* rows: 1 timestamp / 2 direction / 3 entry | result / 4 target | stop */
.tape-page .trade > :nth-child(1) { grid-area: 1 / 1 / 2 / 3; margin-bottom: 14px; }
.tape-page .trade > :nth-child(2) {
  grid-area: 2 / 1 / 3 / 3;
  width: 100%;
  justify-self: start;
  padding-bottom: 18px;
}
.tape-page .trade > :nth-child(3) {
  grid-area: 3 / 1 / 4 / 2;
  align-self: stretch;
}
.tape-page .trade > :nth-child(6) {
  grid-area: 3 / 2 / 4 / 3;
  justify-self: end;
  align-self: stretch;
  justify-content: center;
  width: 100%;
}
.tape-page .trade > :nth-child(3),
.tape-page .trade > :nth-child(4),
.tape-page .trade > :nth-child(5),
.tape-page .trade > :nth-child(6) {
  padding: 16px 18px;
  background: #000000;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
  box-shadow:
    inset 3px 3px 7px rgba(0,0,0,.96),
    inset -1px -1px 2px rgba(255,255,255,.018);
}
.tape-page .trade > :nth-child(4) { grid-area: 4 / 1 / 5 / 2; margin-top: 12px; }
.tape-page .trade > :nth-child(5) { grid-area: 4 / 2 / 5 / 3; margin-top: 12px; }
.tape-page .trade .t { font-size: 11px; color: #b7b7b0; }
.tape-page .trade .f .k { color: #b7b7b0; font-size: 10px; }
.tape-page .trade .f .v { font-size: 14px; line-height: 1.5; }
.tape-page .trade > :nth-child(3) .v { font-size: 24px; letter-spacing: .5px; }
/* direction badge becomes a large arrow + word row */
.tape-page .badge.long,
.tape-page .badge.short {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1;
}
.tape-page .badge.long { color: var(--card-long); }
.tape-page .badge.short { color: var(--card-short); }
.tape-page .badge.long::before { content: "\2191"; }
.tape-page .badge.short::before { content: "\2193"; }
.trade-dollars { display: block; color: #b7b7b0; font-size: 12px; }
.trade-result { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tape-page .trade .badge.result { width: 44px; height: 44px; }
.tape-page .trade .badge.result svg { width: 21px; height: 21px; }
.result-label { color: #b7b7b0; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; }
@media (max-width: 1100px) {
  .tape-page #feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .tape-page #feed { grid-template-columns: minmax(0, 1fr); }
  .session-metrics, [data-mode="members"] .session-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 22px 14px; gap: 24px 12px; }
  .session-metric strong { font-size: 28px; }
  .tape-page .page-size { display: none; }
  .tape-page .tape-hero { padding: 32px 0 24px; }
}