/* =========================================================================
   TRACE CROWD (tcr-): "Who's behind it?" tab. Light console paper.
   Eye path: headline, stat row, one loud fact card, then quiet detail.
   Only separate objects (fact card, voice cards, post cards) get a frame.
   ========================================================================= */
.tcr{
  --tcr-ink:var(--ink,#171310); --tcr-ink-soft:var(--ink-soft,#433d36); --tcr-muted:var(--muted,#6f685e);
  --tcr-line:var(--line,#e4ddd1); --tcr-line-2:var(--line-2,#d8cfc0); --tcr-card:var(--card,#ffffff);
  --tcr-paper:#fbf9f5; --tcr-orange:#e0522f; --tcr-teal:#1f7a8c; --tcr-gold:#8a6d1f;
  --tcr-serif:"Source Serif 4",Georgia,serif; --tcr-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tcr-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  container-type:inline-size;
  color:var(--tcr-ink); font:400 14px/1.5 var(--tcr-sans);
  font-variant-numeric:tabular-nums;
}
.tcr *{ box-sizing:border-box; }
.tcr a:focus-visible,.tcr button:focus-visible,.tcr textarea:focus-visible{ outline:2px solid var(--tcr-teal); outline-offset:2px; border-radius:4px; }

/* 1. headline: the answer */
.tcr-head{ margin:0 0 22px; font:600 clamp(24px,3.4vw,34px)/1.18 var(--tcr-serif); letter-spacing:-.015em; color:var(--tcr-ink); text-wrap:balance; max-width:40ch; }
.tcr-head em{ font-style:normal; color:var(--tcr-teal); }

/* 2. stat row: no boxes, a hairline on top */
.tcr-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px 22px; margin:0 0 26px; }
.tcr-stat{ border-top:2px solid var(--tcr-ink); padding-top:10px; min-width:0; }
.tcr-stat b{ display:block; font:700 30px/1.05 var(--tcr-mono); letter-spacing:-.03em; color:var(--tcr-ink); }
.tcr-stat span{ display:block; margin-top:6px; font-size:13px; line-height:1.4; color:var(--tcr-ink-soft); }

/* 3. the forbidden fact: the one loud object */
.tcr-fact{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:center;
  background:var(--tcr-card); border:1px solid var(--tcr-line-2); border-left:5px solid var(--tcr-orange); border-radius:12px;
  padding:20px 24px; margin:0 0 40px; box-shadow:0 22px 48px -36px rgba(23,19,16,.5); }
.tcr-fact-num{ font:700 clamp(44px,6vw,64px)/1 var(--tcr-mono); letter-spacing:-.04em; color:var(--tcr-orange); }
.tcr-fact-body p{ margin:0; max-width:52ch; font:500 19px/1.4 var(--tcr-serif); color:var(--tcr-ink); text-wrap:pretty; }
.tcr-fact-act{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:14px; }
.tcr-btn{ font:600 13px/1 var(--tcr-sans); color:#fff; background:var(--tcr-ink); border:0; border-radius:8px; padding:10px 14px; cursor:pointer; }
.tcr-btn:hover{ background:#000; }
.tcr-copy-msg{ font:500 12px/1.3 var(--tcr-mono); color:var(--tcr-teal); }
.tcr-copy-src{ display:block; width:100%; margin-top:10px; min-height:90px; font:12px/1.5 var(--tcr-mono); color:var(--tcr-ink); border:1px solid var(--tcr-line-2); border-radius:8px; padding:8px; background:var(--tcr-paper); }
.tcr-copy-src[hidden]{ display:none; }

/* 3b. what stands out: the worker's facts-only signals, each with a Show-them action */
.tcr-stands{ margin:0 0 38px; }
.tcr-sigs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.tcr-sig{ padding-top:12px; border-top:1px solid var(--tcr-line); }
.tcr-sig:first-child{ padding-top:0; border-top:0; }
.tcr-sig-f{ margin:0; max-width:72ch; font:500 16px/1.45 var(--tcr-serif); color:var(--tcr-ink); text-wrap:pretty; }
.tcr-sig-vs{ font:600 13px/1.4 var(--tcr-sans); color:var(--tcr-teal); }
.tcr-sig-act{ margin-top:8px; }
.tcr-btn-q{ background:transparent; color:var(--tcr-ink); border:1px solid var(--tcr-line-2); }
.tcr-btn-q:hover{ background:var(--tcr-paper); }
.tcr-btn-q[aria-expanded="true"]{ background:var(--tcr-ink); color:#fff; border-color:var(--tcr-ink); }
.tcr-sig-set{ margin-top:10px; }
.tcr-sig-set[hidden]{ display:none; }
.tcr-sig-set li a{ font-size:13px; }
.tcr-hit{ box-shadow:0 0 0 2px var(--tcr-orange); border-radius:10px; }

/* sections: quiet headers, no boxes */
.tcr-detail{ display:flex; flex-direction:column; gap:38px; }
.tcr-sec{ min-width:0; }
.tcr-sh{ margin:0 0 14px; padding-bottom:8px; border-bottom:1px solid var(--tcr-line); }
.tcr-sh h3{ margin:0; font:600 20px/1.2 var(--tcr-serif); color:var(--tcr-ink); }
.tcr-sh p{ margin:3px 0 0; font-size:13px; color:var(--tcr-muted); }
.tcr-grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 28px; }
.tcr-pair{ gap:38px 40px; }

/* avatars: monogram underneath, photo on top; a failed photo is removed */
.tcr-av{ position:relative; flex:none; display:inline-grid; place-items:center; border-radius:50%; overflow:hidden; background:var(--tcr-tint,#6f685e); color:#fff; }
.tcr-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--tcr-paper); }
.tcr-av-mono{ font:700 1em/1 var(--tcr-sans); }
.tcr-av-m{ width:44px; height:44px; font-size:18px; }
.tcr-av-s{ width:28px; height:28px; font-size:12px; }
.tcr-av-xs{ width:22px; height:22px; font-size:10px; }

.tcr-name{ font-weight:650; color:var(--tcr-ink); }
.tcr-meta{ font:500 12px/1.35 var(--tcr-mono); color:var(--tcr-muted); }
.tcr-ver{ color:var(--tcr-teal); vertical-align:-2px; margin-left:5px; }
.tcr-link{ font:600 12px/1 var(--tcr-sans); color:var(--tcr-teal); text-decoration:none; }
.tcr-link:hover{ text-decoration:underline; }

/* 4. biggest voices */
.tcr-voice{ display:flex; gap:14px; padding:16px; background:var(--tcr-card); border:1px solid var(--tcr-line); border-radius:12px; min-width:0; }
.tcr-voice-b{ min-width:0; flex:1; }
.tcr-who{ font-size:15px; line-height:1.25; }
.tcr-voice .tcr-meta{ margin-top:2px; }
.tcr-line{ margin-top:7px; font:600 13px/1.3 var(--tcr-mono); color:var(--tcr-ink); }
.tcr-sample{ margin:8px 0 6px; font:italic 400 14.5px/1.45 var(--tcr-serif); color:var(--tcr-ink-soft);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* 5. ranked bars: label | bar + value */
.tcr-bars{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.tcr-bars li{ display:grid; grid-template-columns:minmax(0,9rem) minmax(0,1fr) auto; gap:10px; align-items:center; }
.tcr-bl{ font:500 13px/1.2 var(--tcr-sans); color:var(--tcr-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tcr-bt{ display:block; min-width:0; }
.tcr-bt i{ display:block; height:14px; border-radius:2px; background:var(--tcr-teal); }
.tcr-bv{ font:500 12px/1 var(--tcr-mono); color:var(--tcr-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tcr-bv b{ color:var(--tcr-ink); font-weight:700; font-size:13px; }

/* 6. most prolific + how they post */
.tcr-plist{ list-style:none; margin:0; padding:0; }
.tcr-plist li{ display:grid; grid-template-columns:1.4em auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid var(--tcr-line); }
.tcr-plist li:last-child{ border-bottom:0; }
.tcr-rank{ font:600 12px/1 var(--tcr-mono); color:var(--tcr-muted); text-align:right; }
.tcr-pl-who{ display:flex; flex-direction:column; min-width:0; }
.tcr-pl-who .tcr-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; }
.tcr-pl-act{ font:600 12.5px/1.2 var(--tcr-mono); color:var(--tcr-ink); text-align:right; white-space:nowrap; }

.tcr-stack{ display:flex; height:40px; border-radius:6px; overflow:hidden; margin:6px 0 16px; }
.tcr-seg{ display:flex; align-items:center; justify-content:center; min-width:0; font:700 13px/1 var(--tcr-mono); }
.tcr-legend{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 20px; }
.tcr-legend li{ display:grid; grid-template-columns:12px minmax(0,1fr) auto 3.4em; gap:8px; align-items:center; font-size:13px; color:var(--tcr-ink); }
.tcr-legend i{ width:12px; height:12px; border-radius:3px; }
.tcr-legend b{ font:700 13px/1 var(--tcr-mono); }
.tcr-legend em{ font:500 12px/1 var(--tcr-mono); font-style:normal; color:var(--tcr-muted); text-align:right; }
.tcr-legend .tcr-zero{ color:var(--tcr-muted); }

/* 7. word cloud: weighted, center-out inline flow */
.tcr-cloud{ text-align:center; line-height:1.25; padding:6px 4% 2px; max-width:860px; margin:0 auto; }
.tcr-w{ display:inline-block; margin:2px 7px; font-family:var(--tcr-serif); color:var(--tcr-ink-soft); vertical-align:middle; }
.tcr-w1{ font-size:13px; color:var(--tcr-muted); }
.tcr-w2{ font-size:16px; }
.tcr-w3{ font-size:20px; font-weight:500; }
.tcr-w4{ font-size:26px; font-weight:600; color:var(--tcr-ink); }
.tcr-w5{ font-size:34px; font-weight:700; color:var(--tcr-ink); letter-spacing:-.01em; }
.tcr-wtop{ color:var(--tcr-orange); }

/* 8. what it looks like */
.tcr-post{ display:flex; flex-direction:column; gap:8px; padding:14px 16px; background:var(--tcr-card); border:1px solid var(--tcr-line); border-left:3px solid var(--tcr-line-2); border-radius:10px; min-width:0; }
.tcr-post-h{ display:flex; align-items:center; gap:9px; font:600 12.5px/1.2 var(--tcr-mono); color:var(--tcr-ink-soft); }
.tcr-post-t{ margin:0; font-size:14px; line-height:1.5; color:var(--tcr-ink); overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.tcr-post-f{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:auto; font:500 12px/1.2 var(--tcr-mono); color:var(--tcr-muted); }
.tcr-post-f b{ color:var(--tcr-ink); }

/* 9. seen before */
.tcr-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.tcr-chip{ display:inline-flex; align-items:center; gap:7px; padding:4px 12px 4px 4px; border:1px solid var(--tcr-line-2); border-radius:999px; font-size:13px; background:var(--tcr-paper); }

.tcr-note{ margin:0; font-size:12.5px; line-height:1.5; color:var(--tcr-muted); }
.tcr-empty .tcr-note{ font-size:14px; }

@media (prefers-reduced-motion:no-preference){
  .tcr-btn,.tcr-link{ transition:background-color .15s ease,color .15s ease; }
}

@container (max-width:860px){
  .tcr-grid2,.tcr-pair{ grid-template-columns:minmax(0,1fr); }
  .tcr-pair{ gap:38px; }
}
@container (max-width:520px){
  .tcr-fact{ grid-template-columns:minmax(0,1fr); gap:10px; padding:18px; }
  .tcr-legend{ grid-template-columns:minmax(0,1fr); }
  .tcr-bars li{ grid-template-columns:minmax(0,7rem) minmax(0,1fr) auto; }
  .tcr-bv{ font-size:11px; }
  .tcr-stat b{ font-size:26px; }
}