/* ── TRADER CARD — shared component ───────────────────────────────────────
   One design, three densities (hero / feed / compact). Used on the homepage,
   in feeds, in search results, and as the share artifact. Do not fork this
   file per-surface — add a variant class instead.

   Design brief (see tradercardsspec.md):
   - The verdict line is the hero. Big type, top of card, screenshot-first.
   - Score + n render as ONE visual unit — never split, never shown alone.
   - Color carries meaning, not decoration: muted green/red, not neon.
   - Not a financial table. No dense stat grids. */

.tcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #111118;
  border: 1px solid #1e1e2a;
  border-radius: 14px;
  padding: 20px;
  color: #f0f0f5;
  transition: border-color .15s, transform .15s;
  font-family: 'Inter', -apple-system, sans-serif;
}
.tcard:hover { border-color: #33333f; transform: translateY(-2px); }
/* ── the card used to be one big <a> to the trader's profile. A second,
   distinct action (get in the trade) can't nest inside it — nested <a>
   tags are invalid HTML. .tcard-link now carries everything that used to
   sit directly on the outer element (which is now a plain <article>); the
   CTA is a sibling, same split as feed.html's .wcard-link / .wcard-cta. ── */
.tcard-link { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; flex: 1; min-height: 0; }

/* ── identity row. The Flex Score hero (below) still carries the "biggest
   number on the card" job (Marc: "the score should be a number... put the
   score there and make it pop") — the glyph here is a small decorative
   identity pattern, not initials, not competing with the score. ── */
.tcard-identity { display: flex; align-items: center; gap: 10px; }
.tcard-avatar-wrap { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; padding: 2px; border: 1.5px solid rgba(240,240,245,.14); transition: border-color .15s; }
.tcard-avatar-wrap.is-hot { border-color: rgba(0,230,138,.55); }
.tcard-avatar-wrap.is-cold { border-color: rgba(255,77,106,.5); }
.tcard-avatar { display: block; width: 100%; height: 100%; border-radius: 50%; }
.tcard-hero .tcard-avatar-wrap { width: 40px; height: 40px; }
.tcard-compact .tcard-avatar-wrap { width: 26px; height: 26px; padding: 1.5px; }
.tcard-handle { font-family: 'Inter', -apple-system, sans-serif; font-weight: 600; font-size: 15px; color: rgba(240,240,245,.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard-rank {
  margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  color: rgba(240,240,245,.35); letter-spacing: .06em; flex-shrink: 0;
}

/* ── the verdict line — the hero ── */
.tcard-verdict {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 20px; font-weight: 800; line-height: 1.28; letter-spacing: -.01em;
  color: #fff;
}
.tcard-compact .tcard-verdict { font-size: 16px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.tcard-feed .tcard-verdict { font-size: 22px; }

/* ── FLEX SCORE — the hero number (2026-08-05 content-hierarchy pass).
   Composite, sample-adjusted 0-100 rating (lib/flex-score.js) — replaces
   raw ROI% as the card's largest element. ── */
.tcard-flexhero { display: flex; align-items: baseline; gap: 10px; }
.tcard-flexscore { font-family: 'JetBrains Mono', monospace; font-size: 40px; font-weight: 800; color: #c9920d; line-height: 1; letter-spacing: -.02em; }
.tcard-flexhero.is-mute .tcard-flexscore { color: rgba(240,240,245,.3); }
.tcard-flexlabel { font-family: 'Inter', -apple-system, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(240,240,245,.4); display: inline-flex; align-items: center; gap: 5px; }
.tcard-hero .tcard-flexscore { font-size: 56px; }
.tcard-compact .tcard-flexscore { font-size: 26px; }
.tcard-compact .tcard-flexlabel { font-size: 9px; }
/* "?" explainer — inline toggle, not a floating tooltip (see JS comment:
   this component renders inside horizontally-scrolling rails on some
   hosts, and a positioned popover would clip). */
.tcard-flexinfo-btn {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; line-height: 1;
  background: rgba(240,240,245,.08); border: 1px solid rgba(240,240,245,.18); color: rgba(240,240,245,.5);
  cursor: pointer; text-transform: none; letter-spacing: 0;
}
.tcard-flexinfo-btn:hover { background: rgba(240,240,245,.14); color: rgba(240,240,245,.75); }
.tcard-flexinfo {
  font-family: 'Inter', -apple-system, sans-serif; font-size: 11.5px; line-height: 1.5;
  color: rgba(240,240,245,.55); margin-top: -6px;
}
.tcard-flexinfo[hidden] { display: none; }

/* ── supporting stat row — win rate / realized ROI / trade count. Smaller
   and muted; the Flex Score above is what the eye lands on first. n (trade
   count) still always renders here — the honesty guarantee stays, only the
   "n=" notation is gone in favor of plain language. ── */
.tcard-stats { display: flex; gap: 16px; }
.tcard-stat { display: flex; flex-direction: column; gap: 2px; }
.tcard-stat-val { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: rgba(240,240,245,.7); }
.tcard-stat-val.is-positive { color: #00e68a; }
.tcard-stat-val.is-negative { color: #ff4d6a; }
.tcard-stat-lbl { font-family: 'Inter', -apple-system, sans-serif; font-size: 9.5px; color: rgba(240,240,245,.4); text-transform: uppercase; letter-spacing: .04em; }
.tcard-compact .tcard-stat-val { font-size: 11px; }

/* ── legacy score+n unit — no longer emitted by render() as of the hero
   change above (kept so nothing errors if an old cached page still has
   this markup inline; safe to delete once confirmed unused). ── */
.tcard-scoreline {
  display: inline-flex; align-items: baseline; gap: 8px; width: fit-content;
  padding: 7px 12px; border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
}
.tcard-scoreline.is-positive { background: rgba(0,230,138,.08); border: 1px solid rgba(0,230,138,.22); }
.tcard-scoreline.is-negative { background: rgba(255,77,106,.07); border: 1px solid rgba(255,77,106,.2); }
.tcard-score { font-size: 20px; font-weight: 800; }
.tcard-scoreline.is-positive .tcard-score { color: #00e68a; }
.tcard-scoreline.is-negative .tcard-score { color: #ff4d6a; }
.tcard-n { font-size: 13px; color: rgba(240,240,245,.4); }

/* ── scope disclosure — travels with score+n, same discipline. What the
   score is actually computed over (durable markets only as of 2026-07-20),
   not buried in a tooltip. ── */
.tcard-scope { font-family: 'Inter', -apple-system, sans-serif; font-size: 10.5px; color: rgba(240,240,245,.38); }

/* ── style/risk flag — keeps a promoted win rate from appearing naked ── */
.tcard-styleflag {
  font-family: 'Inter', -apple-system, sans-serif; font-size: 11.5px; line-height: 1.4;
  margin-top: 8px; padding: 6px 10px; border-radius: 6px;
  color: rgba(240,240,245,.6); background: rgba(240,240,245,.04);
  border: 1px solid rgba(240,240,245,.08);
}
.tcard-styleflag.is-warn {
  color: #f7c774; background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.22);
}
.tcard-compact .tcard-styleflag { font-size: 10px; padding: 5px 8px; }

/* ── evidence — one call, shown vividly. This is the card's proof moment,
   restyled as a callout band (not a plain indented line) so the receipt
   reads with the same weight as an ad's "here's the number" — colored
   background, tag, bigger multiplier. Still strictly past-tense/resolved;
   the loud treatment is cosmetic, not a claim about a live opportunity. ── */
.tcard-evidence {
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid rgba(240,240,245,.1);
  background: rgba(240,240,245,.03);
}
.tcard-evidence.is-win { background: rgba(0,230,138,.07); border-color: rgba(0,230,138,.24); }
.tcard-evidence.is-loss { background: rgba(255,77,106,.06); border-color: rgba(255,77,106,.2); }
.tcard-evidence-tag {
  font-family: 'Inter', -apple-system, sans-serif; font-size: 9.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(240,240,245,.4);
}
.tcard-evidence.is-win .tcard-evidence-tag { color: #00e68a; }
.tcard-evidence.is-loss .tcard-evidence-tag { color: #ff4d6a; }
.tcard-evidence-line {
  font-family: 'Inter', -apple-system, sans-serif; font-size: 16px; font-weight: 700;
  color: rgba(240,240,245,.9);
}
.tcard-evidence-line .mult-win { color: #00e68a; font-size: 1.15em; font-weight: 900; }
.tcard-evidence-line .mult-loss { color: #ff4d6a; font-size: 1.15em; font-weight: 900; }
.tcard-evidence-q {
  font-size: 13px; color: rgba(240,240,245,.45); line-height: 1.4;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* ── form indicator — visual, not a number ── */
.tcard-form { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.tcard-sparkline { flex-shrink: 0; display: block; }
.tcard-streak {
  font-family: 'Inter', -apple-system, sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; padding: 3px 8px; border-radius: 10px;
}
.tcard-streak.is-win { color: #00e68a; background: rgba(0,230,138,.08); border: 1px solid rgba(0,230,138,.2); }
.tcard-streak.is-loss { color: #ff4d6a; background: rgba(255,77,106,.07); border: 1px solid rgba(255,77,106,.18); }
.tcard-streak.is-push { color: rgba(240,240,245,.4); background: rgba(240,240,245,.05); border: 1px solid rgba(240,240,245,.1); }

/* ── "get in the trade" CTA — only rendered when the server confirmed
   (live gamma) the evidence trade's market is still open, and only on a
   WIN (never prompt toward the trade that lost this wallet money). Not
   shown on 'compact' — that density already hides .tcard-evidence
   entirely, so there's no specific trade to reference. Same gold-gradient
   treatment as feed.html's .wcard-cta / home-kings.html's .call-cta. ── */
.tcard-cta {
  display: block; text-align: center; text-decoration: none;
  font-family: 'Inter', -apple-system, sans-serif; font-weight: 700; font-size: 13px;
  color: #151109; background: linear-gradient(180deg, #e0aa2e, #c9920d);
  border: 1px solid #c9920d; border-radius: 8px; padding: 10px 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 18px -10px rgba(201,146,13,.6);
  transition: transform .15s ease;
}
.tcard-cta:hover { transform: translateY(-1px); }
.tcard-compact .tcard-cta { display: none; }
@media (prefers-reduced-motion: reduce) { .tcard-cta { transition: none; } }

/* ── variants ── */
.tcard-hero { width: 100%; max-width: 480px; padding: 26px; gap: 18px; }
.tcard-hero .tcard-verdict { font-size: 26px; }

.tcard-feed { flex-shrink: 0; width: 300px; }

.tcard-compact { flex-shrink: 0; width: 220px; padding: 14px; gap: 10px; }
.tcard-compact .tcard-evidence, .tcard-compact .tcard-scope { display: none; }
/* Compact stays the tightest density by design ("minimum viable: identity +
   score + n") — dial the shared base sizes back down so a 220px card doesn't
   overflow now that .tcard-score/.tcard-handle were bumped for hero/feed. */
.tcard-compact .tcard-handle { font-size: 13px; }
.tcard-compact .tcard-score { font-size: 17px; }
.tcard-compact .tcard-n { font-size: 11px; }

@media (max-width: 640px) {
  .tcard-hero { max-width: 100%; padding: 20px; }
  .tcard-hero .tcard-verdict { font-size: 21px; }
}