/* /kol-wallet-tracker only, on top of /paper-trading/paper-trading.css. The page is about one trader's file, so it
   opens on one: a trader page drawn the way the app draws it. Every size, colour and alpha in "the file" below is
   the app's own number (app/src/styles/tokens.css and v2-trader-page.css; tests/landing-pages.test.mjs holds the
   two equal). Green is money banked, orange is money lost, and nothing else on this page wears them but the button.
   Static page, no script. */

/* ---- first screen: the words on the left, the file on the right ---- */
.kt-hero{ padding:40px 0 64px; }
/* no wash behind this first screen: a trader page's ground is plain */
.kt-hero::before{ content:none; }
.kt-hero .wrap{ display:grid; grid-template-columns:minmax(0,1fr); gap:36px; align-items:center; }
.kt-hero h1{ font-size:clamp(34px, 3.6vw, 48px); max-width:none; text-wrap:balance; }
.kt-hero .lede{ max-width:30em; }
.kt-art{ margin:0; min-width:0; }
.kt-cap{ margin:12px 0 0; max-width:46em; font:500 13px/1.5 var(--sans); color:var(--muted); }
@media (min-width:1000px){
  .kt-hero{ padding:56px 0 80px; }
  .kt-hero .wrap{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:44px; }
}

/* ---- the file: a trader page's head, its wallets and two of its panels ---- */
.kt-file{ --g1:#0d0b1c; --g2:#161522; --sel:rgba(203,208,235,.12); --lbl:rgba(203,208,235,.56); --up:#21c95e; --dn:#ff622e; --dn-t:#ff8a5c;
  padding:20px; border:1px solid var(--line-hi); border-radius:16px; background:#060510; color:#f8f8f8;
  font:400 12px/1.45 var(--sans); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.kt-file i{ font-style:normal; }
/* the head: the face 64, the name 24/600, one muted line of facts apart by space, the actions 36 tall */
.kt-head{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; margin-bottom:24px; }
.kt-face{ width:64px; height:64px; flex:0 0 64px; border-radius:50%; background:var(--g1); }
.kt-id{ flex:1; min-width:0; padding-top:2px; }
.kt-name{ display:block; font:600 24px/32px var(--sans); letter-spacing:-.01em; }
.kt-sub{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; font:400 14px/1.5 var(--sans); letter-spacing:0; color:#9899a3; }
.kt-acts{ display:flex; gap:8px; }
.kt-btn{ display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 12px; border-radius:8px; background:var(--g2);
  font:500 14px/1 var(--sans); letter-spacing:0; white-space:nowrap; }
.kt-btn.go{ background:var(--up); color:#fff; font-weight:600; }
/* the wallets: 44 tall, the chosen one on the selection tint, the reason it is linked muted after the name */
.kt-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.kt-tab{ display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 12px; border-radius:8px; color:#c9c9d1; white-space:nowrap; }
.kt-tab b{ font:500 14px/1 var(--sans); }
.kt-tab i{ font:400 12px/1 var(--sans); letter-spacing:0; color:#9899a3; }
.kt-tab.on{ background:var(--sel); color:#fff; }
/* the panels: a fill with no edge, 16 in, 16 apart */
.kt-panels{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.kt-panel{ display:flex; flex-direction:column; gap:8px; min-width:0; padding:16px; border-radius:12px; background:var(--g1); }
.kt-h{ font:600 16px/1.5 var(--sans); letter-spacing:0; }
.kt-win{ display:flex; gap:6px; margin:2px 0 10px; }
.kt-win i{ display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:6px; font:500 12px/1 var(--sans); letter-spacing:0; color:#9899a3; }
.kt-win i.on{ background:var(--sel); color:#fff; }
.kt-big{ margin-top:4px; font:600 28px/1.5 var(--sans); letter-spacing:-.03em; }
.kt-big.up{ color:var(--up); }
.kt-lbl{ margin-bottom:4px; font:500 12px/1.45 var(--sans); letter-spacing:0; color:var(--lbl); }
.kt-sep{ display:inline-block; width:11px; }
/* Results by day: 32 days in four rows of eight, deeper for a bigger day */
.kt-days{ display:grid; grid-template-columns:repeat(8, 1fr); gap:4px; margin-top:14px; }
.kt-day{ display:block; height:16px; border-radius:4px; background:var(--g2); }
.kt-day.up.l1{ background:rgba(33,201,94,.35); }
.kt-day.up.l2{ background:rgba(33,201,94,.6); }
.kt-day.up.l3{ background:var(--up); }
.kt-day.dn.l1{ background:rgba(255,98,46,.35); }
.kt-day.dn.l2{ background:rgba(255,98,46,.6); }
.kt-day.dn.l3{ background:var(--dn); }
.kt-facts{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 16px; margin-top:8px; }
.kt-fact{ display:flex; flex-direction:column; gap:2px; }
.kt-fact span{ color:#9899a3; }
.kt-fact b{ font:600 14px/1.5 var(--sans); }
.kt-fact b.up{ color:var(--up); }
.kt-fact b.dn{ color:var(--dn-t); }
.kt-more{ margin-top:4px; color:#9899a3; }
.kt-more b{ font-weight:500; color:#c9c9d1; }
/* tokens by return band: winners green, losers orange, a ground-coloured cut between bands */
.kt-bar{ display:flex; height:5px; margin-top:8px; border-radius:9999px; overflow:hidden; background:rgba(203,208,235,.10); }
.kt-bar i{ display:block; border-right:1px solid var(--g1); }
.kt-bar i:last-child{ border-right:0; }
.kt-bar i.up{ background:var(--up); }
.kt-bar i.dn{ background:var(--dn); }
@media (min-width:560px){ .kt-panels{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
/* a phone, as the app does it: a smaller face and name, the actions on their own row with Copy growing, and the
   wallets on one line whose cut end fades */
@media (max-width:559.98px){
  .kt-file{ padding:16px; }
  .kt-head{ gap:12px; }
  .kt-face{ width:56px; height:56px; flex-basis:56px; }
  .kt-name{ font-size:20px; }
  .kt-acts{ flex:1 1 100%; }
  .kt-btn{ height:44px; padding:0 16px; }
  .kt-btn.go{ flex:1; }
  .kt-tabs{ flex-wrap:nowrap; overflow:hidden; -webkit-mask-image:linear-gradient(to right, black calc(100% - 20px), transparent); mask-image:linear-gradient(to right, black calc(100% - 20px), transparent); }
  .kt-tab{ flex:none; }
}

/* the one moving thing on the page: the 32 days fill in, oldest first, once */
@media (prefers-reduced-motion: no-preference){
  .kt-day{ animation:kt-day .45s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(var(--d) * 32ms + 250ms); }
}
@keyframes kt-day{ from{ opacity:0; transform:scale(.5); } }

/* ---- the steps: a numbered sheet, one row a step ---- */
.kt-steps{ list-style:none; margin:36px 0 0; padding:0; counter-reset:s; border-top:1px solid var(--line); }
.kt-steps li{ counter-increment:s; display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 12px; padding:22px 0; border-bottom:1px solid var(--line); }
.kt-steps li::before{ content:counter(s); grid-row:1 / span 2; font:600 28px/1.1 var(--sans); letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--muted); }
.kt-steps h3{ margin:0; font:700 clamp(17px, 1.7vw, 20px)/1.3 var(--sans); letter-spacing:-.01em; align-self:center; }
.kt-steps p{ margin:0; font:500 15px/1.6 var(--sans); color:var(--soft); max-width:44em; }
@media (min-width:900px){
  .kt-steps li{ grid-template-columns:64px 12em minmax(0,1fr); gap:24px; align-items:baseline; }
  .kt-steps li::before{ grid-row:auto; }
  .kt-steps h3{ align-self:auto; }
}

/* ---- four entries, no boxes ---- */
.kt-ledger{ margin:36px 0 0; display:grid; grid-template-columns:minmax(0,1fr); gap:0 48px; }
@media (min-width:800px){ .kt-ledger{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.kt-ledger > div{ padding:22px 0; border-top:1px solid var(--line); }
.kt-ledger h3{ margin:0 0 6px; font:700 clamp(17px, 1.7vw, 20px)/1.3 var(--sans); letter-spacing:-.01em; }
.kt-ledger p{ margin:0; font:500 15px/1.6 var(--sans); color:var(--soft); max-width:36em; }

/* ---- the example: five loose wallets, then the same five as one trader buying one token ---- */
.kt-fold{ margin:36px 0 0; display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
@media (min-width:800px){ .kt-fold{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.kt-fold figure{ margin:0; }
.kt-fold svg{ display:block; width:100%; height:auto; background:var(--ink); border:1px solid var(--line-hi); border-radius:14px; }
.kt-fold figcaption{ margin-top:14px; font:500 15px/1.6 var(--sans); color:var(--soft); max-width:36em; }
.kt-fold figcaption b{ display:block; margin-bottom:2px; font:700 clamp(17px, 1.7vw, 20px)/1.3 var(--sans); letter-spacing:-.01em; color:var(--w); }
/* not ours: a wallet as a tracker with no links shows it, an address and a buy */
.kt-x{ fill:var(--raised); stroke:var(--line-hi); stroke-width:1; }
.kt-amt{ font:500 14px/1 var(--sans); fill:var(--muted); text-anchor:end; font-variant-numeric:tabular-nums; }
.kt-amt.mid{ text-anchor:middle; font-size:12px; }
.kt-alt{ fill:var(--raised); stroke:var(--line-hi); stroke-width:1; }
.kt-link{ fill:none; stroke:var(--line-hi); stroke-width:1.2; }
.kt-who{ font:600 14px/1 var(--sans); fill:#f8f8f8; text-anchor:middle; }
/* the Map's own marks (app/src/engine/palette.ts): a buying trader's ring and line, a tile, its edge and initials */
.kt-rope{ fill:none; stroke:rgba(33,201,94,.65); stroke-width:1.6; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.kt-ring{ fill:none; stroke:rgba(33,201,94,.9); stroke-width:2; vector-effect:non-scaling-stroke; }
.kt-tile{ stroke:rgba(203,208,235,.22); stroke-width:1; vector-effect:non-scaling-stroke; }
.kt-ini{ font:700 29px/1 var(--sans); fill:rgba(248,248,248,.9); text-anchor:middle; }