/* Traders page (traders.html, src/traders.js).
   Hierarchy: the period's top three are the focal point; activity and the rest of the leaderboard sit below,
   side by side on wide screens and as two tabs on narrow ones. Follow is a pill where it's the main action (top three,
   a trader's page) and a quiet round button in lists, so twenty-five rows don't shout. */

.traderspage main{display:flex; flex-direction:column; gap:18px}
#list{display:flex; flex-direction:column; gap:16px}
#list[hidden]{display:none}

/* Intro and search */
.tdr-intro{display:flex; align-items:flex-end; justify-content:space-between; gap:14px 32px; flex-wrap:wrap}
.tdr-h1{font-family:var(--display); font-weight:700; font-size:clamp(30px,4.6vw,44px); letter-spacing:-.03em; line-height:1; margin:0}
.tdr-sub{margin:8px 0 0; color:var(--ink); font-size:15px; max-width:46ch; line-height:1.45}
.tdr-find{position:relative; flex:0 1 380px; min-width:min(100%, 280px)}
.tdr-find input{width:100%; font:15px var(--body); color:var(--ink); background:color-mix(in srgb, var(--sheet) 88%, transparent); border:1px solid var(--crease); border-radius:999px; padding:0 18px 0 42px; height:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236e4a55' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5.5'/%3E%3Cpath d='m11.2 11.2 3.6 3.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:16px 50%; backdrop-filter:blur(6px)}
.tdr-find input:focus-visible{outline:2px solid var(--accent); outline-offset:2px; background-color:var(--sheet)}
.tdr-results{position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0; list-style:none; margin:0; padding:4px 0; max-height:min(60vh, 420px); overflow:auto;
  box-shadow:0 18px 40px -20px color-mix(in srgb, var(--ink) 45%, transparent)}
.tdr-results .tdr-row{grid-template-columns:minmax(0,1fr) auto auto; border-top:0; padding:8px 14px}
.tdr-results .tdr-row + .tdr-row{border-top:1px solid var(--crease)}

/* Period: one control for the top three and the leaderboard */
.tdr-period{align-self:flex-start}
.seg2{display:inline-flex; border:1px solid var(--crease); border-radius:999px; padding:3px; background:var(--sheet); gap:2px}
.seg2 button{font:600 13px var(--body); border:0; background:none; color:var(--muted); padding:7px 14px; border-radius:999px; cursor:pointer; min-height:34px; white-space:nowrap}
.seg2 button:hover{color:var(--ink)}
.seg2 button[aria-pressed="true"]{background:var(--ink); color:var(--sheet)}
.seg2 button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}

