/* Card design v2: the default card layout on /search and /live
   (data-card-style="v2" on <body>). ?cards=v1 shows the previous design, whose
   rules stay untouched in trade-cards.css. Every rule is scoped to
   data-card-style="v2" in cards view, so rows view is unaffected. The prefix
   "html:root" matches both themes with the same weight as the light-mode
   prefix html[data-theme="light"], so the light section at the end overrides
   the dark colours rule for rule. To go back to v1, remove the body attribute.

   Layout (existing rowHtml children, no new markup):
     1 .t header          | 2 direction      | 3 Entry   | 4 Target
     5 Stop               | 6 result pill    | 7 vertical entry line */

html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade {
  /* The direction column is only as wide as "↓ SHORT" or the result pill. */
  grid-template-columns: auto minmax(0, 1.2fr) 26px minmax(0, 1fr);
  /* Equal body rows keep the Target and Stop boxes the same height, so the
     line can run exactly from one box's centre to the other's. */
  grid-template-rows: auto 1fr 1fr;
  grid-template-areas:
    "head head head head"
    "dir entry line target"
    "res entry line stop";
  gap: 10px 18px;
  padding: 18px 24px 20px;
  align-items: stretch;
  /* Green/red (the card's --card-long/--card-short) mark the direction, the
     dollar amounts, the line and faint Target/Stop tints; the border, result
     pill and edge stripe stay neutral. */
  border-color: rgba(255,255,255,.055);
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade:hover { border-color: rgba(255,255,255,.085); }
/* A thin, light grey edge stripe with no glow, whatever the direction. */
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade::before { width: 3px; background: rgba(242,240,234,.2); box-shadow: none; }

/* Header: stamp and trade number over a hairline divider. */
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(1) {
  grid-area: head;
  margin: 0 0 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: #d6d6d0;
  font-size: 13px;
}

/* Direction: arrow beside the word. */
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(2) {
  grid-area: dir;
  align-self: end;
  justify-self: start;
  padding: 0;
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .badge.long,
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .badge.short {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 28px;
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .badge.long::before,
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .badge.short::before {
  font-size: 1em;
  line-height: 1;
}

/* Result: a neutral pill with the ringed check or cross beside the label. */
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(6) {
  grid-area: res;
  align-self: start;
  justify-self: stretch;
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  width: auto;
  padding: 8px 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  box-shadow: none;
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .badge.result {
  flex: none;
  width: 30px;
  height: 30px;
  border-color: rgba(242,240,234,.35);
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .badge.result svg { width: 15px; height: 15px; }
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .result-label {
  color: #f2f0ea;
  font-size: 12px;
  letter-spacing: 2px;
}

/* Entry: the central panel, with a divider on its left. */
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(3) {
  grid-area: entry;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 20px;
  background: #050505;
  border-color: rgba(255,255,255,.08);
  border-radius: 14px;
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(3)::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.07);
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(3) .k {
  font-size: 12px;
  letter-spacing: 3px;
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(3) .v {
  margin-top: 6px;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
}

/* Target and Stop: faintly tinted boxes stacked on the right. */
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(4),
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(5) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-self: stretch;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid;
  border-radius: 12px;
  box-shadow: none;
  text-align: left;
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(4) {
  grid-area: target;
  background: rgba(85,227,106,.04);
  border-color: rgba(85,227,106,.18);
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(5) {
  grid-area: stop;
  background: rgba(255,59,81,.04);
  border-color: rgba(255,59,81,.2);
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(4) .k,
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(5) .k {
  font-size: 11px;
  letter-spacing: 3px;
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(4) .v,
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(5) .v {
  /* Price left, dollar amount right, on one line. */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  color: #f2f0ea;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(4) .trade-dollars,
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(5) .trade-dollars {
  display: inline;
  font-size: 15px;
  font-weight: 700;
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(4) .trade-dollars { color: var(--card-long); }
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(5) .trade-dollars { color: var(--card-short); }

/* Entry line, turned vertical: Target dot at the top, Stop dot at the bottom,
   entry dot at the same --entry-position. It spans the two box centres
   (each box is half the column minus half the 10px row gap). Absolute
   positioning makes the grid area its containing block, so the percentage
   insets follow the area's height. Dashes are stripes of the card colour laid
   over the line (green fading to grey at the entry, then red), so the dots stay solid. */
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > .entry-range {
  grid-area: line;
  position: absolute;
  top: calc(25% - 2.5px);
  bottom: calc(25% - 2.5px);
  left: calc(50% - 1px);
  width: 2px;
  height: auto;
  margin: 0;
  border-radius: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 4px, #020202 4px 7px),
    linear-gradient(180deg, rgba(85,227,106,.6), rgba(242,240,234,.5) var(--entry-position), rgba(255,59,81,.6));
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .entry-range::before,
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .entry-range::after {
  left: 50%;
  width: 7px;
  height: 7px;
  box-shadow: none;
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .entry-range::before { top: 0; }
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .entry-range::after { top: 100%; }
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .entry-marker {
  left: 50%;
  top: var(--entry-position);
  width: 1px;
  height: 1px;
  background: none;
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .entry-marker::after {
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 1.5px #050505;
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .entry-range-hover { inset: 0 -12px; }

/* Shorts: Stop above Target, so on every card the line reads as a price scale
   with the higher price on top. The boxes swap grid areas, and the line, its
   end dots and the entry dot flip to match (--entry-position is measured from
   Target, so the dot sits at 100% minus it). */
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade:has(.badge.short) > :nth-child(4) { grid-area: stop; }
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade:has(.badge.short) > :nth-child(5) { grid-area: target; }
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade:has(.badge.short) > .entry-range {
  background:
    repeating-linear-gradient(180deg, transparent 0 4px, #020202 4px 7px),
    linear-gradient(180deg, rgba(255,59,81,.6), rgba(242,240,234,.5) calc(100% - var(--entry-position)), rgba(85,227,106,.6));
}
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade:has(.badge.short) .entry-range::before { color: var(--card-short); }
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade:has(.badge.short) .entry-range::after { color: var(--card-long); }
html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade:has(.badge.short) .entry-marker { top: calc(100% - var(--entry-position)); }

/* Three columns need ~660px cards, so two per row only on wide screens. */
@media (max-width: 1400px) {
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: a compact stack. Arrow beside the word with the result pill on the
   same row, a slimmer Entry panel, and Target/Stop boxes with the price and
   dollar amount on one line, the vertical line to their right. */
@media (max-width: 760px) {
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade {
    grid-template-columns: minmax(0, 1fr) auto 18px;
    grid-template-rows: auto auto auto 1fr 1fr;
    grid-template-areas:
      "head head head"
      "dir res res"
      "entry entry entry"
      "target target line"
      "stop stop line";
    gap: 10px 12px;
    padding: 16px 18px 18px;
  }
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(1) { margin-bottom: 6px; padding-bottom: 12px; font-size: 12px; }
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(2) { align-self: center; }
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .badge.long,
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .badge.short { flex-direction: row; align-items: center; gap: 10px; font-size: 26px; }
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .badge.long::before,
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .badge.short::before { font-size: 1em; line-height: 1; }
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(6) { align-self: center; gap: 8px; padding: 6px 10px; border-radius: 10px; }
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .badge.result { width: 26px; height: 26px; }
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .badge.result svg { width: 13px; height: 13px; }
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .result-label { font-size: 11px; letter-spacing: 1.5px; }
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(3) { padding: 12px 16px; border-radius: 12px; }
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(3)::before { content: none; }
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(3) .k { font-size: 10px; }
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(3) .v { margin-top: 4px; font-size: 26px; }
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(4),
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(5) { padding: 8px 14px; border-radius: 10px; }
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(4) .k,
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(5) .k { font-size: 10px; }
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(4) .v,
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(5) .v { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 16px; }
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(4) .trade-dollars,
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(5) .trade-dollars { display: inline; font-size: 15px; }
  /* The row gap is 10px here, so the box centres sit 2.5px further in. */
  html:root .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > .entry-range { top: calc(25% - 2.5px); bottom: calc(25% - 2.5px); }
}

/* Light mode: the same layout on the light card surface (#faf9f6 raised card,
   #f4f2ed recessed Entry panel), with faint light green/red Target/Stop tints.
   Selectors mirror the rules above so these win by order. */
html[data-theme="light"] .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade { border-color: rgba(255,255,255,.78); }
html[data-theme="light"] .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade::before { background: #d3d1cc; }
html[data-theme="light"] .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade:hover { border-color: rgba(255,255,255,.9); }
html[data-theme="light"] .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(1) {
  color: #3d3d39;
  border-bottom-color: rgba(20,20,18,.08);
}
html[data-theme="light"] .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(6) {
  background: rgba(20,20,18,.02);
  border-color: rgba(20,20,18,.1);
}
html[data-theme="light"] .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .badge.result { border-color: rgba(20,20,18,.35); }
html[data-theme="light"] .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .result-label { color: #141412; }
html[data-theme="light"] .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(3) {
  background: #f4f2ed;
  border-color: rgba(20,20,18,.075);
}
html[data-theme="light"] .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(3)::before { background: rgba(20,20,18,.08); }
html[data-theme="light"] .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(4) {
  background: rgba(21,154,70,.05);
  border-color: rgba(21,154,70,.22);
}
html[data-theme="light"] .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(5) {
  background: rgba(209,0,25,.04);
  border-color: rgba(209,0,25,.2);
}
html[data-theme="light"] .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(4) .v,
html[data-theme="light"] .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade > :nth-child(5) .v { color: var(--text); }
html[data-theme="light"] .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > .entry-range {
  background:
    repeating-linear-gradient(180deg, transparent 0 4px, #faf9f6 4px 7px),
    linear-gradient(180deg, rgba(21,154,70,.6), rgba(20,20,18,.25) var(--entry-position), rgba(209,0,25,.55));
}
html[data-theme="light"] .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) .feed-frame #feed .trade:has(.badge.short) > .entry-range {
  background:
    repeating-linear-gradient(180deg, transparent 0 4px, #faf9f6 4px 7px),
    linear-gradient(180deg, rgba(209,0,25,.55), rgba(20,20,18,.25) calc(100% - var(--entry-position)), rgba(21,154,70,.6));
}
html[data-theme="light"] .tape-page[data-card-style="v2"]:not([data-trade-view="rows"]) #feed .trade .entry-marker::after { box-shadow: 0 0 0 1px rgba(20,20,18,.4), 0 1px 3px rgba(20,20,18,.25); }