/* Trace Spread map (classes tsp-). The map sits on a dark "screen" panel so it
   reads as an instrument; the cards under it are the console's light paper.
   Text always wears ink tokens; lineage hues live on marks and on the headline's
   legend words only. No em dashes. */
.tsp{ position:relative; display:grid; gap:20px; font-family:var(--sans,"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif); color:var(--ink,#171310);
  --tsp-bg:#12100e; --tsp-panel:#1a1714; --tsp-line:#2a2521; --tsp-line-2:#3a332c;
  --tsp-ink:#f2ede5; --tsp-ink-2:#aaa196; --tsp-ink-3:#7a7267;
  --tsp-serif:var(--serif,"Source Serif 4",Georgia,"Times New Roman",serif);
  --tsp-sans:var(--sans,"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif);
  --tsp-mono:var(--gv-mono,var(--mono,"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace)); }
.tsp *{ box-sizing:border-box; }

/* 1. the screen: headline (its colored words are the legend), key, map, beats */
.tsp-screen{ background:var(--tsp-bg); color:var(--tsp-ink); border:1px solid var(--tsp-line); border-radius:14px; overflow:hidden; color-scheme:dark; }
.tsp-head{ padding:22px 22px 16px; }
.tsp-kicker{ display:flex; flex-wrap:wrap; gap:6px 18px; font:500 11px/1 var(--tsp-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--tsp-ink-3); }
.tsp-kicker span:first-child{ color:var(--tsp-ink-2); }
.tsp-h{ margin:12px 0 0; font:600 clamp(24px,3.4vw,38px)/1.08 var(--tsp-serif); letter-spacing:-.02em; color:var(--tsp-ink); max-width:26ch; text-wrap:balance; }
.tsp-h .tsp-lc{ font-weight:600; }
.tsp-sub{ margin:8px 0 0; font:400 14px/1.5 var(--tsp-sans); color:var(--tsp-ink-2); max-width:70ch; text-wrap:pretty; }
.tsp-key{ display:flex; flex-wrap:wrap; gap:8px 20px; padding:12px 22px; border-top:1px solid var(--tsp-line); border-bottom:1px solid var(--tsp-line); font:500 12px/1.2 var(--tsp-sans); color:var(--tsp-ink-2); }
.tsp-key span{ display:inline-flex; align-items:center; gap:8px; }
.tsp-key .tsp-k-note{ color:var(--tsp-ink-3); margin-left:auto; }
.tsp-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; flex:none; box-sizing:content-box; }
.tsp-dot-ring{ box-shadow:0 0 0 2px var(--card,#fff), 0 0 0 3.5px var(--ink,#171310); }
.tsp-k-ring{ width:12px; height:12px; border-radius:50%; border:1.5px solid var(--tsp-ink); background:var(--tsp-ink-3); }
.tsp-k-dash{ width:12px; height:12px; border-radius:50%; border:1.5px dashed var(--tsp-ink-2); }
.tsp-k-small{ width:6px; height:6px; border-radius:50%; background:var(--tsp-ink-2); margin:0 3px; }

/* the map scrolls sideways on a phone; the page never does */
.tsp-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
.tsp-map{ display:block; width:100%; min-width:860px; height:auto; }
.tsp-map text{ font-family:var(--tsp-mono); }
.tsp-map .tsp-t-sans{ font-family:var(--tsp-sans); }
.tsp-map .tsp-t-mono{ font-family:var(--tsp-mono); }
.tsp-map .tsp-ink{ fill:var(--tsp-ink); }
.tsp-map .tsp-ink2{ fill:var(--tsp-ink-2); }
.tsp-map .tsp-ink3{ fill:var(--tsp-ink-3); }
.tsp-map .tsp-f-bg{ fill:var(--tsp-bg); }
.tsp-map .tsp-grid{ stroke:var(--tsp-line); stroke-dasharray:1 6; stroke-linecap:round; }
.tsp-map .tsp-spine{ stroke:var(--tsp-line-2); stroke-width:1.5; }
.tsp-map .tsp-lane{ stroke:var(--tsp-line); stroke-width:1; }
.tsp-map .tsp-pill{ fill:var(--tsp-bg); stroke:var(--tsp-line-2); }
.tsp-map .tsp-rug{ stroke:var(--tsp-ink-3); stroke-width:1; stroke-opacity:.55; cursor:pointer; }
.tsp-map .tsp-ring{ stroke:var(--tsp-ink); stroke-width:1.4; }
.tsp-map .tsp-reply{ stroke:var(--tsp-ink-2); stroke-width:1.4; }
.tsp-map .tsp-lbl{ paint-order:stroke; stroke:var(--tsp-bg); stroke-width:4px; stroke-linejoin:round; }
.tsp-map .tsp-lead{ stroke:var(--tsp-ink-3); stroke-width:1; }
.tsp-map .tsp-badge{ fill:var(--tsp-ink); stroke:var(--tsp-bg); stroke-width:3; }
.tsp-map .tsp-badge-t{ fill:var(--tsp-bg); }
.tsp-n{ cursor:pointer; outline:none; }
/* storylines view: one row per conversation, its label block at the left is hoverable */
.tsp-sl-lab{ cursor:default; outline:none; }
.tsp-sl-lab:hover text, .tsp-sl-lab:focus-visible text{ fill:var(--tsp-ink); }
.tsp-sl-lab:focus-visible rect{ stroke:var(--tsp-ink-3); stroke-width:1; }
.tsp-row.tsp-sl-row{ grid-template-columns:minmax(0,1fr) minmax(0,120px) 44px; }
.tsp-row.tsp-sl-row .tsp-who{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:9px; align-items:center; }
.tsp-row.tsp-sl-row .tsp-who .tsp-dot{ grid-row:1/3; }
.tsp-row.tsp-sl-row .tsp-hd{ white-space:normal; line-height:1.25; }
.tsp-row.tsp-sl-row .tsp-pl{ text-transform:none; letter-spacing:0; font-size:10.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tsp-n:focus-visible .tsp-hit{ stroke:var(--tsp-ink); stroke-width:1.5; }
.tsp-dim{ transition:opacity .18s ease; }
.tsp-note{ margin:0; padding:10px 22px 0; font:400 12px/1.5 var(--tsp-sans); color:var(--tsp-ink-3); }

/* 3. numbered beats, read left to right under the map */
.tsp-beats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--tsp-line); margin-top:10px; }
.tsp-beats-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.tsp-beats-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.tsp-beat{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:24px minmax(0,1fr); gap:4px 12px; padding:18px 20px 20px; border-right:1px solid var(--tsp-line); cursor:default; color:var(--tsp-ink); }
.tsp-beat:last-child{ border-right:0; }
.tsp-beat:hover, .tsp-beat:focus-visible{ background:var(--tsp-panel); }
.tsp-beat:focus-visible{ outline:2px solid var(--tsp-ink-3); outline-offset:-2px; }
.tsp-num{ grid-row:1/4; width:22px; height:22px; border-radius:50%; background:var(--tsp-ink); color:var(--tsp-bg); font:600 11px/22px var(--tsp-mono); text-align:center; }
.tsp-when{ font:500 11px/1.4 var(--tsp-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--tsp-ink-3); }
.tsp-what{ font:500 14.5px/1.35 var(--tsp-sans); color:var(--tsp-ink); text-wrap:pretty; overflow-wrap:anywhere; }
.tsp-stat{ font:600 19px/1.2 var(--tsp-mono); font-variant-numeric:tabular-nums; color:var(--tsp-ink); margin-top:6px; display:flex; align-items:center; gap:8px; }
.tsp-stat i{ width:8px; height:8px; border-radius:50%; flex:none; }

/* 4 and 5. below the screen: who carried it + the fact card, on paper */
.tsp-lower{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:20px; align-items:start; }
.tsp-lower-1{ grid-template-columns:minmax(0,1fr); }
.tsp-card{ background:var(--card,#fff); border:1px solid var(--line-2,#d8cfc0); border-radius:14px; padding:20px 22px 18px; color:var(--ink,#171310); }
.tsp-card h3{ margin:0; font:600 20px/1.2 var(--tsp-serif); letter-spacing:-.01em; color:var(--ink,#171310); text-wrap:balance; }
.tsp-cardsub{ margin:6px 0 0; font-size:13px; color:var(--muted,#6f685e); }
.tsp-rows{ display:grid; margin-top:14px; }
.tsp-row{ display:grid; grid-template-columns:minmax(0,170px) minmax(0,1fr) 54px; align-items:center; gap:14px; padding:8px 0; border-top:1px solid var(--line,#e4ddd1); cursor:default; outline:none; }
.tsp-row:hover .tsp-hd, .tsp-row:focus-visible .tsp-hd{ color:var(--ink,#171310); }
.tsp-row:focus-visible{ box-shadow:inset 0 0 0 2px var(--line-2,#d8cfc0); border-radius:6px; }
.tsp-who{ display:flex; align-items:center; gap:9px; min-width:0; }
.tsp-who .tsp-dot{ width:9px; height:9px; }
.tsp-hd{ font:500 13.5px/1.2 var(--tsp-sans); color:var(--ink-soft,#433d36); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.tsp-pl{ font:500 10px/1 var(--tsp-mono); color:var(--muted,#6f685e); letter-spacing:.04em; text-transform:uppercase; flex:none; }
.tsp-bar{ height:8px; border-radius:0 4px 4px 0; opacity:.9; }
.tsp-v{ font:500 12.5px/1 var(--tsp-mono); font-variant-numeric:tabular-nums; text-align:right; color:var(--ink,#171310); }
.tsp-empty{ margin:10px 0 0; font-size:13px; color:var(--muted,#6f685e); }
.tsp-big{ font:600 56px/1 var(--tsp-mono); letter-spacing:-.03em; margin-top:8px; color:var(--ink,#171310); display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.tsp-big small{ font:500 14px/1.3 var(--tsp-sans); letter-spacing:0; color:var(--ink-soft,#433d36); max-width:24ch; }
.tsp-fact p{ margin:12px 0 0; color:var(--ink-soft,#433d36); font-size:14px; line-height:1.5; max-width:44ch; text-wrap:pretty; }
.tsp-fact p b{ color:var(--ink,#171310); font-weight:600; }
.tsp-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.tsp-chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 10px 5px 8px; border:1px solid var(--line-2,#d8cfc0); border-radius:99px; font:500 12px/1 var(--tsp-sans); color:var(--ink-soft,#433d36); }
.tsp-chip .tsp-dot{ width:8px; height:8px; }
.tsp-toggle{ margin-top:16px; font:600 12px/1 var(--tsp-sans); color:var(--ink,#171310); background:transparent; border:1px solid var(--line-2,#d8cfc0); border-radius:8px; padding:9px 13px; cursor:pointer; }
.tsp-toggle:hover{ border-color:var(--ink-soft,#433d36); }
.tsp-toggle[aria-pressed="true"]{ background:var(--ink,#171310); color:var(--card,#fff); border-color:var(--ink,#171310); }
.tsp-toggle:focus-visible{ outline:2px solid var(--ink,#171310); outline-offset:2px; }
.tsp-foot{ margin:0; font-size:12px; line-height:1.55; color:var(--muted,#6f685e); max-width:110ch; }

/* hover tooltip, positioned inside .tsp */
.tsp-tip{ position:absolute; z-index:9; pointer-events:none; background:#1d1a17; border:1px solid var(--tsp-line-2); border-radius:8px; padding:10px 12px; font:400 12.5px/1.45 var(--tsp-sans); color:var(--tsp-ink); box-shadow:0 14px 34px -12px rgba(0,0,0,.7); max-width:270px; }
.tsp-tip b{ font-weight:600; }
.tsp-tip .tsp-tm{ font:400 11px/1.5 var(--tsp-mono); color:var(--tsp-ink-2); }
.tsp-tip .tsp-tq{ margin-top:6px; padding-top:6px; border-top:1px solid var(--tsp-line); color:var(--tsp-ink-2); font-size:12px; }

@media (max-width:860px){
  .tsp-beats, .tsp-beats-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tsp-beat:nth-child(2n){ border-right:0; }
  .tsp-lower{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:460px){
  .tsp-head{ padding:18px 16px 14px; }
  .tsp-key, .tsp-note{ padding-left:16px; padding-right:16px; }
  .tsp-beats, .tsp-beats-2, .tsp-beats-3{ grid-template-columns:minmax(0,1fr); }
  .tsp-beat{ border-right:0; border-bottom:1px solid var(--tsp-line); padding:14px 16px 16px; }
  .tsp-beat:last-child{ border-bottom:0; }
  .tsp-row{ grid-template-columns:minmax(0,120px) minmax(0,1fr) 48px; gap:10px; }
  .tsp-big{ font-size:44px; }
}
@media (prefers-reduced-motion:reduce){ .tsp-dim{ transition:none; } }