/* /paper-trading only, on top of /paper-trading/paper-trading.css (the stylesheet every static page shares). The page
   is about two sides of one app, so it opens on both: the practice money card on the left, the Switch to Live? window
   on the right, and the header's Practice or Live switch between them. Every size and colour of those parts is the
   app's own (app/src/styles/kit.css, account-more.css and tokens.css; tests/paper-trading-page.test.mjs holds the two
   equal). Violet is the app's own accent, green is money, and nothing else on this page wears them but the button.
   Static page, no script. */

/* ---- first screen: the words in the middle, the two sides under them ---- */
.pt-hero{ padding:40px 0 64px; text-align:center; }
/* no wash behind this first screen: the two sides sit on the page as they sit in the app */
.pt-hero::before{ content:none; }
.pt-hero h1{ margin:0 auto; font-size:clamp(34px, 4.2vw, 52px); max-width:16em; text-wrap:balance; }
.pt-hero .lede{ margin:16px auto 0; max-width:36em; }
.pt-hero .cta{ margin-top:22px; gap:12px; align-items:center; }
.pt-hero .fine{ max-width:40em; }
.pt-art{ margin:32px 0 0; min-width:0; }
.pt-cap{ margin:18px auto 0; max-width:52em; font:500 13px/1.5 var(--sans); color:var(--muted); }
@media (min-width:1000px){ .pt-hero{ padding:40px 0 76px; } }

