/* =========================================================================
   TRACE: the attention-intelligence surface inside Pressfront.
   NOT a new brand. Same serif, same sans, same spacing, same footer.
   Trace adds exactly three semantic colors on top of the Pressfront tokens:

     --tr-attn  orange  #e0522f   attention numbers (score, velocity, reach)
     --tr-meas  teal    #1f7a8c   measured / verified (straight from a platform)
     --tr-model gold    #8a6d1f   modeled (our judgment, rule always shown)

   Mobile first. Nothing may scroll the page sideways: the timeline scrolls
   inside its own container.

   LIGHT ONLY, on purpose. The rest of pressfront.co (styles.css) has no dark
   handling, so Trace must not either: a `prefers-color-scheme: dark` block here
   used to repaint --paper/--ink and turned trace.html black while every other
   page stayed cream. Removed 2026-09-17. Trace adds ONLY its three accents on
   top of the brand's light tokens; it never redefines --paper, --ink, etc.
   ========================================================================= */

:root{
  /* Pressfront tokens are declared in styles.css; these are the Trace additions
     only, so the page keeps the brand's cream paper and dark ink. */
  --tr-attn:       #e0522f;
  --tr-attn-tint:  #fdeee9;
  --tr-attn-line:  #f3c4b5;
  --tr-meas:       #1f7a8c;
  --tr-meas-tint:  #e6f2f4;
  --tr-meas-line:  #b8d9df;
  --tr-model:      #8a6d1f;
  --tr-model-tint: #f8f1de;
  --tr-model-line: #e6d5a8;
  --tr-curve:      rgba(224,82,47,.26);
}

/* ---------- page frame ---------- */
html,body{ max-width:100%; overflow-x:hidden; }
/* clip, not hidden: hidden turns body into a scroll box and kills every sticky thing (the nav, the trace tabs) */
@supports (overflow:clip){ html,body{ overflow-x:clip; } }
*{ min-width:0; }
/* Inherit the brand ground from styles.css; do NOT set a background here, so
   Trace can never diverge from the homepage. */
.twrap{ max-width:780px; width:100%; margin:0 auto; padding:clamp(22px,5vw,54px) var(--gut); box-sizing:border-box; overflow-wrap:anywhere; }

.thead{ text-align:left; margin:0 0 24px; }
.thead .eyebrow{ color:var(--tr-attn); margin-bottom:14px; }
.thead h1{ font-size:clamp(27px,5vw,46px); line-height:1.06; margin:8px 0 12px; overflow-wrap:anywhere; }
.thead p.sub{ color:var(--ink-soft); font-size:16px; max-width:56ch; margin:0; line-height:1.6; }

/* ---------- label chips: every number says how it was made ---------- */
.lab{
  display:inline-block; font-family:var(--sans);
  font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border-radius:100px; padding:2px 8px; line-height:1.5; white-space:nowrap;
  border:1px solid transparent; vertical-align:middle;
}
.lab.measured{ color:var(--tr-meas);  background:var(--tr-meas-tint);  border-color:var(--tr-meas-line); }
.lab.derived { color:var(--tr-attn);  background:var(--tr-attn-tint);  border-color:var(--tr-attn-line); }
.lab.modeled { color:var(--tr-model); background:var(--tr-model-tint); border-color:var(--tr-model-line); }

/* ---------- the form ---------- */
.tform{ background:var(--card); border:1px solid var(--line-2); border-radius:16px; padding:22px; margin:0 0 18px; box-shadow:0 20px 50px -34px rgba(23,19,16,.25); }
.tform label{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; }
.tform input[type=text]{ width:100%; box-sizing:border-box; padding:13px 15px; border:1px solid var(--line-2); border-radius:10px; font-size:16px; background:var(--paper); color:var(--ink); font-family:inherit; }
.tform input::placeholder{ color:var(--muted-2); }
/* the question first: what the reader wants to know decides how the result opens */
/* the box asks one plain question; the line under it names both jobs */
.tr-tool .tform label.tq-lab, .tform label.tq-lab{ display:block; margin:0 0 10px; font:600 19px/1.25 var(--serif); color:var(--ink); letter-spacing:-.005em; text-transform:none; }
.tform .tq-two{ margin:10px 0 0; font-size:14px; line-height:1.45; color:var(--ink-soft); }
.tform .tq-two b{ color:var(--ink); font-weight:600; }
.twin{ flex:1 1 180px; min-width:0; }
.twin select{ width:100%; padding:13px 12px; border:1px solid var(--line-2); border-radius:10px; font-size:15px; background:var(--paper); color:var(--ink); font-family:inherit; }
.twin select option:disabled{ color:var(--muted-2); }
/* Locked window picker: free / logged-out callers can only see the 7-day taste.
   The control is disabled (server clamps anyway), greyed, and carries a lock. */
