/* /copy-trading only, on top of /paper-trading/paper-trading.css. The page is about one trade made twice, theirs and
   yours, so it opens on a tape: the trader's lane over the price, your copy's lane under it, read left to right.
   Every mark on it is the app's own (My copies' Latest trades, app/src/pages/copy/running/desk.css and desk.tsx;
   tests/landing-pages.test.mjs holds the two equal). Green is a buy or money up, orange a sell or money down, violet
   the Copying tag, and nothing else on this page wears them but the button. Static page, no script. */

/* ---- first screen: the words across the top, the tape under them ---- */
.ct-hero{ padding:40px 0 64px; }
/* no wash behind this first screen: the tape is the picture */
.ct-hero::before{ content:none; }
.ct-top{ display:grid; grid-template-columns:minmax(0,1fr); gap:28px; }
.ct-hero h1{ font-size:clamp(34px, 4.6vw, 58px); max-width:15em; text-wrap:balance; }
.ct-hero .lede{ margin-top:18px; max-width:34em; }
.ct-hero .cta{ margin-top:0; }
.ct-art{ margin:36px 0 0; min-width:0; }
.ct-cap{ margin:12px 0 0; max-width:52em; font:500 13px/1.5 var(--sans); color:var(--muted); }
@media (min-width:1000px){
  .ct-hero{ padding:52px 0 76px; }
  .ct-top{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:48px; align-items:end; }
}