/* ---- the app's marks, shared by the two sides, the steps, the phone pills and the way to Live ---- */
.pt-switch, .pt-hinge, .pt-chips, .pt-slips, .pt-same{ --g1:#0d0b1c; --g2:#161522; --g3:#1f1d30; --acc:#8b58e4; --up:#21c95e; --mut:#9899a3; --lt:#c9c9d1; --sel:rgba(203,208,235,.12); --bd:rgba(203,208,235,.18); --hl:rgba(203,208,235,.10); }
/* Practice is the grey paper icon, Live the white Solana mark: icons, never words */
.pt-paper{ display:block; flex:none; width:18px; height:18px; fill:none; stroke:var(--mut); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pt-sol{ display:block; flex:none; width:18px; height:16px; background:#f8f8f8; -webkit-mask:url(/paper-trading/img/sol-mark.svg) center / contain no-repeat; mask:url(/paper-trading/img/sol-mark.svg) center / contain no-repeat; }
/* the header's switch: the picked half filled, the other at .4 */
.pt-seg{ display:flex; align-items:center; gap:2px; box-sizing:border-box; min-height:36px; padding:3px; border:1px solid transparent; border-radius:8px; }
.pt-seg > i{ display:flex; align-items:center; justify-content:center; width:44px; height:28px; border-radius:6px; }
.pt-seg > i.on{ background:var(--sel); }
.pt-seg > i:not(.on) > *{ opacity:.4; }
/* the switch with its two words: the side it is on reads white, the other muted */
.pt-hinge{ display:flex; align-items:center; justify-content:center; gap:12px; font:600 16px/1 var(--sans); color:var(--mut); }
.pt-hinge b{ font-weight:600; }
.pt-hinge b.on{ color:#f8f8f8; }
.pt-hinge.start{ justify-content:flex-start; margin:28px 0 0; }

/* ---- the two sides ---- */
.pt-switch{ color:#f8f8f8; text-align:left; font-variant-numeric:tabular-nums; letter-spacing:-.12px; }
.pt-halves{ display:grid; grid-template-columns:minmax(0, 420px) minmax(0, 520px); justify-content:center; align-items:stretch; gap:24px; margin-top:20px; }
@media (max-width:819.98px){ .pt-halves{ grid-template-columns:minmax(0, 520px); } }
/* Practice: the card the app shows when it asks how you want to start */
.pt-mcard{ display:flex; flex-direction:column; gap:12px; box-sizing:border-box; padding:16px; border:2px solid var(--acc); border-radius:12px; background:var(--g2); font:400 12px/1.45 var(--sans); }
.pt-mhead{ display:flex; align-items:center; gap:12px; }
.pt-mic{ display:flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; border-radius:12px; background:rgba(139,88,228,.14); color:var(--acc); }
.pt-mic svg{ display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; }
.pt-mt{ flex:1; min-width:0; font-size:16px; font-weight:600; }
.pt-mt small{ display:block; margin-top:2px; font-size:14px; font-weight:400; color:var(--mut); }
.pt-fig{ font:600 32px/1.5 var(--sans); }
.pt-fig small{ margin-left:8px; font:400 16px/1.5 var(--sans); color:var(--mut); }
.pt-mcard ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--lt); }
.pt-mcard li{ display:flex; align-items:center; gap:8px; }
.pt-mcard li svg{ display:block; flex:none; width:14px; height:14px; fill:none; stroke:var(--acc); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.pt-btn{ display:flex; align-items:center; justify-content:center; box-sizing:border-box; height:44px; margin-top:auto; padding:0 16px; border-radius:12px; background:var(--acc); color:#fff; font:600 16px/1 var(--sans); text-align:center; }
/* Live: the window that asks before real money is used */
.pt-sheet{ display:flex; flex-direction:column; box-sizing:border-box; border:1px solid var(--bd); border-radius:28px; background:var(--g1); box-shadow:0 24px 60px rgba(0,0,0,.6); font:400 12px/1.5 var(--sans); }
.pt-shead{ display:flex; align-items:center; gap:12px; padding:24px 24px 0; }
.pt-bolt{ display:flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; border-radius:50%; background:rgba(33,201,94,.14); color:var(--up); }
.pt-bolt svg{ display:block; width:22px; height:22px; fill:currentColor; }
.pt-shead b{ flex:1; min-width:0; font-size:24px; font-weight:600; }
.pt-x{ display:flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; border-radius:50%; background:#1c1a2c; color:var(--lt); }
.pt-x svg{ display:block; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pt-smid{ display:flex; flex-direction:column; gap:16px; padding:16px 24px 24px; }
.pt-facts{ display:flex; flex-direction:column; }
.pt-facts > div{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; font-size:14px; }
.pt-facts > div > span:first-child{ color:var(--mut); }
.pt-facts > div > span:last-child{ text-align:right; font-weight:500; }
.pt-facts i{ font-style:normal; }
.pt-facts .sep{ padding:0 4px; }
.pt-facts .mu{ color:var(--mut); }
/* the SOL mark beside a figure, sized by the text as the app sizes it */
.pt-solm{ display:inline-block; width:min(.46em, 12px); height:min(.4em, 10px); margin:0 0 0 min(.18em, 5px); vertical-align:min(.1em, 2px); background-color:currentColor; opacity:.55;
  -webkit-mask:url(/paper-trading/img/sol-mark.svg) center / contain no-repeat; mask:url(/paper-trading/img/sol-mark.svg) center / contain no-repeat; }
.pt-say{ font-size:14px; line-height:20px; color:var(--mut); }
.pt-sbot{ display:flex; align-items:center; gap:10px; margin-top:auto; padding:16px 24px; border-top:1px solid var(--hl); }
.pt-btn2{ display:flex; align-items:center; justify-content:center; flex:none; box-sizing:border-box; height:44px; padding:0 16px; border-radius:12px; background:var(--g2); font:600 14px/1 var(--sans); white-space:nowrap; }
.pt-btn2.primary{ background:var(--acc); color:#fff; }
.pt-gap{ flex:1; }

/* the one moving thing on the page: the switch is on Live, then it is pressed to Practice and the practice card is picked */
@media (prefers-reduced-motion: no-preference){
  .pt-art .pt-seg > i.on{ animation:pt-off .2s ease-out 1.1s backwards; }
  .pt-art .pt-seg > i.on > *{ animation:pt-dim .2s ease-out 1.1s backwards; }
  .pt-art .pt-seg > i:not(.on){ animation:pt-on .2s ease-out 1.1s backwards; }
  .pt-art .pt-seg > i:not(.on) > *{ animation:pt-lit .2s ease-out 1.1s backwards; }
  .pt-art .pt-hinge b.on{ animation:pt-quiet .2s ease-out 1.1s backwards; }
  .pt-art .pt-hinge b:not(.on){ animation:pt-loud .2s ease-out 1.1s backwards; }
  .pt-art .pt-mcard{ animation:pt-pick .3s ease-out 1.1s backwards; }
}
@keyframes pt-off{ from{ background:transparent; } }
@keyframes pt-dim{ from{ opacity:.4; } }
@keyframes pt-on{ from{ background:rgba(203,208,235,.12); } }
@keyframes pt-lit{ from{ opacity:1; } }
@keyframes pt-quiet{ from{ color:#9899a3; } }
@keyframes pt-loud{ from{ color:#f8f8f8; } }
@keyframes pt-pick{ from{ border-color:transparent; } }

/* ---- the steps: five slips of paper, each with the app's own "N of" marker ---- */
.pt-slips{ list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
@media (min-width:900px){
  .pt-slips{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pt-slips li:last-child:nth-child(odd){ grid-column:1 / -1; }
}
/* a slip: the card fill with its top corner folded, as the Practice icon is a sheet with its corner folded */
.pt-slips li{ position:relative; padding:20px 44px 22px 22px; border-radius:12px; background:var(--g1); clip-path:polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.pt-slips li::after{ content:""; position:absolute; top:0; right:0; width:24px; height:24px; border-bottom-left-radius:6px; background:var(--g3); }
.pt-of{ display:flex; align-items:center; gap:6px; margin-bottom:14px; }
.pt-of b{ margin-right:4px; font:500 14px/1 var(--sans); color:var(--lt); font-variant-numeric:tabular-nums; }
.pt-of i{ display:block; width:28px; height:4px; border-radius:2px; background:var(--g3); }
.pt-of i.on, .pt-of i.past{ background:var(--acc); }
.pt-of i.on{ width:18px; }
.pt-slips h3{ margin:0 0 6px; font:700 clamp(17px, 1.7vw, 20px)/1.3 var(--sans); letter-spacing:-.01em; }
.pt-slips p{ margin:0; font:500 15px/1.6 var(--sans); color:var(--soft); max-width:46em; }
.pt-slips + .shot{ margin-top:48px; }

/* ---- what Practice shares with Live: each entry under the two icons, together or apart ---- */
.pt-same{ margin:36px 0 0; display:grid; grid-template-columns:minmax(0,1fr); gap:0 48px; }
@media (min-width:800px){ .pt-same{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.pt-same > div{ padding:22px 0; border-top:1px solid var(--line); }
.pt-pair{ display:flex; align-items:center; gap:8px; height:18px; margin-bottom:14px; }
.pt-pair i{ display:block; width:1px; height:18px; margin:0 6px; background:var(--bd); }
.pt-same h3{ margin:0 0 6px; font:700 clamp(17px, 1.7vw, 20px)/1.3 var(--sans); letter-spacing:-.01em; }
.pt-same p{ margin:0; font:500 15px/1.6 var(--sans); color:var(--soft); max-width:36em; }

/* ---- on a phone: the balance pill, in Practice and in Live ---- */
.pt-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:24px 0 0; }
.pt-chip{ display:inline-flex; align-items:center; gap:6px; box-sizing:border-box; height:44px; padding:0 4px 0 0; border:1px solid transparent; border-radius:8px; background:var(--g2); }
.pt-disc{ display:flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; margin:-1px -4px -1px -1px; }
.pt-bal{ font:600 14px/1.5 var(--sans); letter-spacing:-.12px; color:#f8f8f8; font-variant-numeric:tabular-nums; }
.pt-plus{ display:flex; align-items:center; justify-content:center; flex:none; width:34px; height:34px; border-radius:6px; background:var(--up); color:#fff; }
.pt-plus svg{ display:block; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }