/* =========================================================================
   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; }
*{ 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 */
.tform .tgoal{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 16px; }
.tform .tgoal-lab{ flex-basis:100%; margin:0 0 4px; font:600 15px/1.3 var(--serif); color:var(--ink); letter-spacing:-.005em; }
.tr-tool .tform .tgoal label, .tform .tgoal label{ position:relative; display:inline-flex; margin:0; font:600 13px/1 var(--sans,inherit); letter-spacing:0; text-transform:none; color:var(--ink-soft); cursor:pointer; }
.tform .tgoal input{ position:absolute; opacity:0; pointer-events:none; }
.tform .tgoal label span{ display:inline-block; padding:9px 14px; border:1px solid var(--line-2); border-radius:100px; background:var(--paper,#fbf9f5); transition:background .14s,border-color .14s,color .14s; }
.tform .tgoal label:hover span{ color:var(--ink); border-color:var(--ink-soft); }
.tform .tgoal input:checked + span{ color:#fff; background:var(--ink); border-color:var(--ink); }
.tform .tgoal input:focus-visible + span{ outline:2px solid var(--tr-meas); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .tform .tgoal span{ transition:none; } }
.trow{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-top:14px; }
.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); }
.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; }
.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; }
.trun .tlines{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:0 22px; }
.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="had"]{ 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; }