/* =========================================================================
   TRACE REPLAY (trep-): the opening screen of the Trace box, shared by index.html
   and trace.html. J 10-29: "that's not what they want to see, that's not the
   result." So the opening IS a result: one real public trace (@mcuban, Oct 18)
   plays back. The post it started from, then the accounts answering it drop in
   with what they said while the count climbs to the real hour total, then
   "Type yours." Data: assets/trace-replay.json (scripts/build-trace-replay.mjs).
   Eye path: 1 the headline -> 2 the post it started from -> 3 the climbing count
   -> 4 the posts arriving -> 5 the box. Facts only, no em dashes.
   ========================================================================= */
.th-hero h1.trep-h, .tx-hero h1.trep-h{ max-width:18ch; text-wrap:balance; font-size:clamp(32px,4.6vw,56px); letter-spacing:-.025em; }
.trep-h em{ color:#ff8a66; font-style:italic; }
.trep-sub{ margin:12px 0 22px; font:500 clamp(16px,1.6vw,18px)/1.45 var(--sans); color:#cfe1d5; max-width:44ch; }

/* the old static proof cards stay in the page for their scripts, never shown */
.is-off{ display:none !important; }

/* THE CARD, drawn like the Trace ad (J 10-30): two-color headline, the post as a ring on the
   axis, a faint burst of lines to everyone who replied to it, white fans from the accounts
   others answered (blurred faces), masked callouts, the within-the-hour bracket. */
.trep{ background:#100f0d; border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:18px 18px 12px; color:#e9e4dc; box-shadow:0 34px 80px -40px rgba(0,0,0,.8); }
.trep-k{ display:flex; align-items:center; gap:8px; margin:0; font:700 10.5px/1 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; color:#8f8a82; }
.trep-k i{ width:8px; height:8px; border-radius:50%; background:#5cb487; animation:trepPulse 1.6s ease-out infinite; }
.trep.done .trep-k i{ animation:none; background:#8f8a82; }
@keyframes trepPulse{ 0%{ box-shadow:0 0 0 0 rgba(92,180,135,.55); } 100%{ box-shadow:0 0 0 9px rgba(92,180,135,0); } }
.trep-big{ margin:12px 0 0; font:600 clamp(30px,3.4vw,42px)/1.02 var(--serif); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.trep-big span{ display:block; }
.trep-big .c-a{ color:#ee6a3c; } .trep-big .c-w{ color:#27aec4; }
.trep-chart{ margin:6px -6px 0; }
.trep-svg{ display:block; width:100%; height:auto; overflow:visible; }
.trep-ax{ stroke:rgba(255,255,255,.18); stroke-width:1; }
.trep-tk{ font:500 14px "JetBrains Mono",ui-monospace,monospace; fill:#8f8a82; }
.trep-post{ fill:#100f0d; stroke:#e9e4dc; stroke-width:2.5; }
.trep-l{ fill:none; stroke-width:.8; opacity:0; stroke-dasharray:1; stroke-dashoffset:1; transition:opacity .4s; }
.trep-l.on{ opacity:.2; animation:trepDraw .7s ease-out forwards; }
.trep-hw{ fill:none; stroke:#fff; stroke-width:1.5; opacity:0; stroke-dasharray:1; stroke-dashoffset:1; }
.trep-hw.on{ opacity:.92; animation:trepDraw .6s ease-out forwards; }
@keyframes trepDraw{ to{ stroke-dashoffset:0; } }
.trep-d{ opacity:0; transform-box:fill-box; transform-origin:center; }
.trep-d.on{ opacity:.95; }
.trep-d.pop{ animation:trepPop .45s cubic-bezier(.2,1.7,.4,1) both; }
@keyframes trepPop{ from{ transform:scale(0); } to{ transform:scale(1); } }
.trep-face{ opacity:0; transform-box:fill-box; transform-origin:center; transition:opacity .3s; }
.trep-face.on{ opacity:1; animation:trepPop .5s cubic-bezier(.2,1.7,.4,1) both; }
.trep-ring{ fill:#100f0d; stroke:#fff; stroke-width:2.5; }
.trep-call{ opacity:0; transition:opacity .45s; }
.trep-call.on{ opacity:1; }
.trep-box{ fill:#f4efe6; }
.trep-lead{ stroke:rgba(255,255,255,.75); stroke-width:1; }
.trep-ct1{ font:700 17px var(--sans, Inter, system-ui, sans-serif); fill:#14110e; }
.trep-ct2{ font:500 13px var(--sans, Inter, system-ui, sans-serif); fill:#5f594f; }
.trep-br{ opacity:0; transition:opacity .5s; }
.trep-br.on{ opacity:1; }
.trep-brl{ fill:none; stroke:#ee6a3c; stroke-width:1.5; }
.trep-brt{ font:700 15px var(--sans, Inter, system-ui, sans-serif); fill:#ee6a3c; }
.trep-foot{ display:flex; justify-content:space-between; gap:10px; margin:10px 0 0; padding-top:10px; border-top:1px solid rgba(255,255,255,.08); font:500 11.5px/1.3 var(--sans); color:#8f8a82; }
.trep-foot a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); font-weight:600; }
.trep-foot a:hover{ border-color:#fff; }

@media (max-width:980px){ .trep{ margin:0 0 18px; } }
@media (max-width:600px){
  .trep{ margin:14px 0 16px; padding:14px 12px 10px; border-radius:16px; }
  .trep-big{ font-size:28px; margin-top:8px; }
  .trep-big span{ display:inline; }
  .trep-foot{ display:none; }
  .trep-sub{ display:none; }
  .th-hero .eyebrow, .tx-hero .eyebrow{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .trep-k i{ animation:none; } .trep-d.pop, .trep-face.on{ animation:none; } .trep-l.on, .trep-hw.on{ animation:none; stroke-dashoffset:0; } }

/* top: the post it started from (J 10-30: keep the top and the bottom) */
.trep-rootbox{ margin:12px 0 0; padding:11px 13px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(238,106,60,.5); }
.trep-root-top{ display:flex; align-items:center; gap:8px; font:600 13px/1.2 var(--sans); color:#fff; }
.trep-root-top small{ font-weight:500; color:#8f8a82; }
.trep-tag{ margin-left:auto; font:700 10.5px/1 var(--sans); letter-spacing:.04em; text-transform:uppercase; color:#1a0f0a; background:#ff8a66; border-radius:100px; padding:4px 8px; }
.trep-rootbox q{ display:block; margin:7px 0 0; quotes:"\201C" "\201D"; font:500 14.5px/1.42 var(--serif); color:#f4efe7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* bottom: the reply that just landed, then the split */
.trep-now{ min-height:52px; margin:4px 0 0; }
.trep-now .r{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:9px; animation:trepIn .4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes trepIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.trep-av{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font:700 12px/1 var(--sans); color:#100f0d; background:#8d877d; }
.trep-av.against{ background:#ee6a3c; } .trep-av.with{ background:#27aec4; }
.trep-who{ display:flex; gap:6px; align-items:baseline; font:600 13px/1.2 var(--sans); color:#fff; min-width:0; }
.trep-who small{ flex:none; font-weight:500; color:#8f8a82; }
.trep-said{ margin:3px 0 0; font:400 13px/1.4 var(--sans); color:#d9d3c9; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.trep-end{ display:flex; flex-wrap:wrap; gap:4px 14px; min-height:20px; margin:8px 0 0; font:500 13px/1.4 var(--sans); color:#b9b2a7; opacity:0; transition:opacity .5s; }
.trep-end.on{ opacity:1; }
.trep-end b{ color:#fff; margin-right:3px; }
.trep-end i{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:0; }
.trep-end i.ln{ width:14px; height:2px; border-radius:2px; background:#fff; vertical-align:3px; }
@media (max-width:600px){
  .trep-rootbox{ margin-top:8px; padding:9px 11px; }
  .trep-rootbox q{ -webkit-line-clamp:1; font-size:13.5px; }
  .trep-now{ min-height:40px; }
  .trep-said{ -webkit-line-clamp:1; }
  .trep-end{ font-size:12px; gap:2px 10px; margin-top:4px; }
  .trep-k{ display:none; }
  .trep-rootbox{ margin-top:0; }
  .trep-big{ margin-top:8px; font-size:26px; }
  .trep-chart{ margin-top:2px; }
  .trep-now{ min-height:36px; margin-top:0; }
  .trep-end .trep-thru{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .trep-now .r{ animation:none; } }

/* NO JUMPING (J 10-30: "make sure the screen doesn't resize"): every part that fills in
   while it plays has its room from the first frame, so the card (and the hero centred
   beside it) never changes height. */
.trep-rootbox q{ height:calc(1.42em * 3); }
.trep-now{ height:56px; min-height:0; overflow:hidden; }
.trep-end{ height:44px; min-height:0; align-content:flex-start; overflow:hidden; }
.trep-big{ height:calc(2 * 1.02em); }
.trep-big b{ display:inline-block; min-width:1.6ch; text-align:left; }
@media (max-width:600px){
  .trep-rootbox q{ height:1.42em; }
  .trep-now{ height:40px; }
  .trep-end{ height:20px; }
  .trep-big{ height:1.1em; }
}

/* the embed (embed.html, J 10-29): the post and every quoted reply link to the real post, a
   called-out account with no face is its ring and masked letter, and it plays once with a
   quiet "Play again" instead of looping in someone's article. The homepage uses none of these. */
.trep-ini{ font:700 14px var(--sans, Inter, system-ui, sans-serif); fill:#fff; }
.trep-rootbox q a{ color:inherit; text-decoration:none; }
.trep-rootbox q a:hover{ text-decoration:underline; text-decoration-color:rgba(255,255,255,.4); }
.trep-now a.r{ color:inherit; text-decoration:none; }
.trep-now a.r:hover .trep-said{ text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); }
.trep-again{ padding:2px 10px; border-radius:100px; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; font:600 12px/1.4 var(--sans); cursor:pointer; white-space:nowrap; }
.trep-again:hover{ border-color:#fff; }
.trep-again:focus-visible{ outline:2px solid #fff; outline-offset:2px; }