/* The top three */
.tdr-podium{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
.tdr-pod{padding:16px 18px 18px; display:flex; flex-direction:column; gap:12px; min-width:0}
.tdr-pod.is-first{border-color:color-mix(in srgb, var(--accent) 35%, var(--crease)); box-shadow:0 18px 40px -28px color-mix(in srgb, var(--accent) 60%, transparent)}
.tdr-pod.is-skel{min-height:236px; background:color-mix(in srgb, var(--sheet) 70%, transparent)}
.tdr-pod-top{display:flex; align-items:center; justify-content:space-between}
.tdr-pod-rank{font-family:var(--display); font-weight:700; font-size:30px; line-height:1; color:color-mix(in srgb, var(--ink) 28%, transparent); letter-spacing:-.04em}
.tdr-pod.is-first .tdr-pod-rank{color:var(--accent)}
.tdr-pod-who{display:flex; align-items:center; gap:12px; min-width:0; color:var(--ink); text-decoration:none}
.tdr-pod-who .pt-av{width:52px; height:52px; font-size:22px}
.tdr-pod-name{display:flex; flex-direction:column; min-width:0}
.tdr-pod-name b{font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tdr-pod-name small{font:12.5px var(--data); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tdr-pod-who:hover b{text-decoration:underline; text-underline-offset:3px}
.tdr-pod-l{margin:0 0 4px; font-size:12px; color:var(--muted)}
.tdr-pod-pnl{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(28px,3.2vw,36px); letter-spacing:-.025em; line-height:1; font-variant-numeric:tabular-nums}
.tdr-pod-meta{margin:0; display:flex; gap:6px 14px; flex-wrap:wrap; font-size:12.5px; color:var(--muted)}
.traderspage .gain{color:var(--gain)} .traderspage .loss{color:var(--loss)}
.tdr-live{display:inline-flex; align-items:center; gap:5px; color:var(--accent-ink); font-weight:600}
.tdr-live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gain); box-shadow:0 0 0 3px color-mix(in srgb, var(--gain) 18%, transparent)}

/* Follow: pill and round */
.tdr-fp{display:inline-flex; align-items:center; justify-content:center; gap:7px; font:600 13px var(--body); border-radius:999px; padding:0 16px; height:34px; cursor:pointer; white-space:nowrap; text-decoration:none;
  background:var(--sheet); color:var(--accent-ink); border:1px solid color-mix(in srgb, var(--accent) 45%, var(--crease))}
.tdr-fp:hover{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.tdr-fp.is-on{background:var(--accent-soft); color:var(--accent-ink); border-color:transparent}
.tdr-fp.is-on::before{content:"✓"; font-size:12px}
.tdr-fp.is-on:hover{background:var(--loss-soft); color:var(--loss)}
.tdr-fp.ghost{color:var(--ink); border-color:var(--crease)}
.tdr-fp.ghost:hover{background:var(--shade); color:var(--ink); border-color:var(--crease)}
.tdr-fp.sm{height:30px; padding:0 12px; font-size:12.5px}
.tdr-fi{flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--crease); background:var(--sheet); color:var(--muted); font:600 16px/1 var(--body); cursor:pointer; display:grid; place-items:center}
.tdr-fi:hover{border-color:var(--accent); color:var(--accent-ink)}
.tdr-fi.is-on{background:var(--accent-soft); border-color:transparent; color:var(--accent-ink); font-size:13px}
.tdr-xi{width:13px; height:13px; fill:currentColor; flex:none}

/* Activity and leaderboard */
.tdr-tabs{display:none}
.tdr-cols{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px; align-items:start}
.tdr-panel{padding:0; min-width:0; overflow:hidden}
.tdr-panel-h{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:12px 18px; min-height:60px; border-bottom:1px solid var(--crease)}
.tdr-panel-h h2{font-size:18px}
.tdr-panel-f{padding:10px 18px 14px; margin:0; border-top:1px solid var(--crease)}
.tdr-n{font:600 11px var(--data); color:inherit; opacity:.75}
.tdr-fine{font-size:12.5px; color:var(--muted); margin:0}
.tdr-count{font:500 12.5px var(--data); color:var(--muted); background:var(--shade); border-radius:999px; padding:1px 8px}
.tdr-alerts{display:flex; align-items:center; justify-content:space-between; gap:8px 14px; flex-wrap:wrap; padding:10px 18px; border-bottom:1px solid var(--crease); background:color-mix(in srgb, var(--accent-soft) 45%, var(--sheet)); font-size:13.5px}

.tdr-feed, .tdr-rows, .tdr-list{list-style:none; margin:0; padding:0}
.tdr-ev, .tdr-pos{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 12px; align-items:start; padding:13px 18px}
.tdr-pos{grid-template-columns:minmax(0,1fr) auto}
.tdr-ev + .tdr-ev, .tdr-pos + .tdr-pos{border-top:1px solid var(--crease)}
.tdr-ev-av{display:block; padding-top:1px}
.tdr-line{margin:0; font-size:14.5px; color:var(--ink); line-height:1.4}
.tdr-line b{font-weight:600}
.tdr-n1{font-weight:700; color:var(--ink); text-decoration:none}
.tdr-n1:hover{text-decoration:underline; text-underline-offset:3px}
.tdr-ev.is-liq .tdr-line b{color:var(--loss)}
.tdr-meta2{margin:3px 0 0; font-size:12.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:2px 10px; align-items:baseline}
.tdr-meta2 > span{font-family:var(--data); font-size:12px}
.tdr-act{font-size:12.5px; font-weight:600; color:var(--accent-ink); text-decoration:none}
.tdr-act:hover{text-decoration:underline; text-underline-offset:3px}
.tdr-act::after{content:" ›"}
.tdr-ev-r{display:flex; flex-direction:column; align-items:flex-end; text-align:right; padding-top:1px}
.tdr-amt{font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.01em; line-height:1.15; white-space:nowrap; font-variant-numeric:tabular-nums}
.tdr-amt.none{color:var(--ink); font-size:15px}
.tdr-amt-l{font-size:12px; color:var(--muted); white-space:nowrap}
.tdr-tag{display:inline-block; font:600 11px var(--body); padding:1px 7px; border-radius:999px; vertical-align:1px}
.tdr-tag.loss{background:var(--loss-soft); color:var(--loss)}
.tdr-empty{list-style:none; padding:22px 18px; color:var(--muted); font-size:14px; margin:0}
.tdr-empty p{margin:0; max-width:48ch; color:var(--ink)}
.tdr-empty.err{color:var(--loss)}

.tdr-row{display:grid; grid-template-columns:22px minmax(0,1fr) auto auto; align-items:center; gap:6px 12px; padding:10px 18px}
.tdr-rows .tdr-row + .tdr-row{border-top:1px solid var(--crease)}
.tdr-rank{font:500 12.5px var(--data); color:var(--muted); text-align:right}
.tdr-who{display:inline-flex; align-items:center; gap:10px; min-width:0; color:var(--ink); text-decoration:none}
.tdr-who:hover .tdr-name{text-decoration:underline; text-underline-offset:3px}
.tdr-who-t{display:flex; flex-direction:column; min-width:0}
.tdr-name{font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tdr-meta{font-size:12px; color:var(--muted); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tdr-pnl{font-family:var(--display); font-weight:700; font-size:15px; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums}

/* A trader */
#v-trader{display:flex; flex-direction:column; gap:14px}
#v-trader[hidden]{display:none}
#profile{display:flex; flex-direction:column; gap:14px}
.tdr-back{align-self:flex-start; font-size:14px; font-weight:600; color:var(--accent-ink); text-decoration:none; padding:6px 0}
.tdr-card{padding:22px}
.tdr-card.is-skel{min-height:220px}
.tdr-card-h{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.tdr-card-t{flex:1 1 220px; min-width:0}
.tdr-pname{font-family:var(--display); font-weight:700; font-size:clamp(26px,4vw,36px); letter-spacing:-.025em; margin:0; line-height:1.05; overflow-wrap:anywhere}
.tdr-ids{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:6px 0 0; font-size:13px; color:var(--muted)}
.tdr-xh{display:inline-flex; align-items:center; gap:5px; color:var(--ink); font-weight:600; text-decoration:none}
.tdr-xh:hover{text-decoration:underline; text-underline-offset:3px}
.tdr-addr{font:12.5px var(--data); color:var(--muted); background:none; border:0; padding:4px 0; cursor:pointer; overflow-wrap:anywhere; text-align:left}
.tdr-addr:hover{color:var(--accent-ink)}
.tdr-you{font:600 11px var(--body); color:var(--accent-ink); background:var(--accent-soft); border-radius:999px; padding:2px 8px}
.tdr-card-acts{display:flex; gap:8px; flex-wrap:wrap}
.tdr-xbtn{color:var(--ink); border-color:var(--ink)}
.tdr-xbtn:hover{background:var(--ink); color:var(--sheet); border-color:var(--ink)}
.tdr-link{background:none; border:0; padding:6px 0; font:600 13px var(--body); color:var(--loss); cursor:pointer}
.tdr-stats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin:20px 0 0; border-top:1px solid var(--crease)}
.tdr-stat{padding:14px 16px 0 0; min-width:0}
.tdr-stat + .tdr-stat{padding-left:16px; border-left:1px solid var(--crease)}
.tdr-stat dt{font-size:12.5px; color:var(--muted)}
.tdr-stat dd{margin:4px 0 0; font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.015em; white-space:nowrap; font-variant-numeric:tabular-nums}
.tdr-split{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; align-items:start}
.tdr-split .tdr-empty{padding:16px 18px}

.tdr-faq{margin-top:10px}
.tdr-faq details{border-top:1px solid var(--crease); padding:12px 0}
.tdr-faq summary{cursor:pointer; font-weight:600}
.tdr-faq p{margin:8px 0 0; max-width:72ch}

/* Tablet: activity and leaderboard become tabs; the top three stay side by side */
@media (max-width:999px){
  /* Page-level tabs read as tabs (an underline), unlike the filters, which are segmented */
  .tdr-tabs{display:flex; gap:22px; border-bottom:1px solid var(--crease); margin-bottom:-4px}
  .tdr-tabs button{font:700 15px var(--body); border:0; background:none; color:var(--muted); padding:10px 2px; margin-bottom:-1px; border-bottom:2px solid transparent; cursor:pointer}
  .tdr-tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}
  #cols .tdr-panel-h h2{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  #v-feed .tdr-panel-h{justify-content:flex-start}
  .tdr-cols{grid-template-columns:1fr}
  .tdr-cols[data-view="feed"] #v-top, .tdr-cols[data-view="top"] #v-feed{display:none}
  .tdr-split{grid-template-columns:1fr}
}
/* Phone: the top three scroll sideways, one card and a peek of the next */
@media (max-width:700px){
  .tdr-intro{align-items:stretch}
  .tdr-find{flex:1 1 100%}
  .tdr-period{align-self:stretch; display:flex; overflow-x:auto; scrollbar-width:none}
  .tdr-period::-webkit-scrollbar{display:none}
  .tdr-period button{flex:1 0 auto}
  .tdr-podium{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:16px; scrollbar-width:none; margin:0 -16px; padding:2px 16px 6px; gap:10px}
  .tdr-podium::-webkit-scrollbar{display:none}
  .tdr-pod{flex:0 0 78%; scroll-snap-align:start}
  .tdr-ev, .tdr-pos{padding:12px 14px}
  .tdr-panel-h{padding:10px 14px}
  .tdr-panel-f{padding:10px 14px 12px}
  .tdr-row{grid-template-columns:18px minmax(0,1fr) auto auto; padding:10px 14px; gap:4px 10px}
  .tdr-card{padding:18px}
  .tdr-card-acts{width:100%}
  .tdr-card-acts > *{flex:1}
  .tdr-stats{grid-template-columns:repeat(2, minmax(0,1fr))}
  .tdr-stat:nth-child(3){padding-left:0; border-left:0}
  .tdr-alerts{padding:10px 14px}
}
@media (pointer:coarse){
  .tdr-fi{width:40px; height:40px}
  .tdr-fp{height:40px}
  .seg2 button{min-height:40px}
}
/* Placeholders the size of what replaces them, so nothing jumps when data arrives */
.tdr-empty.is-loading{min-height:400px}
#v-top .tdr-empty.is-loading{min-height:720px}
@media (max-width:999px){ .tdr-pod.is-skel{min-height:228px} #v-top .tdr-empty.is-loading{min-height:400px} }