/* ---- the app's marks, shared by the tape, the four ways and the worked example ---- */
.ct-tape, .ct-lt, .ct-loss, .ct-kinds, .ct-moves{ --g0:#060510; --g1:#0d0b1c; --g2:#161522; --up:#21c95e; --dn:#ff622e; --mut:#9899a3; --lt:#c9c9d1; --rule:rgba(203,208,235,.07); }
/* a trade's badge: 22 square, 6 corners, the letter 600 at 12, no fill and no edge */
.ct-b{ display:flex; align-items:center; justify-content:center; flex:none; width:22px; height:22px; border-radius:6px; font:600 12px/1 var(--sans); letter-spacing:-.12px; }
.ct-b.up{ color:var(--up); }
.ct-b.dn{ color:var(--dn); }
.ct-b.mut{ color:var(--mut); }
/* a face: round, on the chip ground */
.ct-face{ display:block; flex:none; width:30px; height:30px; border-radius:50%; background:var(--g2); object-fit:cover; }
/* a token with no logo: its first letter, white 600 at .42 of the tile, on the tile's hue */
.ct-tile{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:18px; height:18px; border-radius:5px; background:#3d8bfd; color:#fff; font:600 8px/1 var(--sans); }
/* the Copying tag: 20 tall, 6 corners, violet on a violet tint */
.ct-tag{ display:inline-flex; align-items:center; flex:none; height:20px; padding:0 6px; border-radius:6px; background:rgba(139,88,228,.12); color:#8b58e4; font:500 12px/1 var(--sans); letter-spacing:-.12px; white-space:nowrap; }

/* ---- the tape: their lane, the price with your exits around it, your lane ---- */
.ct-tape{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"them tok" "tthem tthem" "chart chart" "tyou tyou" "you you"; gap:8px; padding:16px; border-radius:12px; background:var(--g1); color:#f8f8f8;
  font:400 14px/21px var(--sans); letter-spacing:-.12px; font-variant-numeric:tabular-nums; }
.ct-tape b{ font-weight:500; }
.ct-tape i{ font-style:normal; }
.ct-who{ display:flex; align-items:center; gap:8px; min-width:0; white-space:nowrap; }
/* on a phone the names sit outside the lanes, the trader's and the token's above and yours below, so the two lanes
   mirror around the price */
.ct-who.them{ grid-area:them; }
.ct-who.tok{ grid-area:tok; }
.ct-who.you{ grid-area:you; }
.ct-track.them{ grid-area:tthem; }
.ct-track.you{ grid-area:tyou; }
.ct-chart{ grid-area:chart; }
.ct-track{ position:relative; height:44px; }
.ct-track.you{ height:62px; }
.ct-ev{ position:absolute; left:var(--x); display:flex; flex-direction:column; align-items:center; gap:1px; transform:translateX(-50%); white-space:nowrap; }
.ct-track.them .ct-ev{ bottom:0; }
.ct-track.you .ct-ev{ top:0; }
/* the first and last trade keep their words inside the lane */
.ct-ev.al{ align-items:flex-start; transform:translateX(-11px); }
.ct-ev.ar{ align-items:flex-end; transform:translateX(calc(-100% + 11px)); }
.ct-ev i{ color:#f8f8f8; font-weight:500; }
.ct-ev i.up{ color:var(--up); font-weight:500; }
.ct-ev i.mu{ color:var(--mut); font-size:12px; line-height:16px; letter-spacing:0; }
/* the price: the page ground let into the card. The lines stretch with the lane; the words on them do not. */
.ct-chart{ position:relative; height:150px; border-radius:8px; background:var(--g0); overflow:hidden; }
.ct-chart svg{ position:absolute; inset:0; width:100%; height:100%; }
.ct-chart svg *{ fill:none; vector-effect:non-scaling-stroke; }
/* your entry, as My copies' chart draws its zero line */
.ct-zero{ stroke:rgba(203,208,235,.16); stroke-dasharray:3 4; }
.ct-tpl{ stroke:rgba(33,201,94,.5); stroke-dasharray:3 4; }
.ct-sll{ stroke:rgba(255,98,46,.5); stroke-dasharray:3 4; }
.ct-wall{ stroke:rgba(203,208,235,.22); stroke-dasharray:3 4; }
.ct-tick{ stroke:rgba(203,208,235,.22); }
/* the price while your copy holds it is the chart's own line; before and after it is not yours */
.ct-held{ stroke:var(--up); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.ct-away{ stroke:rgba(203,208,235,.34); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.ct-dot{ position:absolute; left:var(--x); top:var(--y); width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--up); box-shadow:0 0 0 3px var(--g0); }
.ct-dot.dn{ background:var(--dn); }
.ct-l{ position:absolute; padding:0 4px; background:var(--g0); font:500 12px/16px var(--sans); letter-spacing:0; white-space:nowrap; }
.ct-l.tp{ left:calc(6% + 4px); top:calc(20% - 20px); color:var(--up); }
.ct-l.sl{ left:calc(6% + 4px); top:calc(86% - 20px); color:#ff8a5c; }
.ct-l.hold{ right:calc(1.5% + 3px); top:calc(64% - 8px); color:var(--mut); }
@media (min-width:760px){
  .ct-tape{ grid-template-columns:128px minmax(0,1fr); grid-template-areas:"them tthem" "tok chart" "you tyou"; column-gap:16px; padding:20px 24px 20px 20px; }
  /* each name sits level with its lane's badges */
  .ct-who.them{ align-self:end; margin-bottom:-4px; }
  .ct-who.tok{ align-self:center; }
  .ct-who.you{ align-self:start; height:22px; }
  .ct-chart{ height:170px; }
}

/* the one moving thing on the page: the tape runs once, left to right, and each trade lands as the price reaches it */
@media (prefers-reduced-motion: no-preference){
  .ct-pen{ animation:ct-pen 3.2s linear .3s backwards; }
  .ct-ev, .ct-dot{ animation:ct-in .3s ease-out backwards; animation-delay:calc(var(--t) * 3.2s + .3s); }
}
@keyframes ct-pen{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes ct-in{ from{ opacity:0; } }

/* ---- the steps: five stops on one line, left to right as the tape runs ---- */
.ct-pipe{ list-style:none; margin:40px 0 0; padding:0; counter-reset:s; display:grid; grid-template-columns:minmax(0,1fr); }
.ct-pipe li{ counter-increment:s; position:relative; padding:2px 0 28px 48px; }
.ct-pipe li:last-child{ padding-bottom:0; }
.ct-pipe li::before{ content:counter(s); position:absolute; left:0; top:0; width:30px; height:30px; display:grid; place-items:center; border-radius:50%;
  background:var(--raised); font:600 14px/1 var(--sans); font-variant-numeric:tabular-nums; color:var(--w); }
.ct-pipe li::after{ content:""; position:absolute; left:14.5px; top:38px; bottom:8px; width:1px; background:var(--line-hi); }
.ct-pipe li:last-child::after{ content:none; }
.ct-pipe h3{ margin:0 0 6px; font:700 clamp(17px, 1.7vw, 20px)/1.3 var(--sans); letter-spacing:-.01em; }
.ct-pipe p{ margin:0; font:500 15px/1.6 var(--sans); color:var(--soft); max-width:44em; }
@media (min-width:1000px){
  .ct-pipe{ grid-template-columns:repeat(5, minmax(0,1fr)); column-gap:28px; }
  .ct-pipe li{ padding:48px 0 0; }
  .ct-pipe li::after{ left:38px; right:-20px; top:14.5px; bottom:auto; width:auto; height:1px; }
  .ct-pipe p{ font-size:14px; }
}
.ct-pipe + .shot{ margin-top:48px; }

/* ---- who to copy: each kind wears the picture My copies gives it ---- */
.ct-kinds{ margin:40px 0 0; display:grid; grid-template-columns:minmax(0,1fr); gap:32px; }
@media (min-width:640px){ .ct-kinds{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:36px 40px; } }
@media (min-width:1000px){ .ct-kinds{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px; } }
.ct-av{ display:flex; align-items:center; height:48px; margin-bottom:16px; }
.ct-kinds h3{ margin:0 0 6px; font:700 clamp(17px, 1.7vw, 20px)/1.3 var(--sans); letter-spacing:-.01em; }
.ct-kinds p{ margin:0; font:500 15px/1.6 var(--sans); color:var(--soft); max-width:30em; }
/* a trader: the face at 48 */
.ct-av > .ct-face{ width:48px; height:48px; }
/* a list: three faces at 34, each ringed 2 in the ground's colour, 11 over the one before */
.ct-stack{ display:flex; }
.ct-stack .ct-face{ width:34px; height:34px; border:2px solid var(--ink); box-sizing:content-box; }
.ct-stack .ct-face + .ct-face{ margin-left:-11px; }
/* a dev: the grade A tile, 48 with corners a quarter of it, the letter violet 600 at .44 */
.ct-atile{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:12px; background:var(--g2); color:#8b58e4; font:600 21px/1 var(--sans); }
/* fast: their buy and yours on one tick */
.ct-same{ display:flex; flex-direction:column; align-items:center; }
.ct-same i{ width:1px; height:4px; background:rgba(203,208,235,.22); }
.ct-same .ct-b{ background:var(--g2); }

/* ---- the worked example: each move wears its badge, and beside them the same copy as My copies shows it ---- */
.ct-ex{ margin:40px 0 0; display:grid; grid-template-columns:minmax(0,1fr); gap:36px; }
@media (min-width:1000px){ .ct-ex{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:56px; align-items:start; } }
.ct-moves{ list-style:none; margin:0; padding:0; }
.ct-moves li{ display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:14px; padding:20px 0; border-top:1px solid var(--line); }
.ct-moves li:first-child{ padding-top:0; border-top:0; }
.ct-moves li:last-child{ padding-bottom:0; }
.ct-moves li::before{ content:attr(data-b); grid-row:1 / span 2; display:flex; align-items:center; justify-content:center; width:22px; height:22px; margin-top:2px;
  border-radius:6px; background:var(--g2); font:600 12px/1 var(--sans); }
.ct-moves li.up::before{ color:var(--up); }
.ct-moves li.dn::before{ color:var(--dn); }
.ct-moves li.mut::before{ color:var(--mut); }
.ct-moves h3{ margin:0 0 6px; font:700 clamp(17px, 1.7vw, 20px)/1.3 var(--sans); letter-spacing:-.01em; }
.ct-moves p{ margin:0; font:500 15px/1.6 var(--sans); color:var(--soft); max-width:40em; }
.ct-figs{ display:grid; gap:28px; min-width:0; }
.ct-figs figure{ margin:0; min-width:0; }
.ct-figs figcaption{ margin-top:10px; max-width:44em; font:500 13px/1.5 var(--sans); color:var(--muted); }
/* Latest trades: the side panel's fill and hairline, a 58 head, rows 60 tall with a rule under each */
.ct-lt{ max-width:520px; border:1px solid rgba(203,208,235,.10); border-radius:12px; background:#0b0a16; overflow:hidden; color:#f8f8f8;
  font:400 14px/21px var(--sans); letter-spacing:-.12px; font-variant-numeric:tabular-nums; }
.ct-lt b{ font-weight:500; }
.ct-lth{ display:flex; align-items:center; height:58px; padding:0 16px; border-bottom:1px solid var(--rule); font:600 16px/1.5 var(--sans); letter-spacing:-.12px; }
.ct-tr{ display:flex; align-items:center; gap:12px; min-height:60px; padding:8px 22px; border-bottom:1px solid var(--rule); }
.ct-tt{ flex:1; min-width:0; color:var(--lt); }
/* the tile sits on the line as a logo does: its foot 4 under the baseline */
.ct-tt .ct-tile{ display:inline-block; overflow:hidden; line-height:18px; text-align:center; vertical-align:-4px; }
.ct-tt .up{ color:var(--up); }
.ct-tt .dn{ color:var(--dn); }
.ct-tt .sym{ color:#f8f8f8; }
.ct-tt .mu{ color:var(--mut); }
.ct-sep{ padding:0 4px; }
.ct-tp{ flex:none; font:500 14px/1.5 var(--sans); color:var(--up); }
.ct-tm{ flex:none; width:46px; text-align:right; color:var(--mut); }
@media (max-width:519.98px){
  .ct-tr{ gap:8px; padding:8px 12px; }
  .ct-tm{ width:38px; }
}
/* the Daily loss limit card: a card fill with no edge, 18 by 22 in, the bar 8 tall and orange once the limit is hit */
.ct-loss{ display:flex; flex-direction:column; max-width:300px; padding:18px 22px; border-radius:12px; background:var(--g1); color:#f8f8f8;
  font:400 14px/1.5 var(--sans); letter-spacing:-.12px; font-variant-numeric:tabular-nums; }
.ct-loss i{ font-style:normal; }
.ct-kh{ color:var(--mut); }
.ct-kfig{ display:flex; align-items:baseline; gap:8px; margin-top:8px; font-size:16px; color:var(--mut); }
.ct-kfig b{ font-weight:600; color:#f8f8f8; }
.ct-kfig i{ color:var(--lt); }
.ct-bar{ display:block; height:8px; margin-top:12px; border-radius:999px; background:#2a2838; overflow:hidden; }
.ct-bar i{ display:block; height:100%; border-radius:999px; background:var(--dn); }
.ct-ksub{ margin-top:8px; color:var(--mut); }