/* Card design v3: the default card on /search and /live, in both themes.
   <body> carries data-card-style="v2" and data-card-v3="tall" (?cards=v3 sets
   "wide"); v3 builds on v2, and live.js renders a .trade-bricks SVG per card
   (bricksHtml) only while data-card-v3 is set. ?cards=v2 and ?cards=v1 remove
   it to show the earlier designs; rows view is unaffected. "html:root" weighs
   the same as html[data-theme="light"], so the light section at the end
   overrides the dark colours rule for rule.

   Wide layout: direction and result | 3D risk/reward stack | Target, Entry and
   Stop boxes in price order (v2 swaps Target and Stop on shorts). */

/* Rows view keeps its own layout. */
.tape-page[data-card-v3][data-trade-view="rows"] .trade-bricks { display: none; }

html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade {
  grid-template-columns: auto minmax(260px, 1fr) minmax(190px, 300px);
  /* Three 56px box rows: the stack's SVG is drawn to this 184px height. */
  grid-template-rows: auto repeat(3, 56px);
  grid-template-areas:
    "head head head"
    "dir bricks target"
    "dir bricks entry"
    "res bricks stop";
  gap: 8px 18px;
}
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(6) { align-self: center; }

/* Entry becomes the middle box, sized like Target and Stop. */
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(3) {
  padding: 8px 14px;
  background: #050505;
  border-color: rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: none;
}
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(3)::before { content: none; }
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade > :nth-child(3) .k { font-size: 11px; letter-spacing: 3px; }
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade > :nth-child(3) .v { margin-top: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(4),
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(5) { padding: 8px 14px; }
/* Signed dollar amounts: the reward at Target, the risk at Stop. */
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade > :nth-child(4) .trade-dollars::before { content: "+"; }
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade > :nth-child(5) .trade-dollars::before { content: "\2212"; }

/* The stack replaces the vertical line (it carries the same entry position). */
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade > .entry-range { display: none; }
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade > .trade-bricks { grid-area: bricks; position: relative; min-width: 0; }
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade > .trade-bricks::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"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade > .trade-bricks svg { display: block; width: 100%; height: 100%; overflow: visible; }
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-slab polygon {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-risk { color: var(--card-short); }
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-reward { color: var(--card-long); }
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-entry { color: #f2f0ea; }
/* Glass: brightest on top, dimmer front, faint side. */
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-top { fill-opacity: .26; stroke-opacity: .7; }
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-front { fill-opacity: .14; stroke-opacity: .5; }
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-side { fill-opacity: .07; stroke-opacity: .35; }
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-slab.bk-entry polygon { fill-opacity: .12; stroke-opacity: .35; }
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-lead,
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-rail {
  stroke: rgba(242,240,234,.3);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-dot { fill: currentColor; stroke: #020202; stroke-width: 1.5; }
html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-dot.bk-entry { fill: #ffffff; }

/* Vertical card (?cards=v3-tall): three per row, the stack as a band above
   the boxes, with the leaders hidden. Phones use the same stacked layout. The
   7% nudge re-centres the slabs once the leader area on their right is hidden. */
html:root .tape-page[data-card-style="v2"][data-card-v3="tall"]:not([data-trade-view="rows"]) #feed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  html:root .tape-page[data-card-style="v2"][data-card-v3="tall"]:not([data-trade-view="rows"]) #feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html:root .tape-page[data-card-style="v2"][data-card-v3="tall"]:not([data-trade-view="rows"]) .feed-frame #feed .trade { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 140px repeat(3, 56px); grid-template-areas: "head head" "dir res" "bricks bricks" "target target" "entry entry" "stop stop"; gap: 10px 12px; }
html:root .tape-page[data-card-style="v2"][data-card-v3="tall"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(2), html:root .tape-page[data-card-style="v2"][data-card-v3="tall"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(6) { align-self: center; }
html:root .tape-page[data-card-style="v2"][data-card-v3="tall"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > .trade-bricks::before, html:root .tape-page[data-card-style="v2"][data-card-v3="tall"]:not([data-trade-view="rows"]) .feed-frame #feed .trade .bk-links { display: none; }
html:root .tape-page[data-card-style="v2"][data-card-v3="tall"]:not([data-trade-view="rows"]) .feed-frame #feed .trade > .trade-bricks svg { width: auto; margin: 0 auto; transform: translateX(7%); }

@media (max-width: 760px) {
  html:root .tape-page[data-card-style="v2"][data-card-v3="tall"]:not([data-trade-view="rows"]) #feed { grid-template-columns: minmax(0, 1fr); }
  html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 140px repeat(3, 56px); grid-template-areas: "head head" "dir res" "bricks bricks" "target target" "entry entry" "stop stop"; gap: 10px 12px; }
  html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(2), html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade > :nth-child(6) { align-self: center; }
  html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade > .trade-bricks::before, html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade .bk-links { display: none; }
  html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade > .trade-bricks svg { width: auto; margin: 0 auto; transform: translateX(7%); }
  html:root .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade { grid-template-rows: auto auto 110px repeat(3, 52px); padding: 16px 18px 18px; }
}

/* Light mode: the v2 light card with a recessed neutral Entry box, and the
   stack in the light green/red (the card's --card-long/--card-short). */
html[data-theme="light"] .tape-page[data-card-style="v2"][data-card-v3]: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"][data-card-v3]:not([data-trade-view="rows"]) .feed-frame #feed .trade > .trade-bricks::before { background: rgba(20,20,18,.08); }
html[data-theme="light"] .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-entry { color: #3d3d39; }
html[data-theme="light"] .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-top { fill-opacity: .2; stroke-opacity: .75; }
html[data-theme="light"] .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-front { fill-opacity: .12; stroke-opacity: .55; }
html[data-theme="light"] .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-side { fill-opacity: .06; stroke-opacity: .4; }
html[data-theme="light"] .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-slab.bk-entry polygon { fill-opacity: .1; stroke-opacity: .4; }
html[data-theme="light"] .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-lead,
html[data-theme="light"] .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-rail { stroke: rgba(20,20,18,.3); }
html[data-theme="light"] .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-dot { stroke: #faf9f6; }
html[data-theme="light"] .tape-page[data-card-style="v2"][data-card-v3]:not([data-trade-view="rows"]) #feed .trade .bk-dot.bk-entry { fill: #ffffff; stroke: rgba(20,20,18,.45); }