.twin.locked select{ color:var(--muted); background:var(--paper-2,#f4f1ec); cursor:not-allowed;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238a8378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; }
.winlock{ font-size:11.5px; color:var(--muted); margin:6px 0 0; }
.winlock a{ color:var(--tr-attn,#c0402e); text-decoration:underline; }
/* Quiet, contextual line above a clamped free result: the server's own sentence
   plus a soft link to Watch. Not a hard CTA. Styled to sit with the revamped
   console: a soft tinted slab with a leading lock, so a signed-out result reads
   as "you are seeing the 7-day taste", never as a broken or nagging banner. */
.clamp-note{ display:flex; gap:11px; align-items:flex-start;
  background:radial-gradient(120% 140% at 0% 0%, var(--green-tint,#eaf0eb), #f4f0e7 90%);
  border:1px solid #cfdcd0; border-radius:12px;
  padding:12px 15px; margin:0 0 16px; font-size:13px; color:var(--ink-soft); line-height:1.55;
  box-shadow:0 1px 2px rgba(23,19,16,.04); }
.clamp-note:before{ content:""; flex:none; width:18px; height:18px; margin-top:1px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23234a34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.clamp-note a{ color:var(--green,#234a34); font-weight:700; text-decoration:underline; }
.tform .go{ flex:1 1 160px; background:var(--tr-attn); color:#fff; border:none; padding:15px 18px; border-radius:10px; font-size:16px; font-weight:600; cursor:pointer; font-family:inherit; }
.tform .go:hover{ filter:brightness(1.06); }
.tform .go:disabled{ opacity:.55; cursor:default; }
.tform .fine{ font-size:12.5px; color:var(--muted); margin:14px 0 0; line-height:1.5; }
.tform .err{ color:#c0402e; font-size:13px; margin:8px 0 0; display:none; }
.tform .err.on{ display:block; }
.winhint{ font-size:11.5px; color:var(--muted); margin:6px 0 0; }

/* ---------- running: per-source lines, never a bare spinner ---------- */
@keyframes trSpin{ to{ transform:rotate(360deg); } }
@keyframes trIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.trun{ display:none; }
.trun.on{ display:block; }
.trun-card{ background:var(--card); border:1px solid var(--line-2); border-radius:16px; padding:24px 24px 20px; box-shadow:0 20px 50px -34px rgba(23,19,16,.25); }
.trun-title{ font-family:var(--serif); font-size:22px; font-weight:600; margin:0 0 5px; line-height:1.12; }
.trun-sub{ font-size:14px; color:var(--ink-soft); margin:0 0 18px; line-height:1.5; }
.tlines{ display:flex; flex-direction:column; gap:1px; }
.tline{ display:flex; align-items:center; gap:12px; padding:9px 0; font-size:15.5px; color:var(--muted); }
/* Sweep-in: only when the list first paints (JS adds .sweep to the container), each row
   cascades in top-to-bottom. This is the "casting a huge net" beat. It must run ONCE,
   not on every poll, or the whole list flashes each tick. */
.tlines.sweep .tline{ opacity:0; animation:trIn .34s ease forwards; }
.tlines.sweep .tline:nth-child(1){ animation-delay:0ms } .tlines.sweep .tline:nth-child(2){ animation-delay:14ms } .tlines.sweep .tline:nth-child(3){ animation-delay:28ms } .tlines.sweep .tline:nth-child(4){ animation-delay:42ms } .tlines.sweep .tline:nth-child(5){ animation-delay:56ms } .tlines.sweep .tline:nth-child(6){ animation-delay:70ms } .tlines.sweep .tline:nth-child(7){ animation-delay:84ms } .tlines.sweep .tline:nth-child(8){ animation-delay:98ms } .tlines.sweep .tline:nth-child(9){ animation-delay:112ms } .tlines.sweep .tline:nth-child(10){ animation-delay:126ms }
.tlines.sweep .tline:nth-child(n+11){ animation-delay:140ms }
.tline:before{ content:""; width:20px; height:20px; border-radius:50%; border:2.5px solid var(--line-2); flex:none; box-sizing:border-box; }
.tline.active{ color:var(--ink); font-weight:600; }
.tline.active:before{ border-color:var(--tr-attn); border-top-color:transparent; animation:trSpin .8s linear infinite; }
.tline.done{ color:var(--ink); font-weight:600; }
.tline.done:before{ content:"\2713"; border-color:var(--tr-meas); background:var(--tr-meas); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
/* A hit pops: the found row punches in once (scale + count badge), the reward beat. */
.tline.hit{ animation:trHit .42s cubic-bezier(.2,1.3,.5,1); }
.tline.hit .n{ animation:trHitN .5s ease; }
@keyframes trHit{ 0%{ transform:scale(1); } 30%{ transform:scale(1.035); } 100%{ transform:scale(1); } }
@keyframes trHitN{ 0%{ opacity:0; transform:translateX(6px); } 100%{ opacity:1; transform:translateX(0); } }
.tline.fail:before{ content:"\00D7"; border-color:var(--muted-2); background:var(--muted-2); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.tline .n{ margin-left:auto; font-family:var(--serif); font-size:15px; font-weight:600; color:var(--tr-attn); flex:none; }
.tline.fail .n, .tline .n.zero{ color:var(--muted); }
/* finishing: every venue answered, the page is being built. Loud at the top, list goes quiet. */
.trun-card.finishing .trun-title{ font-size:26px; }
.trun-card.finishing .tlines, .trun-card.finishing .trun-tally{ opacity:.45; transition:opacity .4s ease; }
.tfinish{ margin:0 0 18px; animation:trIn .34s ease; }
.tfin-bar{ position:relative; height:8px; border-radius:99px; background:var(--line); overflow:hidden; margin:0 0 16px; }
.tfin-bar i{ position:absolute; top:0; bottom:0; left:-40%; width:40%; border-radius:99px; background:var(--tr-attn); animation:trSlide 1.4s ease-in-out infinite; }
@keyframes trSlide{ 0%{ left:-40%; } 100%{ left:100%; } }
.tfin-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.tfin-steps li{ display:flex; align-items:center; gap:12px; font-size:17px; color:var(--muted-2); transition:color .3s ease; }
.tfin-steps li b{ width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--serif); font-size:15px; border:2px solid var(--line-2); color:var(--muted); }
.tfin-steps li.now{ color:var(--ink); font-weight:600; }
.tfin-steps li.now b{ border-color:var(--tr-attn); color:var(--tr-attn); animation:trPulse 1.2s ease-in-out infinite; }
.tfin-steps li.done{ color:var(--ink-soft); }
.tfin-steps li.done b{ background:var(--tr-meas); border-color:var(--tr-meas); color:#fff; }
@keyframes trPulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--tr-attn) 45%, transparent); } 50%{ box-shadow:0 0 0 7px transparent; } }
.tfin-clock{ margin:12px 0 0; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
/* the wait: honest clock + real bar + "email me", the loudest thing on the running card.
   The finishing block keeps its numbered steps; its own bar and clock step aside for this one. */
.twait{ margin:0 0 20px; }
.twait-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 9px; }
.twait-top b{ font-family:var(--serif); font-size:24px; font-weight:600; color:var(--ink); line-height:1.15; }
.twait-top span{ font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; flex:none; }
.twait-bar{ position:relative; height:12px; border-radius:99px; background:var(--line); overflow:hidden; }
.twait-bar i{ position:absolute; left:0; top:0; bottom:0; width:3%; border-radius:99px; background:var(--tr-attn); transition:width 1s linear; overflow:hidden; }
.twait-bar i:after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform:translateX(-100%); animation:twShine 1.8s ease-in-out infinite; }
@keyframes twShine{ to{ transform:translateX(100%); } }
.twait-usual{ font-size:13px; color:var(--muted); margin:8px 0 0; }
.twait-mail{ margin:14px 0 18px; padding:16px; border-radius:14px; background:color-mix(in srgb, var(--tr-meas) 7%, var(--card)); border:1px solid color-mix(in srgb, var(--tr-meas) 22%, var(--line)); }
.twait-mail:empty{ display:none; }
.twait-mail form p{ margin:0 0 9px; font-size:15px; color:var(--ink-soft); line-height:1.4; }
.twait-mail form p b{ color:var(--ink); }
.twait-row{ display:flex; gap:8px; }
.twait-row input{ flex:1; min-width:0; font:inherit; font-size:16px; padding:12px 14px; border:1.5px solid var(--line-2); border-radius:12px; background:var(--bg,#fff); color:var(--ink); }
.twait-row input:focus{ outline:none; border-color:var(--tr-attn); box-shadow:0 0 0 3px color-mix(in srgb, var(--tr-attn) 18%, transparent); }
.twait-row button{ flex:none; font:inherit; font-size:15px; font-weight:700; padding:12px 18px; border:0; border-radius:12px; background:var(--ink); color:var(--card); cursor:pointer; }
.twait-row button:disabled{ opacity:.6; cursor:default; }
.twait-err{ margin:6px 0 0 !important; font-size:13px !important; color:var(--tr-attn) !important; min-height:0; }
.twait-err:empty{ display:none; }
.twait-ok{ margin:0; font-size:15px; color:var(--ink-soft); display:flex; gap:10px; align-items:center; }
.twait-ok > b:first-child{ width:26px; height:26px; flex:none; border-radius:50%; background:var(--tr-meas); color:#fff; display:grid; place-items:center; font-size:13px; }
.trun-card .twait ~ .tfinish .tfin-bar, .trun-card .twait ~ .tfinish .tfin-clock{ display:none; }
.trun-card .twait + .trun-tally, .trun-card .twait + .tfinish{ margin-top:18px; }
.trun-tally:has(.tt-hero){ row-gap:0; }
.trun-tally .tt-hero{ flex-basis:100%; font-size:15px; }
.trun-tally .tt-hero b{ font-size:34px; color:var(--tr-attn); }
/* follows them down the page while it runs; turns green when it lands */
.twait-pill{ position:fixed; left:50%; bottom:max(16px, env(safe-area-inset-bottom)); z-index:60; transform:translate(-50%, 140%); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:10px; max-width:calc(100vw - 32px); padding:12px 18px 12px 14px; border:0; border-radius:99px; background:var(--ink); color:var(--card);
  font:inherit; font-size:15px; font-weight:600; box-shadow:0 14px 34px -12px rgba(0,0,0,.45); cursor:pointer; transition:transform .3s ease, opacity .3s ease, background .3s ease; white-space:nowrap; }
.twait-pill.on{ transform:translate(-50%, 0); opacity:1; pointer-events:auto; }
.twait-pill i{ width:10px; height:10px; border-radius:50%; background:var(--tr-attn); flex:none; animation:twDot 1.2s ease-in-out infinite; }
.twait-pill span{ overflow:hidden; text-overflow:ellipsis; }
.twait-pill b{ flex:none; opacity:.75; }
.twait-pill.ready{ background:var(--tr-meas); }
.twait-pill.ready i{ background:#fff; animation:none; }
.twait-pill.ready b{ opacity:1; }
@keyframes twDot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@media(prefers-reduced-motion:reduce){ .twait-bar i{ transition:none; } .twait-bar i:after, .twait-pill i{ animation:none; } }
@media(max-width:480px){ .twait-top b{ font-size:21px; } .twait-row{ flex-direction:column; } .twait-row button{ width:100%; } }
/* phones: the chat bubble owns the bottom-right corner, so the pill sits left of it */
@media(max-width:640px){ .twait-pill{ left:16px; max-width:calc(100vw - 112px); transform:translateY(140%); } .twait-pill.on{ transform:none; } }
@media(prefers-reduced-motion:reduce){ .tfin-bar i{ animation:none; left:0; width:100%; opacity:.5; } .tfin-steps li.now b{ animation:none; } }
.tclean{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-soft); line-height:1.5; }
@media(prefers-reduced-motion:reduce){ .tline.active:before{ animation:none; } .tline{ animation:none; } }

/* ---------- result ---------- */
.tres{ display:none; }
.tres.on{ display:block; }
.tcard{ background:var(--card); border:1px solid var(--line-2); border-radius:16px; padding:22px 22px; margin:0 0 16px; box-shadow:0 16px 40px -30px rgba(23,19,16,.3); }
.tk{ font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); margin:0 0 14px; padding-left:13px; position:relative; line-height:1.15; }
.tk:before{ content:""; position:absolute; left:0; top:3px; bottom:3px; width:4px; border-radius:3px; background:var(--tr-attn); }
.tk.meas:before{ background:var(--tr-meas); }
.tk.model:before{ background:var(--tr-model); }
.tlead{ font-size:15px; color:var(--ink-soft); line-height:1.6; margin:0 0 16px; }
.tquery{ font-size:13px; color:var(--muted); margin:0 0 14px; }
.tquery b{ color:var(--ink); font-weight:600; }

/* weather strip: four tiles */
.weather{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media(min-width:680px){ .weather{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.wt{ border:1px solid var(--line); border-radius:14px; padding:15px 14px 13px; background:var(--paper); min-width:0; }
.wt .wt-cap{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 8px; }
.wt .wt-fig{ font-family:var(--serif); font-size:clamp(26px,7vw,34px); font-weight:700; line-height:.98; letter-spacing:-.02em; color:var(--tr-attn); overflow-wrap:anywhere; }
.wt .wt-fig small{ font-size:15px; font-weight:600; letter-spacing:0; }
.wt .wt-sub{ font-size:11.5px; color:var(--muted); margin:7px 0 0; line-height:1.4; }
.wt .lab{ margin-top:9px; }
.wt.meas .wt-fig{ color:var(--tr-meas); }
.wt.model .wt-fig{ color:var(--tr-model); font-size:clamp(20px,5.4vw,25px); }
.wt .spark{ display:block; width:100%; height:26px; margin-top:8px; overflow:visible; }
.wt .rule{ font-size:11.5px; color:var(--ink-soft); line-height:1.4; margin:7px 0 0; }

/* =========================================================================
   SUMMARY STRIP: the god's-eye read, before any detail. Stat tiles carry the
   headline state, stage, confidence, reach, platform count and (when the
   engine sent one) the early-warning read. Every tile keeps its chip.
   ========================================================================= */
.tsum{ background:var(--card); border:1px solid var(--line-2); border-radius:16px; padding:22px; margin:0 0 16px; box-shadow:0 16px 40px -30px rgba(23,19,16,.3); }
.tsum-top{ display:flex; gap:14px; align-items:flex-start; margin:0 0 16px; }
.tsum-top .hl-text{ font-family:var(--serif); font-size:clamp(21px,3.2vw,29px); line-height:1.2; font-weight:600; margin:0; text-wrap:balance; }
.tsum-top .hl-rule{ font-size:12.5px; color:var(--muted); margin:8px 0 0; line-height:1.5; }
.tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
@media(min-width:620px){ .tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* Six tiles in a 780px column were 115px each and split "Spreading" mid-word. */
.tile .tl-fig.cap-word{ overflow-wrap:normal; word-break:keep-all; hyphens:none; font-size:clamp(15px,2.4vw,19px); }
/* The state badge in the summary strip (the .hl rules below only cover the old block). */
.tsum-top .st{ flex:none; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:6px 10px; border-radius:8px; margin-top:6px; }
.tsum-top .st.quiet{ background:var(--tr-meas-tint); color:var(--tr-meas); border:1px solid var(--tr-meas-line); }
.tsum-top .st.moving{ background:var(--tr-attn-tint); color:var(--tr-attn); border:1px solid var(--tr-attn-line); }
.tsum-top .st.loud{ background:var(--tr-attn); color:#fff; border:1px solid var(--tr-attn); }
.tile{ border:1px solid var(--line); border-radius:13px; padding:13px 12px 11px; background:var(--paper); min-width:0; display:flex; flex-direction:column; }
.tile .tl-cap{ font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 7px; }
.tile .tl-fig{ font-family:var(--serif); font-size:clamp(22px,4.6vw,29px); font-weight:700; line-height:1; letter-spacing:-.02em; color:var(--ink); overflow-wrap:anywhere; }
.tile .tl-fig small{ font-size:14px; font-weight:600; letter-spacing:0; }
.tile .tl-fig.cap-word{ font-size:clamp(17px,3.2vw,21px); text-transform:capitalize; line-height:1.15; }
.tile .tl-sub{ font-size:11px; color:var(--muted); margin:6px 0 0; line-height:1.4; }
.tile .lab{ margin-top:auto; padding-top:8px; align-self:flex-start; }
.tile.attn .tl-fig{ color:var(--tr-attn); }
.tile.meas .tl-fig{ color:var(--tr-meas); }
.tile.model .tl-fig{ color:var(--tr-model); }
/* early-warning tile: state colors, never a promise */
.tile.warn-quiet{ border-color:#bcd3c2; background:var(--green-tint); }
.tile.warn-quiet .tl-fig{ color:var(--green); }
.tile.warn-watch{ border-color:var(--tr-model-line); background:var(--tr-model-tint); }
.tile.warn-watch .tl-fig{ color:var(--tr-model); }
.tile.warn-breakout{ border-color:var(--tr-attn-line); background:var(--tr-attn-tint); }
.tile.warn-breakout .tl-fig{ color:var(--tr-attn); }

/* =========================================================================
   PROPAGATION GRAPH: canvas, laid out left to right by measured time, one lane
   per platform. Drag to pan, wheel to zoom, hover for the post behind a node.
   Nothing on it is inferred: an edge is "these two are consecutive in time",
   which the caption says out loud.
   ========================================================================= */
.pg-wrap{ position:relative; border:1px solid var(--line); border-radius:14px; background:
  radial-gradient(900px 420px at 34% 26%, rgba(35,74,52,.045), transparent 70%), var(--paper);
  overflow:hidden; }
.pg-canvas{ display:block; width:100%; height:420px; cursor:grab; touch-action:pan-y; }
.pg-canvas:active{ cursor:grabbing; }
@media(max-width:700px){ .pg-canvas{ height:340px; } }
/* Tiny screens: a pan-and-zoom canvas is worse than nothing at this width, so the
   graph card steps aside and the "Order it appeared in" hop line in The facts,
   which is always rendered, carries the same sequence. */
@media(max-width:419px){
  .pg-wrap, .scrub, .pg-legend{ display:none; }
  .tcard.pg-card .tlead:after{ content:" On a wider screen this draws as a graph you can pan and play through. The same order is in The facts below."; color:var(--muted); }
}
.pg-hint{ position:absolute; left:13px; bottom:11px; font-size:10.5px; color:var(--muted-2); pointer-events:none; letter-spacing:.03em; }
.pg-reset{ position:absolute; right:11px; top:11px; font-size:11.5px; font-weight:600; color:var(--ink-soft); background:var(--card); border:1px solid var(--line-2); border-radius:8px; padding:5px 11px; cursor:pointer; font-family:inherit; }
.pg-reset:hover{ border-color:var(--ink); }
.pg-tip{ position:absolute; pointer-events:none; z-index:4; background:var(--card); border:1px solid var(--line-2); border-radius:10px;
  padding:9px 12px; font-size:12.5px; color:var(--ink); max-width:250px; line-height:1.45;
  opacity:0; transform:translateY(4px); transition:opacity .12s, transform .12s; box-shadow:0 14px 34px -18px rgba(23,19,16,.5); }
.pg-tip.on{ opacity:1; transform:translateY(0); }
.pg-tip .pt-who{ font-weight:600; color:var(--ink); display:block; }
.pg-tip .pt-t{ color:var(--muted); font-size:11.5px; margin-top:3px; display:block; }
.pg-tip .pt-kind{ font-size:10px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; margin-top:5px; display:inline-block; }
.pg-legend{ display:flex; flex-wrap:wrap; gap:8px 16px; margin:12px 0 0; font-size:12px; color:var(--ink-soft); }
.pg-legend span{ display:inline-flex; align-items:center; gap:6px; }
.pg-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; }

/* the scrubber under the graph */
.scrub{ margin:12px 0 0; }
.scrub-row{ display:flex; align-items:center; gap:13px; }
.scrub-play{ width:36px; height:36px; flex:none; border-radius:50%; border:1px solid var(--line-2); background:var(--card); color:var(--ink);
  display:grid; place-items:center; font-size:12px; cursor:pointer; font-family:inherit; line-height:1; }
.scrub-play:hover{ border-color:var(--green); color:var(--green); }
.scrub-track{ position:relative; flex:1; height:34px; min-width:0; cursor:pointer; touch-action:none; }
.scrub-line{ position:absolute; top:50%; left:0; right:0; height:4px; border-radius:4px; transform:translateY(-50%); background:var(--line); }
.scrub-fill{ position:absolute; top:50%; left:0; width:100%; height:4px; border-radius:4px; transform:translateY(-50%);
  background:linear-gradient(90deg,var(--tr-meas),var(--tr-model),var(--tr-attn)); }
.scrub-tick{ position:absolute; top:50%; width:10px; height:10px; border-radius:50%; transform:translate(-50%,-50%); background:var(--paper); border:2px solid var(--tr-meas); pointer-events:none; }
.scrub-tick.jump{ border-color:var(--tr-attn); }
.scrub-tick.amp{ border-color:var(--tr-model); }
.scrub-tick.news{ border-color:#b03a2e; width:12px; height:12px; }
.scrub-head{ position:absolute; top:50%; width:3px; height:26px; transform:translate(-50%,-50%); background:var(--ink); border-radius:3px; pointer-events:none; }
.scrub-now{ font-size:12.5px; color:var(--ink-soft); flex:none; min-width:74px; text-align:right; font-variant-numeric:tabular-nums; }
.scrub-now b{ color:var(--tr-attn); font-weight:600; }
.scrub-ends{ display:flex; justify-content:space-between; margin:7px 0 0; font-size:11px; color:var(--muted-2); gap:10px; }
.scrub-ends span:nth-child(2){ text-align:center; }
@media(prefers-reduced-motion:reduce){ .pg-tip{ transition:none; } }

/* forecast (modeled) card */
.fc-row{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
.fc-state{ font-family:var(--serif); font-size:28px; font-weight:700; line-height:1; text-transform:capitalize; letter-spacing:-.02em; }
.fc-state.quiet{ color:var(--green); } .fc-state.watch{ color:var(--tr-model); } .fc-state.breakout{ color:var(--tr-attn); }
.fc-z{ font-size:13.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.fc-z b{ color:var(--ink); font-weight:600; }
.fc-note{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin:12px 0 0; }
.fc-base{ font-size:12.5px; color:var(--muted); line-height:1.55; margin:9px 0 0; padding-top:9px; border-top:1px solid var(--line); }
.fc-base b{ color:var(--ink-soft); font-weight:600; }

/* gone since last sweep (measured) */
.gone-head{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
.gone-fig{ font-family:var(--serif); font-size:30px; font-weight:700; line-height:1; color:var(--ink); letter-spacing:-.02em; }
.gone-rate{ font-size:13.5px; color:var(--muted); }
.gone-list{ list-style:none; margin:13px 0 0; padding:0; }
.gone-list li{ display:flex; gap:10px; flex-wrap:wrap; align-items:baseline; padding:9px 0; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink-soft); }
.gone-list li .gp{ font-weight:600; color:var(--ink); }
.gone-list li .gt{ font-size:12px; color:var(--muted); margin-left:auto; }
.gone-list li a{ color:var(--tr-meas); text-decoration:underline; font-size:12px; word-break:break-all; }

/* related clusters in our record */
.rel-list{ display:flex; flex-direction:column; gap:9px; }
.rel-c{ border:1px solid var(--line); border-radius:12px; padding:11px 13px; background:var(--paper); }
.rel-kw{ display:flex; flex-wrap:wrap; gap:5px; margin:0 0 6px; }
.rel-kw span{ font-size:12.5px; font-weight:600; color:var(--ink); background:var(--paper-2); border:1px solid var(--line); border-radius:100px; padding:2px 9px; }
.rel-m{ font-size:12px; color:var(--muted); }

/* timeline: scrolls inside itself, never the page */
.tl-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:14px; background:var(--paper); padding:6px 0 0; }
.tl-scroll svg{ display:block; height:168px; }
.tl-hint{ font-size:11.5px; color:var(--muted-2); margin:8px 0 0; }
.tl-legend{ display:flex; flex-wrap:wrap; gap:8px 16px; margin:12px 0 0; font-size:12px; color:var(--ink-soft); }
.tl-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:middle; }
.tl-legend i.teal{ background:var(--tr-meas); } .tl-legend i.orange{ background:var(--tr-attn); } .tl-legend i.gold{ background:var(--tr-model); }
.tl-pop{ margin:12px 0 0; border:1px solid var(--line-2); border-radius:12px; padding:13px 15px; background:var(--paper-2); font-size:13.5px; line-height:1.55; color:var(--ink-soft); }
.tl-pop .who{ font-weight:600; color:var(--ink); display:block; margin-bottom:3px; font-size:13px; }
.tl-pop .txt{ display:block; margin:5px 0; color:var(--ink); }
.tl-pop a{ color:var(--tr-meas); text-decoration:underline; font-size:12.5px; word-break:break-all; }
.tl-pop .empty{ color:var(--muted); }
.tl-dot{ cursor:pointer; }
.tl-dot:focus{ outline:2px solid var(--tr-attn); outline-offset:2px; }

/* facts list */
.facts{ display:flex; flex-direction:column; }
.fact{ display:flex; gap:13px; padding:14px 0; border-top:1px solid var(--line); align-items:flex-start; }
.fact:first-child{ border-top:0; padding-top:0; }
.fact .fic{ width:10px; height:10px; border-radius:50%; flex:none; margin-top:7px; background:var(--muted-2); }
.fact .fic.teal{ background:var(--tr-meas); } .fact .fic.orange{ background:var(--tr-attn); } .fact .fic.gold{ background:var(--tr-model); }
.fact .fic.purple{ background:#7b5ea7; }
.coord-sig{ padding:9px 0; border-bottom:1px solid var(--line); }
.coord-sig:last-of-type{ border-bottom:0; }
.coord-role{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:#7b5ea7; background:rgba(123,94,167,.12); border-radius:100px; padding:2px 8px; margin-left:4px; vertical-align:middle; }
.coord-caveat{ font-style:italic; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
.fact .fb{ min-width:0; flex:1; }
.fact .fh{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 4px; }
.fact .fv{ font-size:15.5px; color:var(--ink); line-height:1.45; font-weight:600; }
.fact .fv.norm{ font-weight:400; }
.fact .fm{ font-size:13px; color:var(--muted); margin-top:4px; line-height:1.5; }
.fact .fq{ display:block; margin-top:7px; padding:10px 12px; border-left:3px solid var(--tr-meas); background:var(--paper-2); border-radius:0 8px 8px 0; font-size:13.5px; line-height:1.55; color:var(--ink-soft); font-style:italic; }
.fact a.flink{ color:var(--tr-meas); text-decoration:underline; font-size:12.5px; word-break:break-all; }
.badge-arch{ display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--tr-meas); background:var(--tr-meas-tint); border:1px solid var(--tr-meas-line); border-radius:100px; padding:2px 8px; margin-left:6px; vertical-align:middle; }
.pathline{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:2px; }
.pathline .hop{ font-size:13px; font-weight:600; color:var(--ink); background:var(--tr-attn-tint); border:1px solid var(--tr-attn-line); border-radius:100px; padding:3px 11px; }
.pathline .hop:first-child{ background:var(--tr-meas-tint); border-color:var(--tr-meas-line); }
.pathline .arr{ color:var(--muted-2); font-size:13px; }

/* confidence */
/* USER-CENTRIC: the FINDING leads, in plain language, sized like the answer it is.
   The numeric score is demoted to an audit-trail line below, not a report card. */
.finding{ margin:2px 0 0; }
.finding-line{ font-family:var(--serif); font-size:24px; line-height:1.25; font-weight:600; letter-spacing:-.01em; color:var(--ink); margin:0; text-wrap:balance; }
.finding-sub{ font-size:13.5px; line-height:1.55; color:var(--ink-soft); margin:8px 0 0; }
.finding.single .finding-line{ color:var(--ink); }
.finding.strong .finding-line{ color:var(--tr-meas, #1f5a3a); }
/* The score, its bar, and the math live inside a collapsed audit disclosure.
   Customer sees only the finding; an analyst clicks to see and defend the number. */
.conf-audit{ margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line); }
.conf-audit-sum{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:7px; user-select:none; }
.conf-audit-sum::-webkit-details-marker{ display:none; }
.conf-audit-sum:before{ content:"\25B8"; font-size:12px; color:var(--muted); transition:transform .15s; }
.conf-audit[open] > .conf-audit-sum:before{ transform:rotate(90deg); }
.conf-audit-sum:hover{ color:var(--ink-soft); }
.conf-audit-sum:focus-visible{ outline:2px solid var(--tr-model); outline-offset:3px; border-radius:2px; }
.conf-audit-body{ margin-top:14px; }
.conf-audit-body .conf-detail{ margin-top:0; padding-top:0; border-top:0; }
.conf-detail{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line); }
.conf-detail-lab{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.conf-fig-sm{ font-family:var(--serif); font-size:22px; font-weight:700; line-height:1; letter-spacing:-.02em; color:var(--tr-model); }
.conf-top{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.conf-fig{ font-family:var(--serif); font-size:44px; font-weight:700; line-height:1; letter-spacing:-.02em; color:var(--tr-model); }
.conf-of{ font-size:13px; color:var(--muted); }
.conf-ver{ margin-left:auto; font:500 11px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--muted); letter-spacing:.02em; }
.conf-bar{ height:10px; border-radius:100px; background:var(--paper-2); border:1px solid var(--line); overflow:hidden; margin:12px 0 0; }
.conf-bar i{ display:block; height:100%; background:var(--tr-model); border-radius:100px; }
.gaps{ margin:16px 0 0; padding:0; list-style:none; }
.gaps li{ position:relative; padding-left:18px; font-size:13.5px; line-height:1.55; color:var(--ink-soft); margin:0 0 8px; }
.gaps li:before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--tr-model); }
.gaps-h{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:16px 0 8px; }
.covline{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-soft); line-height:1.6; }
.covline b{ color:var(--ink); font-weight:600; }
.recall{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; }
.recall .rp{ font-size:12px; color:var(--ink-soft); background:var(--paper-2); border:1px solid var(--line); border-radius:100px; padding:3px 10px; }
.recall .rp b{ color:var(--ink); font-weight:600; }
.srcs{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
.srcs .sp{ font-size:12px; color:var(--ink-soft); background:var(--paper-2); border:1px solid var(--line); border-radius:100px; padding:3px 10px; }
.srcs .sp.ok{ color:var(--tr-meas); background:var(--tr-meas-tint); border-color:var(--tr-meas-line); }
.srcs .sp.no{ color:var(--muted); }

/* honesty footer + feedback + upsell */
.honest{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0 0 14px; }
/* the challenge widget reads as one self-contained unit: a quiet tinted panel
   holding the prompt, the field, and its helper line, set off from the honest note. */
.fb{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px; }
.fb-lbl{ font-size:14px; font-weight:600; color:var(--ink); line-height:1.4; margin:0 0 10px; letter-spacing:0; text-transform:none; }
.fb-row{ display:flex; gap:8px; flex-wrap:wrap; margin:0; }
.fb-row input{ flex:1 1 200px; min-width:0; padding:12px 14px; border:1px solid var(--line-2); border-radius:10px; font-size:15px; background:var(--card,#fff); color:var(--ink); font-family:inherit; transition:border-color .16s, box-shadow .16s; }
.fb-row input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(63,107,78,.14); }
.fb-row button{ flex:none; padding:12px 22px; border-radius:10px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; transition:opacity .16s; }
.fb-row button:hover{ opacity:.88; }
.fb-row button:disabled{ opacity:.55; cursor:default; }
.fb-msg{ font-size:13px; color:var(--muted); margin:10px 0 0; line-height:1.55; }
.watch{ border:1px solid var(--tr-attn-line); background:var(--tr-attn-tint); border-radius:16px; padding:20px 22px; margin:0 0 16px; }
.watch h3{ font-family:var(--serif); font-size:22px; font-weight:600; margin:0 0 7px; line-height:1.12; color:var(--ink); }
.watch p{ font-size:14.5px; color:var(--ink-soft); margin:0 0 14px; line-height:1.55; }
.watch a.wcta{ display:inline-flex; align-items:center; gap:.5em; background:var(--tr-attn); color:#fff; border:1px solid var(--tr-attn); border-radius:10px; padding:12px 22px; font-size:15px; font-weight:600; }
.watch a.wcta:hover{ filter:brightness(1.06); }
.share{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.share button{ padding:11px 18px; border-radius:10px; border:1px solid var(--line-2); background:var(--paper); color:var(--ink); font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }
.share button:hover:not(:disabled){ border-color:var(--ink); }
.share button:disabled{ opacity:.5; cursor:not-allowed; }
.share .shint{ font-size:12px; color:var(--muted); }

/* thin / error / wall */
.thin-h{ font-family:var(--serif); font-size:26px; font-weight:600; margin:0 0 10px; line-height:1.1; }
.email-cap{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.email-cap input{ flex:1 1 180px; min-width:0; padding:12px 14px; border:1px solid var(--line-2); border-radius:10px; font-size:15px; background:var(--paper); color:var(--ink); font-family:inherit; }
.email-cap button{ flex:none; padding:12px 20px; border-radius:10px; border:1px solid var(--tr-attn); background:var(--tr-attn); color:#fff; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }
.wall-buy{ display:inline-block; margin-top:16px; padding:12px 20px; border-radius:10px; background:var(--tr-attn); color:#fff; font-size:15px; font-weight:600; text-decoration:none; }
.demo-note{ font-size:12px; color:var(--tr-model); background:var(--tr-model-tint); border:1px solid var(--tr-model-line); border-radius:100px; padding:4px 12px; display:inline-block; margin:0 0 14px; font-weight:600; letter-spacing:.03em; }

/* ---------- methodology + pricing pages ---------- */
.mbody h2{ font-size:clamp(21px,3.4vw,27px); margin:0 0 12px; line-height:1.15; }
.mbody p{ font-size:15.5px; color:var(--ink-soft); line-height:1.65; margin:0 0 12px; }
.mbody p:last-child{ margin-bottom:0; }
.mbody ul{ margin:0 0 12px; padding-left:20px; font-size:15px; color:var(--ink-soft); line-height:1.6; }
.mbody ul li{ margin:0 0 7px; }
.mbody ul li b{ color:var(--ink); font-weight:600; }
.mbody a{ color:var(--tr-meas); text-decoration:underline; }

.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:12px; }
table.ttab{ width:100%; border-collapse:collapse; font-size:14px; min-width:520px; }
/* The scroller gives the table room; cells must not wrap themselves into a
   one-word-per-line column just because the viewport is 375px. */
table.ttab.plans-tab{ min-width:640px; }
table.ttab th, table.ttab td{ text-align:left; padding:11px 14px; border-top:1px solid var(--line); vertical-align:top; color:var(--ink-soft); }
table.ttab.plans-tab td{ white-space:nowrap; }
table.ttab thead th{ border-top:0; background:var(--paper-2); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; white-space:nowrap; }
table.ttab tbody th{ color:var(--ink); font-weight:600; white-space:nowrap; }
table.ttab td b{ color:var(--ink); font-weight:600; }
table.ttab tr.hl td, table.ttab tr.hl th{ background:var(--tr-attn-tint); }

/* pricing */
.plans{ display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:760px){ .plans{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } }
.plan{ border:1px solid var(--line-2); border-radius:16px; padding:20px 18px; background:var(--card); display:flex; flex-direction:column; }
.plan.feature{ border-color:var(--tr-attn); box-shadow:0 0 0 3px var(--tr-attn-tint); }
.plan .pname{ font-family:var(--serif); font-size:20px; font-weight:600; margin:0 0 4px; }
.plan .pprice{ font-family:var(--serif); font-size:32px; font-weight:700; line-height:1; letter-spacing:-.02em; margin:6px 0 2px; color:var(--ink); }
.plan .pper{ font-size:12px; color:var(--muted); margin:0 0 14px; }
.plan ul{ list-style:none; margin:0 0 18px; padding:0; font-size:13.5px; color:var(--ink-soft); line-height:1.5; flex:1; }
.plan ul li{ position:relative; padding-left:16px; margin:0 0 8px; }
.plan ul li:before{ content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--tr-meas); }
.plan ul li.no{ color:var(--muted); } .plan ul li.no:before{ background:var(--muted-2); }
.plan .pbtn{ display:block; text-align:center; padding:12px 16px; border-radius:10px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); font-size:14.5px; font-weight:600; cursor:pointer; font-family:inherit; width:100%; }
.plan.feature .pbtn{ background:var(--tr-attn); border-color:var(--tr-attn); color:#fff; }
.plan .pbtn.ghost{ background:transparent; color:var(--ink); }
.plan .pnote{ font-size:11.5px; color:var(--muted); margin:8px 0 0; text-align:center; }
.freethin{ margin:22px 0 0; padding:18px 20px; border-radius:14px; border:1px solid var(--tr-meas-line); background:var(--tr-meas-tint); font-size:15px; line-height:1.6; color:var(--ink); }
.freethin b{ font-weight:600; }

.tnav-sub{ display:flex; gap:16px; flex-wrap:wrap; font-size:13px; margin:0 0 22px; }
.tnav-sub a{ color:var(--ink-soft); border-bottom:1px solid var(--line-2); padding-bottom:2px; }
.tnav-sub a:hover{ color:var(--ink); border-color:var(--ink); }
.tnav-sub a.on{ color:var(--tr-attn); border-color:var(--tr-attn); font-weight:600; }

/* ---------- 2026-09-16: subject-centric screen (TRACE_CLAIMS_STANDARD) ----------
   Headline first, the whole census as the progress list, the venue report,
   the "is this you?" card, the delta card, and a quiet nudge instead of an upsell. */
.tform .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; margin-top:10px; }
/* the query field owns the row: a big grow weight keeps its placeholder from
   clipping, and a wide basis makes the select+button wrap under it before the
   input is ever squeezed narrow */
.tform .row input[type=text]{ flex:6 1 320px; }
.rcard{ background:var(--card); border:1px solid var(--line-2); border-radius:16px; padding:20px 22px; margin:0 0 14px; display:none; }
.rcard.on{ display:block; }
.rcard .rk{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 8px; }
.rcard .rname{ font-family:var(--serif); font-size:24px; font-weight:600; line-height:1.15; margin:0; }
.rcard .rdesc{ color:var(--ink-soft); font-size:15px; margin:4px 0 12px; }
.rchips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.rchip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; padding:4px 10px; border-radius:999px; border:1px solid var(--line-2); background:var(--paper); color:var(--ink-soft); font-family:var(--sans); }
.rchip b{ color:var(--ink); font-weight:600; }
.rchip.kind{ border-color:var(--tr-meas-line); background:var(--tr-meas-tint); color:var(--tr-meas); }
.rbtns{ display:flex; gap:10px; flex-wrap:wrap; }
.rbtns button{ padding:12px 16px; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; border:1px solid var(--line-2); background:var(--paper); color:var(--ink); }
.rbtns button.yes{ background:var(--tr-attn); border-color:var(--tr-attn); color:#fff; }
.rbtns button:disabled{ opacity:.55; cursor:default; }
.rcard .rsrc{ font-size:12.5px; color:var(--muted); margin:12px 0 0; line-height:1.5; }
/* the @handle ask (renderHandlePrompt): one headline, one obvious button, a quiet second way out */
.rcard .rname.rname-ask{ font-size:26px; line-height:1.2; margin:0 0 6px; }
.rcard .rdesc b{ color:var(--ink); font-weight:600; }
.rhandle{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 4px; }
.rhandle input{ flex:1 1 170px; min-width:0; font:inherit; font-size:17px; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line-2); background:var(--paper); color:var(--ink); }
.rhandle input:focus{ outline:none; border-color:var(--tr-attn); box-shadow:0 0 0 3px color-mix(in srgb, var(--tr-attn) 18%, transparent); }
.rhandle button.yes{ flex:1 1 170px; padding:13px 16px; border-radius:10px; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; border:1px solid var(--tr-attn); background:var(--tr-attn); color:#fff; }
.rhandle button:disabled, .rhandle input:disabled{ opacity:.55; cursor:default; }
.rcard .rerr{ display:none; margin:0; }
.rcard .rerr.on{ display:block; margin:6px 0 0; color:#c0402e; font-size:14px; line-height:1.4; }
.ralt{ display:flex; flex-direction:column; gap:3px; margin:14px 0 0; }
.ralt button{ align-self:flex-start; background:none; border:0; padding:0; font:inherit; font-size:14.5px; font-weight:600; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.ralt button:disabled{ opacity:.55; cursor:default; }
.ralt-note{ font-size:12.5px; color:var(--muted); }
.trun .tlines{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:0 22px; }
/* phone: hold the list's space from the first paint, so when the first poll turns one
   "Getting ready" row into thirty venue rows nothing in view moves (CLS 0.44 -> ~0, 2026-10-28) */
@media (max-width:700px){ .trun.on .tlines{ min-height:100vh; align-content:start; } }
.tgroup{ grid-column:1 / -1; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:14px 0 2px; padding-top:10px; border-top:1px solid var(--line); }
.tgroup:first-child{ margin-top:0; padding-top:0; border-top:0; }
.tline{ font-size:14.5px; padding:6px 0; }
.tline.muted{ color:var(--muted-2); }
.tline.muted:before{ content:"\2013"; border-color:transparent; color:var(--muted-2); font-size:14px; display:grid; place-items:center; }
.tline.hidden-venue{ color:var(--muted-2); text-decoration:line-through; text-decoration-color:var(--line-2); }
.tline.hidden-venue:before{ content:"\00D7"; border-color:transparent; color:var(--muted-2); font-size:14px; display:grid; place-items:center; }
.tline.empty:before{ content:"\2713"; border-color:var(--line-2); background:transparent; color:var(--muted); font-size:11px; display:grid; place-items:center; }
.tline .why{ margin-left:auto; font-size:12px; color:var(--muted-2); max-width:46%; text-align:right; line-height:1.3; }
.trun-tally{ display:flex; gap:18px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-soft); margin:0 0 6px; }
.trun-tally b{ font-family:var(--serif); font-size:20px; color:var(--ink); font-weight:600; margin-right:4px; display:inline-block; }
.trun-tally b.bump{ animation:trBump .26s ease; }
@keyframes trBump{ 0%{ transform:scale(1); } 45%{ transform:scale(1.22); color:var(--tr-attn); } 100%{ transform:scale(1); } }
.trun-tally [data-k="posts"]{ color:var(--tr-attn); }
.hl{ display:flex; gap:14px; align-items:flex-start; }
.hl .st{ flex:none; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:6px 10px; border-radius:8px; margin-top:6px; }
.hl .st.quiet{ background:var(--tr-meas-tint); color:var(--tr-meas); border:1px solid var(--tr-meas-line); }
.hl .st.moving{ background:var(--tr-attn-tint); color:var(--tr-attn); border:1px solid var(--tr-attn-line); }
.hl .st.loud{ background:var(--tr-attn); color:#fff; border:1px solid var(--tr-attn); }
.hl .hl-text{ font-family:var(--serif); font-size:clamp(20px,3vw,26px); line-height:1.25; font-weight:600; margin:0; text-wrap:balance; }
.hl .hl-rule{ font-size:13px; color:var(--muted); margin:8px 0 0; line-height:1.5; }
.asof{ font-size:12.5px; color:var(--muted); margin:10px 0 0; }
.vsum{ display:flex; gap:18px; flex-wrap:wrap; margin:0 0 12px; font-size:13.5px; color:var(--ink-soft); }
.vsum b{ font-family:var(--serif); font-size:22px; color:var(--ink); font-weight:600; margin-right:4px; }
.vgroups{ display:flex; flex-direction:column; gap:10px; }
.vgroup h4{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 6px; }
.vchips{ display:flex; flex-wrap:wrap; gap:6px; }
.vchip{ font-size:12.5px; padding:4px 9px; border-radius:999px; border:1px solid var(--line-2); background:var(--paper); color:var(--ink-soft); font-family:var(--sans); }
.vchip b{ color:var(--ink); font-weight:600; }
.vchip.reached{ border-color:var(--tr-meas-line); background:var(--tr-meas-tint); color:var(--tr-meas); }
.vchip.reached b{ color:var(--tr-meas); }
.vchip.empty{ color:var(--muted); }
.vchip.failed{ border-color:var(--tr-attn-line); color:var(--tr-attn); }
.vchip.not_opened{ color:var(--muted-2); border-style:dashed; }
.vchip.not_visible{ color:var(--muted-2); text-decoration:line-through; text-decoration-color:var(--line-2); }
details.vmore{ margin-top:12px; }
details.vmore summary{ cursor:pointer; font-size:13.5px; color:var(--ink-soft); }
details.vmore .vgroups{ margin-top:10px; }
.dl{ display:grid; grid-template-columns:1fr auto auto; gap:6px 16px; font-size:14.5px; align-items:baseline; }
.dl .k{ color:var(--muted); }
.dl .then{ color:var(--muted); font-variant-numeric:tabular-nums; }
.dl .now{ font-weight:600; font-variant-numeric:tabular-nums; }
.dl .up{ color:var(--tr-attn); }
.nudge{ font-size:13.5px; color:var(--muted); margin:14px 0 0; line-height:1.55; }
.nudge a{ color:var(--ink-soft); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; }
.hop-t{ display:block; font-size:11.5px; color:var(--muted); font-weight:400; }
.pathline .hop{ display:inline-flex; flex-direction:column; align-items:flex-start; }
@media (max-width:640px){ .trun .tlines{ grid-template-columns:1fr; } .hl{ flex-direction:column; gap:8px; } .dl{ grid-template-columns:1fr auto; } .dl .then{ display:none; } }

/* Thin trace shown in full: a quiet gold banner above the real result. */
.thin-banner{ border-left:4px solid var(--tr-model); }
.thin-banner .tk.model{ color:var(--tr-model); margin:0 0 6px; }
.thin-banner .tlead{ margin:0; }

/* Related stories: lead with the story, keep the shared words as a quiet footnote. */
.rel-t{ font-family:var(--serif); font-size:15.5px; font-weight:600; color:var(--ink); margin:0 0 3px; line-height:1.3; }
.rel-when{ font-family:var(--sans); font-size:11.5px; font-weight:500; color:var(--muted); margin-left:6px; }
.rel-kwl{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-right:4px; background:transparent !important; border:0 !important; padding:0 !important; }
/* target mode: the optional doxx-watch field under the box */
.tform .twatch{ margin:12px 0 0; }
.tform .twatch label{ display:block; margin:0 0 6px; font:600 13px/1.3 var(--sans,inherit); color:var(--ink-soft); text-transform:none; letter-spacing:0; }
.tform .twatch label span{ font-weight:400; color:var(--muted,#8a8278); }
.tform .twatch input{ width:100%; box-sizing:border-box; }
.tform .twatch .fine{ margin:6px 0 0; }
.tform .twatch .twatch-2{ margin-top:14px; }

/* logged-out keep-your-trace lines: quiet, one line each */
.tlast{ margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-soft); }
.tlast a{ color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.tkeep{ margin:18px 0 0; padding:12px 14px; border:1px solid var(--line-2); border-radius:10px; background:var(--card); font-size:14px; line-height:1.5; color:var(--ink-soft); }
.tkeep a{ color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* FIRST SCREEN: a target board drawn while the trace still runs (trace.js renderPartial).
   One quiet line above it: a soft dot on the first line, what is still being looked at, the
   email way out (the waiting card's own box, behind one link). */
.tpartial{ margin:0 0 10px; padding:10px 14px; border:1px solid var(--line-2); border-radius:12px; background:var(--card); font-size:14px; line-height:1.45; color:var(--ink-soft); }
.tpartial > i{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--tr-attn); margin:0 8px 2px 0; vertical-align:middle; animation:tpPulse 1.6s ease-in-out infinite; }
.tpartial b{ color:var(--ink); font-weight:600; }
.tpartial .tpartial-mail{ display:inline-block; margin-left:10px; }
.tpartial .tpartial-mail:empty{ display:none; }
.tpartial button.tlink{ font:inherit; font-size:14px; background:none; border:0; padding:0; color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.tpartial .twait-mail{ margin:8px 0 0; }
.tpartial .twait-mail:empty{ display:none; }
.tpartial.slow > i{ animation:none; opacity:.5; }
@keyframes tpPulse{ 0%,100%{ opacity:.35; transform:scale(.85); } 50%{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .tpartial > i{ animation:none; } }
@media (max-width:520px){ .tpartial{ font-size:13px; padding:9px 12px; } .tpartial .tpartial-mail{ display:block; margin:4px 0 0 16px; } .tpartial .tpartial-mail:empty{ display:none; } }

/* ---------- THE BOX: one textarea that grows, a screenshot button, drop / paste an image ---------- */
.tform textarea.tq{ flex:6 1 320px; width:100%; box-sizing:border-box; padding:13px 15px; border:1px solid var(--line-2); border-radius:10px;
  font-size:16px; line-height:1.4; background:var(--paper); color:var(--ink); font-family:inherit; resize:none; overflow-y:hidden;
  min-height:50px; max-height:40vh; display:block; }
.tform textarea.tq::placeholder{ color:var(--muted-2); }
.tform textarea.tq.tall{ overflow-y:auto; }
.tform.tdrop{ outline:2px dashed var(--tr-attn); outline-offset:4px; }
.tshot{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:10px 0 0; }
.tshot-btn{ display:inline-flex; align-items:center; gap:6px; font:600 13.5px/1 var(--sans,inherit); color:var(--ink-soft); background:none; border:1px dashed var(--line-2);
  border-radius:100px; padding:8px 13px; cursor:pointer; text-transform:none; letter-spacing:0; margin:0; }
.tform label.tshot-btn{ display:inline-flex; font-size:13.5px; color:var(--ink-soft); margin:0; text-transform:none; letter-spacing:0; }
.tshot-btn:hover{ border-color:var(--ink-soft); color:var(--ink); }
.tshot-btn svg{ flex:none; }
.tshot-btn input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.tshot-prev{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.tshot-prev[hidden]{ display:none; }
.tshot-item{ position:relative; display:inline-block; }
.tshot-prev img{ display:block; height:52px; max-width:120px; object-fit:cover; border-radius:8px; border:1px solid var(--line-2); }
.tshot-pdf{ display:inline-flex; align-items:center; gap:6px; height:52px; max-width:160px; padding:0 12px; border-radius:8px; border:1px solid var(--line-2); background:var(--paper);
  font-size:12.5px; color:var(--ink-soft); }
.tshot-pdf span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tshot-pdf svg{ flex:none; }
.tshot-item button{ position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%; border:1px solid var(--line-2); background:var(--card); color:var(--ink);
  font:700 15px/1 var(--sans,inherit); cursor:pointer; padding:0; }
.tshot-note{ font-size:12.5px; color:var(--muted); }

/* ---------- SAY IT BACK: "Looking into:" above the progress and the result ---------- */
.tsay{ display:none; margin:0 0 12px; padding:14px 18px; border:1px solid var(--line-2); border-left:3px solid var(--tr-attn); border-radius:12px; background:var(--card); }
.tsay.on{ display:block; }
.tsay-k{ margin:0 0 6px; font:700 11px/1.3 var(--sans,inherit); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.tsay-reading{ margin:0; font-size:15px; color:var(--ink-soft); }
.tsay-l{ margin:0; padding:0 0 0 20px; font-size:17px; line-height:1.45; color:var(--ink); }
.tsay-l li{ margin:3px 0; }
/* 2. what we read: small, quiet, one row per file */
.tsay-read{ margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--line); }
.tsay-k2{ margin:0 0 8px; font:700 10.5px/1.3 var(--sans,inherit); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.tsay-rows{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.tsay-row{ display:flex; align-items:center; gap:10px; min-width:0; }
.tsay-th{ flex:none; width:34px; height:34px; border-radius:6px; border:1px solid var(--line-2); object-fit:cover; object-position:top; background:var(--paper); }
.tsay-th-pdf{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; color:var(--ink-soft); width:34px; }
.tsay-th-n{ display:none; }
.tsay-rt{ min-width:0; font-size:13.5px; line-height:1.35; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tsay-rt.is-none{ color:var(--muted); font-style:italic; }
/* 3. how far back: one plain fact */
.tsay-period{ margin:12px 0 0; font-size:14px; line-height:1.45; color:var(--ink); }
.tsay-plans{ white-space:nowrap; margin-left:4px; font-size:13px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
/* 4. another story: one row, one button */
.tsay-also{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin:12px 0 0; padding:10px 12px; border-radius:10px; background:var(--paper); }
.tsay-also-t{ flex:1 1 220px; margin:0; font-size:14px; line-height:1.4; color:var(--ink-soft); }
.tsay-also-t b{ color:var(--ink); font-weight:600; }
.tsay-also-b{ flex:none; font:600 13px/1 var(--sans,inherit); background:var(--card); border:1px solid var(--line-2); border-radius:100px; padding:8px 13px; color:var(--ink); cursor:pointer; }
.tsay-also-b:hover{ border-color:var(--ink-soft); }
.tsay-also-b:disabled{ opacity:.6; cursor:default; }
/* 5. quiet foot */
.tsay-foot{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; margin:12px 0 0; font-size:13px; color:var(--muted); }
.tsay-tip{ color:var(--ink-soft); }
.tsay-edit{ font:inherit; background:none; border:0; padding:0; color:var(--muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.tsay-tip .tsay-edit{ color:var(--ink); font-weight:600; }

/* ---------- THE ANSWER CARD (assets/trace-case.js): headline, 4 numbered stops, one box, quiet foot ---------- */
.tcase{ margin:0 0 16px; padding:clamp(18px,4vw,30px); background:var(--card); border:1px solid var(--line-2); border-radius:18px; box-shadow:0 20px 50px -38px rgba(23,19,16,.3); overflow-wrap:anywhere; }
.tcase-kick{ margin:0 0 8px; font:700 11px/1.3 var(--sans,inherit); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.tcase-h{ margin:0 0 20px; font:600 28px/1.22 var(--serif); color:var(--ink); letter-spacing:-.01em; }
.tcase-k{ font-style:normal; color:var(--tr-attn); }
.tcase-stops{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 26px; }
.tcase-stop{ display:flex; gap:12px; align-items:flex-start; }
.tcase-n{ flex:none; width:30px; height:30px; border-radius:50%; border:2px solid var(--ink); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; font:700 14px/1 var(--sans,inherit); }
.tcase-sb{ min-width:0; }
.tcase-lab{ margin:4px 0 3px; font:700 11px/1.3 var(--sans,inherit); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.tcase-line{ margin:0; font-size:16px; line-height:1.4; color:var(--ink); }
.tcase-line b{ font-weight:700; }
.tcase-sub{ margin:3px 0 0; font-size:13px; line-height:1.4; color:var(--muted); }
.tcase-note{ margin:5px 0 0; font-size:13px; line-height:1.4; color:var(--ink-soft); font-style:italic; }
.tcase-link{ display:inline-block; margin:5px 0 0; font-size:13.5px; font-weight:600; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.tcase-stop.is-quiet .tcase-n{ border-color:var(--line-2); color:var(--muted); }
.tcase-stop.is-quiet .tcase-line{ color:var(--muted); }
.tcase-huh{ display:flex; gap:16px; align-items:flex-start; margin:22px 0 0; padding:16px 18px; border-radius:12px; background:var(--tr-attn-tint); }
.tcase-huh-big{ flex:none; margin:0; font:700 34px/1 var(--serif); color:var(--tr-attn); }
.tcase-huh-t{ min-width:0; }
.tcase-huh-line{ margin:2px 0 0; font-size:16px; font-weight:600; line-height:1.35; color:var(--ink); }
.tcase-q{ margin:6px 0 0; padding:0; font:italic 15px/1.45 var(--serif); color:var(--ink-soft); }
.tcase-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:20px 0 0; padding-top:14px; border-top:1px solid var(--line); }
.tcase-save{ font:600 13.5px/1 var(--sans,inherit); background:none; border:1px solid var(--line-2); border-radius:100px; padding:9px 14px; color:var(--ink); cursor:pointer; }
.tcase-save:hover{ border-color:var(--ink-soft); }
.tcase-fine{ margin:0; font-size:12.5px; color:var(--muted); }
/* narrow: by the screen, and by the box it sits in (the account modal, the dev page's phone frame) */
.tcase{ container-type:inline-size; }
@container (max-width:600px){
  .tcase-h{ font-size:22px; }
  .tcase-stops{ grid-template-columns:1fr; gap:14px; }
  .tcase-huh{ flex-direction:column; gap:6px; }
  .tcase-huh-big{ font-size:28px; }
}
@media (max-width:640px){
  .tcase-h{ font-size:22px; }
  .tcase-stops{ grid-template-columns:1fr; gap:14px; }
  .tcase-huh{ flex-direction:column; gap:6px; }
  .tcase-huh-big{ font-size:28px; }
}
/* a grown box keeps the button at the top, not stretched down beside it */
.tform textarea.tq ~ .go, .tform textarea.tq ~ .twin{ align-self:flex-start; }
.tform textarea.tq ~ .go{ min-height:50px; }