/* =========================================================================
   TRACE TARGET (ttg-): the board for someone being raided, piled on or doxxed.
   Light paper shell (header, goal picker, tabs, fact card, lists) around a
   dark "screen" per tab, the same screen the Spread map and the Overview use.
   Eye path per tab: headline (its colored words are the legend), one hero,
   numbered beats, one fact card, quiet detail. Works at 390px with no page
   scroll sideways: the hero scrolls inside its own strip. No em dashes.
   ========================================================================= */
.ttg{
  --ttg-ink:var(--ink,#171310); --ttg-ink-soft:var(--ink-soft,#433d36); --ttg-muted:var(--muted,#6f685e);
  --ttg-line:var(--line,#e4ddd1); --ttg-line-2:var(--line-2,#d8cfc0); --ttg-card:var(--card,#ffffff); --ttg-paper:var(--paper-2,#efeae1);
  --ttg-serif:var(--serif,"Source Serif 4",Georgia,"Times New Roman",serif);
  --ttg-sans:var(--sans,"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif);
  --ttg-mono:var(--gv-mono,"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace);
  --ttg-ag:#e0522f; --ttg-wi:#0a91ae; --ttg-ne:#6f685e; --ttg-th:#8e3fb3; --ttg-info:#e0522f;
  /* the screen */
  --scr-bg:#12100e; --scr-panel:#1a1714; --scr-line:#2a2521; --scr-line-2:#3a332c; --scr-ink:#f2ede5; --scr-ink-2:#aaa196; --scr-ink-3:#7a7267;
  --scr-ag:#e55f33; --scr-wi:#1fa6bd; --scr-ne:#857b70; --scr-th:#b35bd6;
  --ttg-r:14px;
  position:relative; color:var(--ttg-ink); font:400 14px/1.5 var(--ttg-sans); font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#f4f0e9,#efeae1 60%,#ece6db); border:1px solid var(--ttg-line-2); border-radius:20px; padding:22px 22px 26px;
  box-shadow:0 2px 4px rgba(23,19,16,.05), 0 26px 60px -34px rgba(23,19,16,.4);
  container-type:inline-size;
}
.ttg *{ box-sizing:border-box; }
.ttg button{ font-family:inherit; }
.ttg a:focus-visible,.ttg button:focus-visible,.ttg summary:focus-visible{ outline:2px solid var(--ttg-wi); outline-offset:2px; border-radius:6px; }
.ttg-link{ font:600 12px/1 var(--ttg-sans); color:var(--ttg-wi); text-decoration:none; }
.ttg-link:hover{ text-decoration:underline; }
.ttg-empty{ margin:12px 0 0; font-size:14px; color:var(--ttg-muted); }
.ttg-note{ margin:14px 2px 0; font-size:12.5px; line-height:1.55; color:var(--ttg-muted); }

/* ---- header: the subject, the window, the state ---- */
.ttg-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.ttg-head-main{ min-width:0; }
.ttg-crumb{ display:inline-flex; align-items:center; gap:7px; margin:0 0 12px; font:800 11px/1 var(--ttg-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ttg-ink); }
.ttg-crumb:before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ttg-ag); box-shadow:0 0 0 3px rgba(224,82,47,.14); }
.ttg-crumb span{ color:var(--ttg-muted); }
.ttg-subject{ display:flex; align-items:center; gap:14px; min-width:0; }
.ttg-subject-t{ min-width:0; }
.ttg-subject h1{ margin:0; font:800 clamp(26px,3.6vw,38px)/1 var(--ttg-serif); letter-spacing:-.025em; color:var(--ttg-ink); overflow-wrap:anywhere; }
.ttg-subject p{ margin:6px 0 0; font:500 12.5px/1.4 var(--ttg-sans); color:var(--ttg-ink-soft); }
.ttg-subject .ttg-when{ font:500 11.5px/1.4 var(--ttg-mono); color:var(--ttg-muted); }
.ttg-head-side{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.ttg-pill{ display:inline-flex; align-items:center; gap:8px; font:800 11px/1 var(--ttg-mono); letter-spacing:.09em; text-transform:uppercase; padding:10px 15px; border-radius:100px; border:1px solid var(--ttg-line-2); background:var(--ttg-card); color:var(--ttg-ink-soft); white-space:nowrap; }
.ttg-pill-growing{ color:#fff; background:var(--ttg-ag); border-color:var(--ttg-ag); }
.ttg-pill-steady{ color:var(--ttg-ag); border-color:rgba(224,82,47,.4); }
.ttg-pill-dot{ width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:ttgPulse 1.6s infinite; }
@keyframes ttgPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.7); } 70%{ box-shadow:0 0 0 7px rgba(255,255,255,0); } 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); } }

/* ---- goal picker + tabs ---- */
.ttg-goals{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:18px 2px 0; }
.ttg-goals-lab{ font:700 10.5px/1 var(--ttg-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ttg-muted); margin-right:4px; }
.ttg-goal{ font:600 12.5px/1 var(--ttg-sans); color:var(--ttg-ink-soft); background:rgba(255,255,255,.6); border:1px solid var(--ttg-line-2); border-radius:100px; padding:8px 13px; cursor:pointer; }
.ttg-goal:hover{ color:var(--ttg-ink); border-color:var(--ttg-ink-soft); }
.ttg-goal[aria-pressed="true"]{ color:#fff; background:var(--ttg-ink); border-color:var(--ttg-ink); }
/* the tabs always fit: keys share the row and wrap to a second row before anything hides off the edge
   (James 11-04: the last tabs ran off the side with the scrollbar hidden, so a mouse could not reach them).
   Phones keep one swipeable row with a fade on the side that has more. */
.ttg-tabs{ position:relative; display:flex; flex-wrap:wrap; gap:5px; margin:16px 0 0; padding:5px; background:rgba(23,19,16,.055); border:1px solid rgba(23,19,16,.05); border-radius:13px; }
.ttg-tabs::-webkit-scrollbar{ display:none; }
/* every tab is a raised white key (James 10-27: the bare-text tabs did not look clickable); the open one is the black pill */
.ttg-tab{ flex:1 1 auto; justify-content:center; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--ttg-line-2); background:var(--ttg-card); font:700 13px/1 var(--ttg-sans); letter-spacing:-.005em; color:var(--ttg-ink); cursor:pointer; padding:10px 12px; border-radius:9px; white-space:nowrap; box-shadow:0 1px 0 var(--ttg-line-2), 0 2px 6px rgba(23,19,16,.05); }
/* stuck under the nav while you use a chart: one slim row on solid paper (James 11-04) */
.ttg-tabs-at{ height:1px; margin-bottom:-1px; }
.ttg-tabs-at, .ttg-tabs.ttg-sticky, .ttg-grab{ overflow-anchor:none; }
.ttg-tabs.ttg-sticky{ position:sticky; top:var(--ttg-stick,0px); z-index:40; }
/* tucked: slid up out of sight above the sticky line while you use a chart; a small grab tab stays (James 11-05: nothing on top of the chart) */
.ttg-tabs.ttg-stuck{ transition:transform .24s cubic-bezier(.22,1,.36,1), opacity .2s ease, box-shadow .2s ease; }
.ttg-tabs.ttg-tuck{ transform:translateY(calc(-100% - 14px)); opacity:0; pointer-events:none; box-shadow:none; }
.ttg-grab{ position:sticky; top:var(--ttg-stick,0px); z-index:41; height:0; display:flex; justify-content:center; }
/* always in the layout (showing it must not move the page), only the button fades */
.ttg-grab .ttg-grab-b{ visibility:hidden; opacity:0; transition:opacity .2s ease, visibility 0s .2s; }
.ttg-grab.ttg-grab-on .ttg-grab-b{ visibility:visible; opacity:1; transition:opacity .2s ease; }
.ttg-grab-b{ display:flex; align-items:center; justify-content:center; width:60px; height:15px; margin:0; padding:0; border:0; border-radius:0 0 10px 10px; background:#e9e3d9; box-shadow:0 3px 10px rgba(23,19,16,.28); cursor:pointer; }
.ttg-grab-b i{ display:block; width:22px; height:3px; border-radius:3px; background:rgba(23,19,16,.42); }
.ttg-grab-b:hover{ height:19px; } .ttg-grab-b:hover i{ background:var(--ttg-ink); }
.ttg-grab-b:focus-visible{ outline:2px solid var(--ttg-ink); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .ttg-tabs.ttg-stuck{ transition:none; } .ttg-grab .ttg-grab-b{ transition:none; } }
.ttg-tabs.ttg-stuck{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:4px; padding:4px; background:#e9e3d9; border-color:rgba(23,19,16,.08); border-radius:0 0 12px 12px; box-shadow:0 10px 24px -10px rgba(23,19,16,.28); }
.ttg-tabs.ttg-stuck .ttg-tab{ flex:1 0 auto; padding:8px 11px; font-size:12.5px; box-shadow:0 1px 0 var(--ttg-line-2); }
.ttg-tabs.ttg-stuck .ttg-tab-n{ display:none; }
.ttg-tabs.ttg-stuck.ttg-more-r{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent); }
.ttg-tabs.ttg-stuck.ttg-more-l{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 44px); mask-image:linear-gradient(90deg,transparent,#000 44px); }
.ttg-tabs.ttg-stuck.ttg-more-l.ttg-more-r{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent); }
/* the one way back to the middle: a dark key pinned to the end of the slim bar, only while the open chart is half off the screen. It lives IN the bar so it never covers the chart */
.ttg-center{ position:sticky; right:0; z-index:2; flex:none; display:inline-flex; align-items:center; gap:6px; margin-left:auto; padding:8px 12px 8px 10px; border:0; border-radius:9px; background:var(--ttg-ink); color:#fff; font:700 12.5px/1 var(--ttg-sans); cursor:pointer; white-space:nowrap; box-shadow:-10px 0 10px -2px #e9e3d9, 0 2px 6px rgba(23,19,16,.28); animation:ttg-center-in .24s cubic-bezier(.22,1,.36,1); }
.ttg-center[hidden], .ttg-tabs:not(.ttg-stuck) .ttg-center{ display:none; }
.ttg-center:hover{ background:#000; }
.ttg-center:focus-visible{ outline:2px solid var(--ttg-ink); outline-offset:2px; }
@keyframes ttg-center-in{ from{ opacity:0; transform:translateX(6px); } to{ opacity:1; transform:none; } }
/* the key is the right edge while it shows, so the right fade goes */
.ttg-tabs.ttg-stuck.ttg-centering.ttg-more-r{ -webkit-mask-image:none; mask-image:none; }
.ttg-tabs.ttg-stuck.ttg-centering.ttg-more-l{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 44px); mask-image:linear-gradient(90deg,transparent,#000 44px); }
@media (max-width:480px){ .ttg-center span{ display:none; } .ttg-center{ padding:8px 10px; } }
@media (prefers-reduced-motion:reduce){ .ttg-center{ animation:none; } }
.ttg-tabs-bal .ttg-tab{ flex:1 1 calc((100% - (var(--ttg-per) - 1) * 5px) / var(--ttg-per) - 1px); }
@media (max-width:640px){
  .ttg-tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-padding:0 24px; }
  .ttg-tab{ flex:none; }
  .ttg-tabs.ttg-more-r{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent); }
  .ttg-tabs.ttg-more-l{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 44px); mask-image:linear-gradient(90deg,transparent,#000 44px); }
  .ttg-tabs.ttg-more-l.ttg-more-r{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent); }
}
.ttg-tab:hover{ border-color:var(--ttg-ink-soft); box-shadow:0 2px 0 var(--ttg-ink-soft), 0 5px 12px rgba(23,19,16,.12); transform:translateY(-1px); }
.ttg-tab:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--ttg-line-2); }
.ttg-tab:focus-visible{ outline:2px solid var(--ttg-ink); outline-offset:2px; }
.ttg-tab.on{ color:#fff; background:var(--ttg-ink); border-color:var(--ttg-ink); box-shadow:0 2px 6px rgba(23,19,16,.28); transform:none; }
/* the count is a quiet number next to the name, not a second chip */
.ttg-tab-n{ font:600 11px/1 var(--ttg-mono); color:var(--ttg-muted); letter-spacing:-.02em; }
.ttg-tab.on .ttg-tab-n{ color:rgba(255,255,255,.62); }
/* one black pill glides to the clicked tab (JS adds .ttg-pilled once the pill lands; until then each tab paints its own) */
.ttg-tab-pill{ position:absolute; top:0; left:0; z-index:0; border-radius:9px; background:var(--ttg-ink); box-shadow:0 2px 6px rgba(23,19,16,.28); pointer-events:none; }
.ttg-tab-pill.ttg-anim{ transition:transform .38s cubic-bezier(.22,1,.36,1), width .38s cubic-bezier(.22,1,.36,1); }
.ttg-pilled .ttg-tab{ position:relative; z-index:1; transition:color .25s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.ttg-pilled .ttg-tab-n{ transition:color .25s ease, background-color .25s ease; }
.ttg-tabs.ttg-pilled .ttg-tab.on{ background:none; border-color:transparent; box-shadow:none; }
.ttg-view{ display:none; }
.ttg-view.on{ display:block; animation:ttg-view-in .32s cubic-bezier(.22,1,.36,1); }
@keyframes ttg-view-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .ttg-tab-pill.ttg-anim{ transition:none; } .ttg-view.on{ animation:none; } }

/* ---- the screen ---- */
.ttg-screen{ position:relative; margin:14px 0 0; background:var(--scr-bg); color:var(--scr-ink); border:1px solid var(--scr-line); border-radius:var(--ttg-r); overflow:hidden; color-scheme:dark; }
.ttg-sh{ padding:22px 22px 16px; }
.ttg-kick{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:0; font:500 11px/1 var(--ttg-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--scr-ink-3); }
.ttg-kick span:first-child{ color:var(--scr-ink-2); }
.ttg-h{ margin:12px 0 0; max-width:30ch; font:600 clamp(23px,3.2vw,36px)/1.1 var(--ttg-serif); letter-spacing:-.02em; color:var(--scr-ink); text-wrap:balance; }
.ttg-h b{ font-weight:600; color:var(--scr-ink); }
.ttg-l{ font-style:normal; font-weight:600; }
.ttg-l-ag{ color:var(--scr-ag); } .ttg-l-wi{ color:var(--scr-wi); } .ttg-l-ne{ color:var(--scr-ink-2); } .ttg-l-th{ color:var(--scr-th); } .ttg-l-info{ color:var(--scr-ag); }
.ttg-l-new{ color:var(--scr-ink); box-shadow:inset 0 -2px 0 0 var(--scr-ink-3); }
.ttg-sub{ margin:10px 0 0; max-width:70ch; font:400 14px/1.5 var(--ttg-sans); color:var(--scr-ink-2); text-wrap:pretty; }
.ttg-key{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding:11px 22px; border-top:1px solid var(--scr-line); border-bottom:1px solid var(--scr-line); font:500 12px/1.2 var(--ttg-sans); color:var(--scr-ink-2); }
.ttg-key > span{ display:inline-flex; align-items:center; gap:8px; }
.ttg-key .ttg-k-note{ color:var(--scr-ink-3); margin-left:auto; font-size:11.5px; }
/* the stance switch lives in the legend: its chips are the colors AND the setting */
.ttg-sw{ display:inline-flex; flex-wrap:wrap; gap:4px; padding:3px; border-radius:100px; background:rgba(255,255,255,.05); border:1px solid var(--scr-line); margin-right:4px; }
.ttg-key .ttg-sw-b{ display:inline-flex; align-items:center; gap:7px; font:600 12px/1 var(--ttg-sans); color:var(--scr-ink-2); background:transparent; border:0; border-radius:100px; padding:8px 12px; cursor:pointer; }
.ttg-key .ttg-sw-b b{ font:700 11px/1 var(--ttg-mono); color:var(--scr-ink-3); }
.ttg-key .ttg-sw-b:hover{ color:var(--scr-ink); }
.ttg-key .ttg-sw-b[aria-pressed="true"]{ background:var(--scr-ink); color:var(--scr-bg); }
.ttg-key .ttg-sw-b[aria-pressed="true"] b{ color:var(--scr-bg); opacity:.7; }
.ttg-key .ttg-sw-b:focus-visible{ outline:2px solid var(--scr-ink); outline-offset:2px; }
.ttg-key .ttg-k-q{ color:var(--scr-ink-3); font-size:11.5px; }
.ttg-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; flex:none; }
.ttg-dot-ring{ box-shadow:0 0 0 1.5px var(--scr-bg), 0 0 0 3px var(--scr-ink); }
.ttg-sq{ display:inline-block; width:10px; height:10px; border-radius:2px; flex:none; }
.ttg-tri{ display:inline-block; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:10px solid; flex:none; }
.ttg-stage{ position:relative; }
.ttg-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding:6px 0 0; }
.ttg-svg{ display:block; width:100%; min-width:860px; height:auto; }
.ttg-svg text{ font-family:var(--ttg-mono); font-size:11px; fill:var(--scr-ink-2); }
.ttg-svg .ttg-tick{ fill:var(--scr-ink-3); font-size:10.5px; }
.ttg-svg .ttg-tick-soft{ fill:var(--scr-ink-3); }
.ttg-svg .ttg-axis{ stroke:var(--scr-line-2); stroke-width:1; }
.ttg-svg .ttg-grid{ stroke:var(--scr-line); stroke-width:1; }
.ttg-svg .ttg-band{ fill:rgba(242,237,229,.045); }
.ttg-svg .ttg-lbl{ font-family:var(--ttg-sans); font-size:12px; font-weight:600; fill:var(--scr-ink); paint-order:stroke; stroke:var(--scr-bg); stroke-width:4px; stroke-linejoin:round; }
.ttg-svg .ttg-lbl-soft{ fill:var(--scr-ink-2); font-weight:500; }
.ttg-svg .ttg-colcnt{ fill:var(--scr-ink-2); font:600 10.5px/1 var(--ttg-mono); pointer-events:none; }
.ttg-svg .ttg-colcnt-top{ fill:var(--scr-ink); font-weight:700; font-size:11.5px; }
.ttg-svg .ttg-lbl-trig, .ttg-svg .ttg-lbl-ag, .ttg-svg .ttg-lbl-burst{ fill:var(--scr-ag); }
.ttg-svg .ttg-lbl-th{ fill:var(--scr-th); }
.ttg-svg .ttg-lead{ stroke:var(--scr-ink-3); stroke-width:1; }
.ttg-svg .ttg-trig{ stroke:var(--scr-ag); stroke-width:1.2; stroke-dasharray:2 4; stroke-linecap:round; }
.ttg-svg .ttg-bracket{ fill:none; stroke:var(--scr-ag); stroke-width:1.4; }
/* "came through" lines: quiet until their set is lit; faces and the root never take the pointer */
.ttg-svg .ttg-edge{ fill:none; stroke-width:1.3; opacity:.42; pointer-events:none; transition:opacity .16s ease, stroke-width .16s ease; }
.ttg-svg .ttg-edge.ttg-lit{ opacity:.95; stroke-width:2; stroke-opacity:.85; }
.ttg-svg .ttg-root-t{ fill:var(--scr-ink); font:700 9.5px var(--ttg-mono); letter-spacing:.04em; }
.ttg-svg .ttg-edge.ttg-dim{ opacity:.05; }
.ttg-svg .ttg-face{ pointer-events:none; }
.ttg-svg .ttg-root{ cursor:pointer; }
.ttg-svg .ttg-root:hover circle, .ttg-svg .ttg-root:focus circle{ stroke-width:3; }
.ttg-svg .ttg-fold{ fill:var(--scr-ink-3); font-size:13px; font-weight:600; letter-spacing:-1px; }
.ttg-key .ttg-ln{ display:inline-block; width:16px; height:0; border-top:1.5px solid var(--scr-ink-2); flex:none; }
.ttg-svg .ttg-d, .ttg-svg .ttg-mk, .ttg-svg .ttg-bar{ cursor:pointer; outline:none; }
.ttg-svg .ttg-d:focus-visible, .ttg-svg .ttg-mk:focus-visible{ stroke:var(--scr-ink); stroke-width:2; }
.ttg-svg .ttg-k{ transition:opacity .16s ease; }
.ttg-svg .ttg-dim{ opacity:.14; }
/* hollow "not read" dots answer the pointer across their whole face, not just the 1px ring */
.ttg-svg .ttg-d{ pointer-events:all; }
/* drawing on top of the dots (the trigger line, leaders, brackets, labels, grid) never steals the hover */
.ttg-svg .ttg-trig, .ttg-svg .ttg-lead, .ttg-svg .ttg-bracket, .ttg-svg .ttg-grid, .ttg-svg .ttg-axis, .ttg-svg .ttg-band, .ttg-svg .ttg-lbl, .ttg-svg .ttg-tick{ pointer-events:none; }
/* the stance switch: filtered-out dots fade and stop taking the pointer */
.ttg-svg .ttg-off{ opacity:.07; pointer-events:none; }
/* the dot the pointer is nearest: ringed so you know which one the card is about */
.ttg-svg .ttg-d.ttg-hot{ stroke:var(--scr-ink); stroke-width:2.4px; opacity:1; }
.ttg-svg .ttg-badge-c{ fill:var(--scr-ink); stroke:var(--scr-bg); stroke-width:3; }
.ttg-svg .ttg-badge-t{ fill:var(--scr-bg); font:600 11px var(--ttg-mono); }
.ttg-svg .ttg-badge{ cursor:default; transition:opacity .16s ease; }
.ttg-svg .ttg-badge-on .ttg-badge-c{ fill:var(--scr-ag); }
.ttg-svg .ttg-soft{ opacity:.38; }
.ttg-svg .ttg-hot{ stroke:var(--scr-ink); stroke-width:2; }
.ttg-svg .ttg-ghost{ pointer-events:none; }
/* THE HOVER RULE (same shape on every tab): what it is / the one number, in the
   headline's color / one plain sentence / their words / what a click does */
.ttg-tip{ position:absolute; z-index:9; pointer-events:none; background:#1d1a17; border:1px solid var(--scr-line-2); border-radius:10px; padding:11px 14px 12px; font:400 12.5px/1.45 var(--ttg-sans); color:var(--scr-ink); box-shadow:0 14px 34px -12px rgba(0,0,0,.7); max-width:290px; }
.ttg-tip .ttg-tn{ font:500 12px/1.3 var(--ttg-sans); color:var(--scr-ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ttg-tip .ttg-tn b{ font-weight:700; font-size:13.5px; color:var(--scr-ink); }
.ttg-tip .ttg-tb{ margin-top:5px; font:600 21px/1.1 var(--ttg-serif); letter-spacing:-.01em; color:var(--scr-ink); }
.ttg-tip .ttg-tl{ margin-top:4px; color:var(--scr-ink-2); }
.ttg-tip .ttg-tq{ margin-top:8px; padding-top:8px; border-top:1px solid var(--scr-line); color:var(--scr-ink-2); font-size:12px; font-style:italic; }
.ttg-tip .ttg-th{ margin-top:9px; font:600 9.5px/1 var(--ttg-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--scr-ink-3); }
/* pattern strip */
.ttg-svg .ttg-peak{ fill:rgba(229,95,51,.09); }
.ttg-svg .ttg-part{ font-family:var(--ttg-sans); font-size:13px; font-weight:500; fill:var(--scr-ink-3); }
.ttg-svg .ttg-cnt{ font-weight:700; font-size:12px; fill:var(--scr-ag); }
.ttg-svg .ttg-cnt-soft{ fill:var(--scr-ink-2); }
.ttg-svg .ttg-lbl-big{ font-size:18px; font-weight:700; }
.ttg-l-sv{ color:var(--scr-ink-2); }
.ttg-dot-s{ width:6px; height:6px; }
/* organized: blocks of dots as HTML; labels are text, blocks wrap on a phone */
.ttg-ogs{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:22px 34px; padding:20px 22px 24px; --og-p:20px; --og-d:13px; }
.ttg-og{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.ttg-og-rest{ flex:1 1 300px; }
.ttg-og-h{ display:grid; grid-template-columns:auto 1fr; column-gap:9px; align-items:center; padding-top:9px; border-top:2px solid var(--og); white-space:nowrap; transition:opacity .16s ease; }
.ttg-og-t{ grid-column:2; font:500 13px/1.15 var(--ttg-sans); color:var(--og); }
.ttg-og-t b{ font:600 22px/1 var(--ttg-serif); letter-spacing:-.01em; margin-right:2px; }
.ttg-og-s{ grid-column:2; margin-top:4px; font:500 10.5px/1.2 var(--ttg-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--scr-ink-3); }
.ttg-og-badge{ grid-row:1/3; grid-column:1; align-self:start; width:22px; height:22px; border-radius:50%; background:var(--scr-ink); color:var(--scr-bg); font:600 11px/22px var(--ttg-mono); text-align:center; cursor:default; transition:opacity .16s ease, background .16s ease; }
.ttg-og-badge.ttg-badge-on{ background:var(--og); color:#fff; }
.ttg-og-h:not(:has(.ttg-og-badge)) > *{ grid-column:1/3; }
.ttg-og-rest .ttg-og-t, .ttg-og-more .ttg-og-t, .ttg-og-new .ttg-og-t{ color:var(--scr-ink-2); }
.ttg-og-rest .ttg-og-h, .ttg-og-new .ttg-og-h{ border-top-color:var(--scr-line-2); }
.ttg-og-dots{ display:grid; grid-template-columns:repeat(var(--og-c,8),var(--og-p)); grid-auto-rows:var(--og-p); }
.ttg-og-rest .ttg-og-dots{ grid-template-columns:repeat(auto-fill,var(--og-p)); }
.ttg-og-d{ display:block; width:var(--og-d); height:var(--og-d); margin:calc((var(--og-p) - var(--og-d)) / 2); border-radius:50%; background:var(--og); cursor:pointer; outline:none; transition:opacity .16s ease, transform .12s ease; }
.ttg-og-d:hover{ transform:scale(1.3); }
.ttg-og-d:focus-visible{ box-shadow:0 0 0 2px var(--scr-bg), 0 0 0 3.5px var(--scr-ink); }
.ttg-og-ring{ box-shadow:0 0 0 1.5px var(--scr-bg), 0 0 0 3px var(--scr-ink); }
.ttg-ogs .ttg-dim{ opacity:.14; }
@media (prefers-reduced-motion:reduce){ .ttg-og-d, .ttg-og-h, .ttg-og-badge{ transition:none; } .ttg-og-d:hover{ transform:none; } }
/* a group heading opens its story: it reads as a button, the hint appears on hover */
.ttg-og-h[data-open]{ cursor:pointer; border-radius:0 0 8px 8px; padding-bottom:4px; outline:none; }
.ttg-og-h[data-open]:hover, .ttg-og-h[data-open]:focus-visible, .ttg-og-h.ttg-picked{ background:color-mix(in srgb, var(--og) 12%, transparent); }
.ttg-og-go{ grid-column:2; margin-top:5px; font:600 11px/1 var(--ttg-sans); color:var(--og); opacity:.75; }
.ttg-og-rest .ttg-og-go, .ttg-og-new .ttg-og-go, .ttg-og-more .ttg-og-go{ color:var(--scr-ink-2); }
.ttg-og-h[data-open]:hover .ttg-og-go{ opacity:1; text-decoration:underline; text-underline-offset:3px; }
.ttg-og-h:not(:has(.ttg-og-badge)) > .ttg-og-go{ grid-column:1/3; }
.ttg-svg-vol .ttg-bar-hit{ cursor:pointer; }
.ttg-svg-vol .ttg-bar.ttg-picked:not(.ttg-bar-hit){ stroke:var(--scr-ink,#f2ede5); stroke-width:1.5; }
.ttg-svg-vol .ttg-badge[data-open]{ cursor:pointer; }
.ttg-tip-st{ display:inline-block; margin:0 0 5px; padding:2px 7px; border-radius:100px; font:700 10px/1.3 var(--ttg-mono); letter-spacing:.06em; text-transform:uppercase; background:rgba(255,255,255,.08); color:var(--scr-ink-2); }
.ttg-tip .ttg-tip-st{ display:block; width:max-content; }
.ttg-tip-against{ color:#e55f33; background:rgba(229,95,51,.14); }
.ttg-tip-with{ color:#1fa6bd; background:rgba(31,166,189,.14); }
.ttg-ogs .ttg-soft{ opacity:.38; }
.ttg-og-d.ttg-hot{ transform:scale(1.3); box-shadow:0 0 0 2px var(--scr-bg), 0 0 0 3.5px var(--scr-ink); }

/* the recurring column on the Pattern screen */
.ttg-side{ border-top:1px solid var(--scr-line); padding:14px 22px 16px; }
.ttg-side-lab{ display:flex; justify-content:space-between; gap:10px; margin:0 0 10px; font:500 11px/1 var(--ttg-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--scr-ink-2); }
.ttg-side-lab span + span{ color:var(--scr-ink-3); letter-spacing:.06em; text-transform:none; }
.ttg-rec{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:4px 18px; }
.ttg-rec-row{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; width:100%; padding:6px 0; border-bottom:1px solid var(--scr-line); cursor:pointer; color:var(--scr-ink); font:500 13px/1.2 var(--ttg-sans); transition:opacity .16s ease; }
.ttg-rec-row b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ttg-rec-row span{ font:600 12px/1 var(--ttg-mono); color:var(--scr-ink-2); }
.ttg-rec-row:hover, .ttg-rec-row:focus-visible{ color:var(--scr-ag); }
.ttg-rec-row.ttg-dim{ opacity:.3; }

/* numbered beats under the hero */
.ttg-beats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--scr-line); }
.ttg-beats-1{ grid-template-columns:minmax(0,1fr); } .ttg-beats-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .ttg-beats-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .ttg-beats-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.ttg-beat{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:24px minmax(0,1fr); gap:4px 12px; padding:16px 18px 18px; border-right:1px solid var(--scr-line); cursor:default; color:var(--scr-ink); min-width:0; }
.ttg-beat:last-child{ border-right:0; }
.ttg-beat:hover, .ttg-beat:focus-visible, .ttg-beat.on{ background:var(--scr-panel); }
.ttg-beat[data-open]{ cursor:pointer; }
.ttg-bn{ grid-row:1/4; width:22px; height:22px; border-radius:50%; background:var(--scr-ink); color:var(--scr-bg); font:600 11px/22px var(--ttg-mono); text-align:center; }
.ttg-beat.on .ttg-bn{ background:var(--scr-ag); }
.ttg-bw{ font:500 11px/1.4 var(--ttg-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--scr-ink-3); }
.ttg-bt{ font:500 14px/1.35 var(--ttg-sans); color:var(--scr-ink); text-wrap:pretty; overflow-wrap:anywhere; }
.ttg-bt b{ font-weight:600; }
.ttg-bs{ display:flex; align-items:center; gap:8px; margin-top:5px; font:600 14px/1.25 var(--ttg-mono); color:var(--scr-ink); min-width:0; flex-wrap:wrap; }
.ttg-bs i{ width:8px; height:8px; border-radius:50%; flex:none; align-self:flex-start; margin-top:.36em; }
.ttg-bs-t{ flex:1 1 0; min-width:0; }
.ttg-bs-m{ font:500 11px/1 var(--ttg-mono); color:var(--scr-ink-2); }
.ttg-screen .ttg-chip-model{ background:transparent; border-color:var(--scr-line-2); color:var(--scr-ink-2); }

/* ---- below the screen, on paper: the fact card + a quiet stack ---- */
.ttg-lower{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:14px; margin:14px 0 0; align-items:start; }
.ttg-lower:has(> .ttg-stack:empty){ grid-template-columns:minmax(0,1fr); }
.ttg-stack{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.ttg-stack:empty{ display:none; }
.ttg-fact{ display:flex; flex-direction:column; gap:10px; padding:22px 22px 20px; background:var(--ttg-ink); color:#f4efe7; border-radius:var(--ttg-r); box-shadow:0 2px 4px rgba(23,19,16,.05), 0 26px 60px -34px rgba(23,19,16,.4); min-width:0; }
.ttg-fact-big{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font:700 clamp(40px,5vw,58px)/1 var(--ttg-mono); letter-spacing:-.03em; color:#fff; }
.ttg-fact-big small{ font:500 13.5px/1.3 var(--ttg-sans); letter-spacing:0; color:#d9d2c8; max-width:22ch; }
.ttg-fact p{ margin:0; font:400 15px/1.5 var(--ttg-sans); color:#d9d2c8; max-width:48ch; text-wrap:pretty; }
.ttg-fact-act{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px; }
/* the evidence pack: what is inside, in one line under the card text; fills in with real counts once the pack is known */
.ttg-pack-in{ display:block; margin-top:8px; font:500 12.5px/1.45 var(--ttg-sans); color:#d9d2c8; }
.ttg-pack-in b{ color:#fff; font-weight:700; }
.ttg-btn{ display:inline-flex; align-items:center; font:700 12.5px/1 var(--ttg-sans); color:var(--ttg-ink); background:#fff; border:1px solid #fff; border-radius:100px; padding:10px 15px; cursor:pointer; text-decoration:none; }
.ttg-btn:hover{ filter:brightness(.95); }
.ttg-btn-q{ background:transparent; color:inherit; border-color:rgba(255,255,255,.35); }
.ttg-btn-q:hover{ border-color:#fff; filter:none; }
.ttg-msg{ font:500 12px/1.3 var(--ttg-mono); color:#d9d2c8; }
.ttg-card .ttg-btn{ background:var(--ttg-ink); color:#fff; border-color:var(--ttg-ink); }
.ttg-card .ttg-btn-q{ background:transparent; color:var(--ttg-ink); border-color:var(--ttg-line-2); }
.ttg-card .ttg-msg{ color:var(--ttg-wi); }

/* panels: a white card with a quiet header */
/* things that stand out: one card per account, big number first */
.ttg-odd-p{ margin-top:14px; }
.ttg-odd{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; align-items:start; }
.ttg-odd-c{ display:flex; flex-direction:column; gap:8px; padding:14px 14px 12px; background:var(--ttg-paper); border:1px solid var(--ttg-line-2); border-radius:var(--ttg-r); min-width:0; }
.ttg-odd-c:first-child{ background:var(--ttg-ink); border-color:var(--ttg-ink); color:#f4efe7; }
.ttg-odd-big{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; font:700 28px/1.05 var(--ttg-mono); letter-spacing:-.02em; color:var(--ttg-ink); overflow-wrap:anywhere; }
.ttg-odd-c:first-child .ttg-odd-big{ color:#fff; }
.ttg-odd-big-w{ font:600 19px/1.2 var(--ttg-sans); letter-spacing:-.01em; }
.ttg-odd-rows{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ttg-odd-rows li{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 8px; min-width:0; }
.ttg-odd-rows .ttg-odd-who{ margin:0; flex:0 1 auto; max-width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ttg-odd-v{ font:600 12.5px/1.3 var(--ttg-mono); color:var(--ttg-ink); text-align:right; flex:0 0 auto; }
.ttg-odd-v-w{ font:500 12.5px/1.35 var(--ttg-sans); color:var(--ttg-ink-soft); flex:1 1 100%; text-align:left; padding-left:4px; }
.ttg-odd-big small{ font:500 12px/1.3 var(--ttg-sans); letter-spacing:0; color:var(--ttg-muted); }
.ttg-odd-c:first-child .ttg-odd-big small, .ttg-odd-c:first-child .ttg-odd-line, .ttg-odd-c:first-child .ttg-odd-more{ color:#d9d2c8; }
.ttg-odd-line{ margin:0; font:400 13.5px/1.45 var(--ttg-sans); color:var(--ttg-ink-soft); text-wrap:pretty; }
.ttg-odd-more{ margin:0; padding:0 0 0 14px; font:400 12.5px/1.45 var(--ttg-sans); color:var(--ttg-muted); }
.ttg-odd-more li + li{ margin-top:2px; }
.ttg-odd-who{ align-self:flex-start; margin-top:auto; }
.ttg-odd-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-left:2px; }
@media (max-width:560px){ .ttg-odd{ grid-template-columns:1fr; } .ttg-odd-big{ font-size:24px; } }
.ttg-panel{ background:var(--ttg-card); border:1px solid var(--ttg-line-2); border-radius:var(--ttg-r); padding:16px 18px 16px; min-width:0; }
.ttg-ph{ margin:0 0 12px; }
.ttg-ph h3{ margin:0; font:600 17px/1.25 var(--ttg-serif); letter-spacing:-.01em; color:var(--ttg-ink); }
.ttg-ph p{ margin:4px 0 0; font-size:12.5px; line-height:1.45; color:var(--ttg-muted); }
.ttg-ph-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ttg-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid var(--ttg-line-2); border-radius:999px; font:500 12px/1.3 var(--ttg-sans); color:var(--ttg-ink-soft); background:var(--ttg-paper); vertical-align:middle; }
.ttg-chip-model{ font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; cursor:help; }
.ttg-chip-acc{ padding:3px 10px 3px 3px; background:var(--ttg-card); cursor:pointer; }
.ttg-chip-acc:hover{ border-color:var(--ttg-ink-soft); color:var(--ttg-ink); }
.ttg-chip-m{ font:500 11px/1 var(--ttg-mono); color:var(--ttg-muted); }
.ttg-chip-more{ color:var(--ttg-muted); }
.ttg-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.ttg-q{ margin:0; font:italic 400 14px/1.5 var(--ttg-serif); color:var(--ttg-ink-soft); overflow-wrap:anywhere; white-space:pre-line; }
.ttg-q-inline{ display:inline; white-space:normal; }
.ttg-bars{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.ttg-bars li{ display:grid; grid-template-columns:minmax(0,9rem) minmax(0,1fr) auto; gap:10px; align-items:center; }
.ttg-bar-open{ cursor:pointer; }
.ttg-bar-open:hover .ttg-bl{ color:var(--ttg-ag); }
.ttg-bl{ font:500 13px/1.2 var(--ttg-sans); color:var(--ttg-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ttg-bt2{ display:block; min-width:0; }
.ttg-bt2 i{ display:block; height:12px; border-radius:0 3px 3px 0; }
.ttg-bv{ font:500 12px/1 var(--ttg-mono); color:var(--ttg-muted); white-space:nowrap; }
.ttg-bv b{ color:var(--ttg-ink); font-weight:700; font-size:13px; }
.ttg-stats{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.ttg-stats li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:baseline; font-size:13px; color:var(--ttg-ink-soft); }
.ttg-stats b{ font:700 18px/1.1 var(--ttg-mono); letter-spacing:-.02em; color:var(--ttg-ink); min-width:3.2ch; }
.ttg-claims{ list-style:none; margin:0; padding:0; display:grid; gap:8px; counter-reset:claims; }
.ttg-claims li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:baseline; padding-top:8px; border-top:1px solid var(--ttg-line); }
.ttg-claims li:first-child{ padding-top:0; border-top:0; }
.ttg-claim-n{ font:600 12px/1 var(--ttg-mono); color:var(--ttg-muted); white-space:nowrap; }
/* "What they're saying": one face per stance setting, the top line is the loudest */
.ttg-say[hidden], .ttg-chip-acc[hidden]{ display:none; }
.ttg-say-row{ border-radius:8px; margin:0 -6px; padding-left:6px; padding-right:6px; transition:background .15s; }
.ttg-say-row[data-set]:hover, .ttg-say-row.on{ background:color-mix(in srgb, var(--ttg-ag) 7%, transparent); }
.ttg-say-top .ttg-q{ font-style:normal; font-weight:600; font-size:17px; line-height:1.35; color:var(--ttg-ink); }
.ttg-say-n{ display:inline-flex; align-items:center; gap:8px; font:500 12px/1 var(--ttg-mono); color:var(--ttg-muted); white-space:nowrap; }
.ttg-say-n b{ font-weight:700; font-size:13px; color:var(--ttg-ag); }
.ttg-say-faces{ display:inline-flex; }
.ttg-say-face{ all:unset; cursor:pointer; margin-left:-6px; border-radius:50%; box-shadow:0 0 0 2px var(--ttg-card); }
.ttg-say-face:first-child{ margin-left:0; }
.ttg-say-face:focus-visible{ outline:2px solid var(--ttg-ink); outline-offset:1px; }
.ttg-say-also{ display:flex; gap:8px; align-items:baseline; margin:12px 0 0; padding-top:10px; border-top:1px solid var(--ttg-line); font-size:13px; color:var(--ttg-ink-soft); }
.ttg-say-also b{ color:var(--ttg-wi); }
.ttg-say-also .ttg-dot{ flex:none; transform:translateY(1px); }
.ttg-say-allies{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.ttg-say-ally{ all:unset; box-sizing:border-box; cursor:pointer; display:grid; gap:6px; width:100%; padding:10px 12px; border-radius:10px; border-left:3px solid var(--ttg-wi); background:color-mix(in srgb, var(--ttg-wi) 6%, transparent); }
.ttg-say-ally:hover, li.on > .ttg-say-ally{ background:color-mix(in srgb, var(--ttg-wi) 12%, transparent); }
.ttg-say-ally:focus-visible{ outline:2px solid var(--ttg-ink); outline-offset:2px; }
.ttg-say-who{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ttg-ink); min-width:0; }
.ttg-say-who .ttg-chip-m{ margin-left:auto; }
.ttg-say-said{ font-size:15px; color:var(--ttg-ink); }
@media (max-width:560px){ .ttg-say-faces{ display:none; } .ttg-say-top .ttg-q{ font-size:16px; } }
.ttg-roots{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
.ttg-roots li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 14px; align-items:start; padding:12px 14px; background:var(--ttg-card); border:1px solid var(--ttg-line); border-radius:12px; }
.ttg-roots .ttg-root-hot{ border-color:var(--ttg-ag); border-left-width:3px; }
.ttg-root-when{ font:500 11px/1.4 var(--ttg-mono); color:var(--ttg-muted); white-space:nowrap; }
.ttg-roots .ttg-q{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13.5px; }
.ttg-root-n{ font:600 11.5px/1.4 var(--ttg-mono); color:var(--ttg-ink-soft); white-space:nowrap; text-align:right; }
.ttg-quiet{ margin:14px 0 0; border:1px solid var(--ttg-line-2); border-radius:12px; background:rgba(255,255,255,.55); }
.ttg-quiet > summary{ display:flex; align-items:center; gap:8px; padding:12px 16px; cursor:pointer; font:600 13px/1.2 var(--ttg-sans); color:var(--ttg-ink); list-style:none; }
.ttg-quiet > summary::-webkit-details-marker{ display:none; }
.ttg-quiet > summary b{ font:700 12px/1 var(--ttg-mono); color:var(--ttg-ink-soft); padding:3px 8px; border-radius:100px; background:rgba(23,19,16,.07); }
.ttg-quiet-b{ padding:0 16px 16px; display:grid; gap:10px; }
.ttg-facts{ margin:0; padding-left:18px; font-size:13px; color:var(--ttg-ink-soft); display:grid; gap:4px; }

/* ---- the roster (Accounts) ---- */
.ttg-roster-wrap{ margin-top:14px; }
.ttg-filters{ display:flex; flex-wrap:wrap; gap:4px; }
.ttg-filter{ font:600 11.5px/1 var(--ttg-sans); color:var(--ttg-ink-soft); background:transparent; border:1px solid var(--ttg-line-2); border-radius:100px; padding:7px 11px; cursor:pointer; }
.ttg-filter[aria-pressed="true"]{ background:var(--ttg-ink); color:#fff; border-color:var(--ttg-ink); }
.ttg-roster{ display:flex; flex-direction:column; }
.ttg-row{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; padding:9px 8px; margin:0 -8px; border-radius:9px; border-bottom:1px solid var(--ttg-line); cursor:pointer; width:calc(100% + 16px); color:var(--ttg-ink); }
.ttg-row:hover, .ttg-row:focus-visible{ background:var(--ttg-paper); }
.ttg-row:focus-visible{ outline:2px solid var(--ttg-wi); outline-offset:-2px; }
.ttg-row-m{ min-width:0; display:grid; gap:2px; }
.ttg-row-h{ display:flex; align-items:center; gap:8px; min-width:0; font-size:13.5px; }
.ttg-row-h b{ font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ttg-row-h .ttg-dot{ width:9px; height:9px; }
.ttg-row-h .ttg-dot-ring{ box-shadow:0 0 0 1.5px var(--ttg-card), 0 0 0 3px var(--ttg-ink); }
.ttg-row-n{ font:500 12px/1.2 var(--ttg-sans); color:var(--ttg-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ttg-row-q{ font:italic 400 13px/1.4 var(--ttg-serif); color:var(--ttg-ink-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.ttg-row-q:before{ content:"\201C"; } .ttg-row-q:after{ content:"\201D"; }
.ttg-row-f{ font:500 13px/1.45 var(--ttg-sans); color:var(--ttg-ink-soft); overflow-wrap:anywhere; }
.ttg-row-st{ display:inline-block; margin-right:8px; padding:1px 7px; border-radius:100px; font:700 10.5px/1.5 var(--ttg-mono); color:var(--ttg-muted); background:rgba(23,19,16,.06); }
.ttg-row-st.ttg-tip-against{ color:#c4461f; background:rgba(224,82,47,.1); }
.ttg-row-st.ttg-tip-with{ color:#08809a; background:rgba(10,145,174,.1); }
.ttg-row-v{ font:700 12px var(--ttg-mono); color:var(--ttg-ink); white-space:nowrap; padding:3px 8px; border-radius:100px; background:var(--ttg-paper); }
.ttg-more{ display:block; width:100%; margin:10px 0 2px; padding:9px 12px; font:700 11.5px var(--ttg-sans); color:var(--ttg-ink); cursor:pointer; background:rgba(23,19,16,.06); border:0; border-radius:100px; letter-spacing:.02em; }
.ttg-more[hidden]{ display:none; }

/* ---- evidence rows (Receipts) ---- */
.ttg-ev{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ttg-ev-row{ padding:12px 14px; background:var(--ttg-paper); border:1px solid var(--ttg-line); border-radius:12px; display:grid; gap:8px; }
.ttg-ev-h{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font:500 12px/1.2 var(--ttg-mono); color:var(--ttg-muted); }
.ttg-why{ font:700 10.5px/1 var(--ttg-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ttg-why,var(--ttg-ne)); padding:5px 9px; border-radius:100px; border:1px solid currentColor; }
.ttg-ev-who{ all:unset; display:inline-flex; align-items:center; gap:7px; cursor:pointer; color:var(--ttg-ink); font:600 13px/1.2 var(--ttg-sans); }
.ttg-ev-who:hover b{ text-decoration:underline; }
.ttg-ev-cap{ color:var(--ttg-ink-soft); }
.ttg-ev-row .ttg-link{ margin-left:auto; }
.ttg-ev-row .ttg-q{ font-size:14px; }
/* receipts, by account */
.ttg-rc[data-worst="threat"]{ box-shadow:inset 3px 0 0 #8e3fb3; }
.ttg-rc[data-worst="info"]{ box-shadow:inset 3px 0 0 #e0522f; }
.ttg-rc-h{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.ttg-rc-meta{ font:500 12px/1.2 var(--ttg-mono); color:var(--ttg-muted); }
.ttg-rc-n{ margin-left:auto; font:700 12.5px/1.2 var(--ttg-sans); color:var(--ttg-ne); }
.ttg-rc-p{ display:grid; gap:7px; padding-top:10px; border-top:1px solid var(--ttg-line); }
.ttg-rc-more > summary{ cursor:pointer; font:600 12.5px/1.2 var(--ttg-sans); color:var(--ttg-wi); padding:4px 0; }
.ttg-rc-more[open] > summary{ margin-bottom:8px; }
.ttg-rc-rest{ margin-top:12px; }

/* ---- avatars: monogram under, photo on top, a failed photo is removed ---- */
.ttg-av{ position:relative; flex:none; display:inline-grid; place-items:center; border-radius:50%; overflow:hidden; background:var(--ttg-tint,#6f685e); color:#fff; vertical-align:middle; }
.ttg-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--ttg-paper); }
.ttg-av-mono{ font:700 1em/1 var(--ttg-sans); }
.ttg-av-l{ width:56px; height:56px; font-size:22px; }
.ttg-av-m{ width:40px; height:40px; font-size:16px; }
.ttg-av-s{ width:30px; height:30px; font-size:12.5px; }
.ttg-av-xs{ width:20px; height:20px; font-size:9.5px; }
.ttg-ver{ color:var(--ttg-wi); vertical-align:-2px; margin-left:4px; flex:none; }

/* ---- the account card drawer ---- */
.ttg.ttg-port{ position:static; background:none; border:0; border-radius:0; padding:0; box-shadow:none; container-type:normal; }
.ttg-drawer{ position:fixed; inset:0; z-index:2100; }
.ttg-drawer[hidden]{ display:none; }
.ttg-dr-back{ position:absolute; inset:0; background:rgba(23,19,16,.5); }
.ttg-dr-panel{ position:absolute; top:0; right:0; bottom:0; width:min(440px,100vw); background:var(--ttg-card); color:var(--ttg-ink); box-shadow:-24px 0 60px -30px rgba(0,0,0,.6); overflow-y:auto; padding:18px 20px 28px; font:400 14px/1.5 var(--ttg-sans); }
.ttg-dr-x{ position:sticky; top:0; float:right; z-index:1; font:600 12px/1 var(--ttg-sans); color:var(--ttg-ink); background:var(--ttg-paper); border:1px solid var(--ttg-line-2); border-radius:100px; padding:8px 12px; cursor:pointer; }
.ttg-dr-body{ clear:both; }
html.ttg-lock{ overflow:hidden; }
.ttg-card{ display:grid; gap:14px; }
.ttg-card-h{ display:flex; align-items:center; gap:14px; margin-top:8px; }
.ttg-card-who{ min-width:0; }
.ttg-card-who b{ display:block; font:700 20px/1.15 var(--ttg-serif); letter-spacing:-.015em; overflow-wrap:anywhere; }
.ttg-card-who span{ display:block; margin-top:3px; font:500 12.5px/1.3 var(--ttg-mono); color:var(--ttg-muted); overflow-wrap:anywhere; }
.ttg-card-read{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font:500 13px/1.4 var(--ttg-sans); color:var(--ttg-ink-soft); }
.ttg-card-read .ttg-dot{ width:10px; height:10px; }
.ttg-card-read .ttg-dot-ring{ box-shadow:0 0 0 1.5px var(--ttg-card), 0 0 0 3px var(--ttg-ink); }
.ttg-card-big{ display:flex; align-items:baseline; gap:10px; padding:14px 16px; background:var(--ttg-ink); color:#f4efe7; border-radius:12px; }
.ttg-card-big b{ font:700 34px/1 var(--ttg-mono); letter-spacing:-.03em; color:#fff; }
.ttg-card-big span{ font:400 13px/1.35 var(--ttg-sans); color:#d9d2c8; }
.ttg-card-dl{ margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:7px 14px; font-size:13px; }
.ttg-card-dl dt{ font:600 10.5px/1.6 var(--ttg-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ttg-muted); white-space:nowrap; }
.ttg-card-dl dd{ margin:0; color:var(--ttg-ink); overflow-wrap:anywhere; }
.ttg-card-lab{ margin:0 0 6px; font:600 10.5px/1.4 var(--ttg-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ttg-muted); display:flex; justify-content:space-between; }
.ttg-card-lab span{ text-transform:none; letter-spacing:0; font-weight:500; }
.ttg-hours{ display:block; width:100%; max-width:300px; height:auto; }
.ttg-hours-t{ font:500 7px var(--ttg-mono); fill:var(--ttg-muted); }
.ttg-card-marks{ display:flex; flex-wrap:wrap; gap:6px; }
.ttg-card .ttg-q{ padding:10px 12px; background:var(--ttg-paper); border-radius:10px; font-size:13.5px; }
.ttg-card-act{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding-top:6px; border-top:1px solid var(--ttg-line); }
/* person card, grandma path: who > headline > their words > one number > quiet facts > button > more */
.ttg-card-hl{ margin:0; font:700 22px/1.25 var(--ttg-serif); letter-spacing:-.015em; color:var(--ttg-ink); text-wrap:pretty; }
.ttg-hw{ font-style:normal; }
.ttg-hw-ag{ color:var(--ttg-ag); }
.ttg-hw-wi{ color:var(--ttg-wi); }
.ttg-hw-ne{ color:var(--ttg-ne); }
.ttg-hw-th{ color:var(--ttg-th); }
.ttg-hw-pi{ color:var(--ttg-info); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.ttg-said .ttg-card-lab{ justify-content:flex-start; align-items:center; gap:8px; }
.ttg-said-l{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ttg-said-i{ display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; align-items:start; }
.ttg-said-n{ width:24px; height:24px; border-radius:50%; background:var(--ttg-ink); color:#fff; font:700 12px/24px var(--ttg-mono); text-align:center; margin-top:2px; }
.ttg-said-b{ min-width:0; display:grid; gap:6px; justify-items:start; }
.ttg-said-m{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font:500 12px/1.4 var(--ttg-mono); color:var(--ttg-muted); }
.ttg-said-st{ display:inline-flex; align-items:center; gap:5px; font:600 12px/1.4 var(--ttg-sans); color:var(--ttg-ink-soft); }
.ttg-said-st .ttg-dot{ width:8px; height:8px; }
.ttg-said-q{ margin:0; justify-self:stretch; padding:12px 14px; background:var(--ttg-paper); border-radius:12px; font:400 16px/1.45 var(--ttg-sans); color:var(--ttg-ink); white-space:pre-wrap; overflow-wrap:anywhere; }
.ttg-said-img{ display:block; max-width:100%; border-radius:12px; overflow:hidden; border:1px solid var(--ttg-line); }
.ttg-said-img img{ display:block; max-width:100%; max-height:220px; object-fit:cover; }
.ttg-said-bad{ display:inline-flex; align-items:center; padding:3px 9px; border-radius:100px; font:700 11px/1.3 var(--ttg-sans); letter-spacing:.02em; color:#fff; }
.ttg-said-bad-th{ background:var(--ttg-th); }
.ttg-said-bad-pi{ background:var(--ttg-info); }
.ttg-said-i-th .ttg-said-q{ box-shadow:inset 3px 0 0 var(--ttg-th); }
.ttg-said-i-pi .ttg-said-q{ box-shadow:inset 3px 0 0 var(--ttg-info); }
.ttg-said-i-th .ttg-said-n{ background:var(--ttg-th); }
.ttg-said-i-pi .ttg-said-n{ background:var(--ttg-info); }
button.ttg-said-img{ position:relative; min-width:220px; min-height:140px; overflow:hidden; padding:0; background:var(--ttg-paper); cursor:pointer; font:inherit; color:inherit; }
button.ttg-said-img:disabled{ cursor:default; }
.ttg-said-veil img{ filter:blur(22px) saturate(.6); transform:scale(1.1); }
.ttg-said-veil-t{ display:none; }
.ttg-said-veil .ttg-said-veil-t{ position:absolute; inset:0; display:grid; place-content:center; gap:6px; padding:12px; text-align:center; background:rgba(23,19,16,.55); color:#fff; font:500 13px/1.35 var(--ttg-sans); }
.ttg-said-veil-t b{ font:700 13px/1 var(--ttg-sans); text-decoration:underline; text-underline-offset:3px; }
.ttg-said-root{ margin:0; font:400 12px/1.4 var(--ttg-sans); color:var(--ttg-muted); overflow-wrap:anywhere; }
.ttg-said-none{ margin:0; font:400 13px/1.4 var(--ttg-sans); color:var(--ttg-muted); }
.ttg-said-more{ margin-top:10px; }
.ttg-said-more > summary, .ttg-card-more > summary{ cursor:pointer; font:600 13px/1.2 var(--ttg-sans); color:var(--ttg-wi); list-style:none; }
.ttg-said-more > summary::-webkit-details-marker, .ttg-card-more > summary::-webkit-details-marker{ display:none; }
.ttg-said-more[open] > summary{ margin-bottom:10px; }
.ttg-said-cap{ margin:10px 0 0; font:400 12px/1.4 var(--ttg-sans); color:var(--ttg-muted); }
.ttg-card-q{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.ttg-card-q li{ display:grid; gap:2px; padding:10px 12px; border:1px solid var(--ttg-line); border-radius:10px; min-width:0; }
.ttg-card-q b{ font:700 16px/1.1 var(--ttg-mono); color:var(--ttg-ink); overflow-wrap:anywhere; }
.ttg-card-q span{ font:400 11.5px/1.3 var(--ttg-sans); color:var(--ttg-muted); }
.ttg-card-more{ border-top:1px solid var(--ttg-line); padding-top:12px; }
.ttg-card-more > summary{ color:var(--ttg-muted); }
.ttg-card-more > summary:after{ content:" +"; }
.ttg-card-more[open] > summary:after{ content:" -"; }
.ttg-card-more-b{ display:grid; gap:14px; margin-top:12px; }
.ttg-card .ttg-card-act{ border-top:0; padding-top:0; }

/* ---- the story card: a group or a stretch of time, in the same drawer ---- */
.ttg-story{ gap:16px; }
.ttg-st-kick{ margin:8px 0 -6px; display:flex; align-items:center; gap:8px; font:700 10.5px/1 var(--ttg-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--og,var(--ttg-ag)); }
.ttg-st-kick:before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--og,var(--ttg-ag)); }
.ttg-st-strip{ display:grid; gap:8px; padding:14px 14px 10px; border:1px solid var(--ttg-line); border-radius:12px; --sd:8px; }
.ttg-st-line{ position:relative; height:calc(var(--rows,1) * (var(--sd) + 2px) + 8px); margin:0 2px; border-bottom:1.5px solid var(--ttg-line-2); }
.ttg-st-line::before, .ttg-st-line::after{ content:""; position:absolute; bottom:-5px; width:1.5px; height:5px; background:var(--ttg-line-2); }
.ttg-st-line::before{ left:0; } .ttg-st-line::after{ right:0; }
.ttg-st-col{ position:absolute; bottom:3px; transform:translateX(-50%); display:flex; flex-direction:column-reverse; align-items:center; gap:2px; }
.ttg-st-per{ margin:-2px 0 0; font:500 10.5px/1.2 var(--ttg-mono); color:var(--ttg-muted); text-align:center; }
.ttg-st-d{ display:block; width:var(--sd); height:var(--sd); border-radius:50%; cursor:pointer; transition:transform .12s ease; }
.ttg-st-d:hover{ transform:scale(1.5); }
.ttg-st-ring{ box-shadow:inset 0 0 0 1.5px var(--ttg-ink); }
.ttg-st-ends{ display:flex; justify-content:space-between; font:500 11px/1.2 var(--ttg-mono); color:var(--ttg-muted); }
.ttg-st-ends span:nth-child(2){ color:var(--ttg-ink); font-weight:700; }
.ttg-story .ttg-card-big q{ quotes:none; font-style:italic; }
.ttg-st-tr{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px; }
.ttg-st-tr li{ display:grid; gap:3px; align-content:start; padding:10px 12px; border:1px solid var(--ttg-line); border-radius:10px; min-width:0; }
.ttg-st-tr b{ font:700 17px/1 var(--ttg-mono); color:var(--ttg-ink); }
.ttg-st-tr span{ font:400 12px/1.3 var(--ttg-sans); color:var(--ttg-ink-soft); overflow-wrap:anywhere; }
.ttg-st-tr .ttg-chip-model{ justify-self:start; }
.ttg-st-vs{ display:block; font:500 11px/1.3 var(--ttg-mono); font-style:normal; color:var(--ttg-muted); }
.ttg-st-same span{ font-size:14px; line-height:1.45; }
.ttg-st-same b{ font:700 15px/1.35 var(--ttg-sans); color:#fff; letter-spacing:0; display:block; margin-bottom:2px; }
.ttg-st-cmp{ width:100%; border-collapse:collapse; font:400 13px/1.3 var(--ttg-sans); }
.ttg-st-cmp th, .ttg-st-cmp td{ padding:7px 6px; border-bottom:1px solid var(--ttg-line); text-align:right; }
.ttg-st-cmp th{ text-align:left; font-weight:500; color:var(--ttg-ink-soft); }
.ttg-st-cmp thead td{ font:600 10.5px/1.2 var(--ttg-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ttg-muted); }
.ttg-st-cmp tbody td{ font:700 14px/1.2 var(--ttg-mono); color:var(--ttg-ink); }
.ttg-st-cmp tbody td + td{ font-weight:500; color:var(--ttg-muted); }
.ttg-st-cmp .ttg-st-off th, .ttg-st-cmp .ttg-st-off td:first-of-type{ color:var(--og,var(--ttg-ag)); }
.ttg-st-cmp .ttg-st-off th:before{ content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--og,var(--ttg-ag)); vertical-align:1px; }
.ttg-card-big .ttg-st-vs{ margin-top:4px; color:#a89f93; }
.ttg-st-tr-open{ cursor:pointer; }
.ttg-st-tr-open:hover{ border-color:var(--ttg-ink); }
.ttg-st-lead, .ttg-st-pull{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; text-align:left; background:var(--ttg-paper); border:0; border-radius:12px; cursor:pointer; font:400 13.5px/1.35 var(--ttg-sans); color:var(--ttg-ink); }
.ttg-st-lead:hover, .ttg-st-pull:hover{ box-shadow:inset 0 0 0 1.5px var(--ttg-ink); }
.ttg-st-lead > span{ display:grid; gap:2px; min-width:0; }
.ttg-st-lead b{ font:700 16px/1.2 var(--ttg-serif); overflow-wrap:anywhere; }
.ttg-st-lead > span > span{ font:500 12px/1.3 var(--ttg-mono); color:var(--ttg-muted); }
.ttg-st-first{ display:grid; gap:8px; }
.ttg-st-first .ttg-card-lab{ margin:0; }
.ttg-st-rhythm{ margin:0; font:600 14px/1.4 var(--ttg-sans); color:var(--ttg-ink); }
.ttg-st-dark{ margin:0; padding:12px 14px; background:var(--ttg-ink); color:#d9d2c8; border-radius:12px; font:400 13.5px/1.45 var(--ttg-sans); }
.ttg-st-dark b{ color:#fff; }
.ttg-st-groups{ display:flex; flex-wrap:wrap; gap:8px; }
.ttg-st-g{ display:grid; gap:2px; padding:8px 12px; text-align:left; background:none; border:1px solid var(--ttg-line-2); border-top:3px solid var(--og); border-radius:8px; cursor:pointer; font:500 13px/1.2 var(--ttg-sans); color:var(--ttg-ink); }
.ttg-st-g b{ font:700 17px/1 var(--ttg-serif); }
.ttg-st-g span{ font:500 10.5px/1.2 var(--ttg-mono); color:var(--ttg-muted); text-transform:uppercase; letter-spacing:.06em; }
.ttg-st-g:hover{ border-color:var(--og); }
.ttg-st-act{ border-top:0; padding-top:0; }
.ttg-st-why{ margin:-8px 0 0; font:400 12px/1.4 var(--ttg-sans); color:var(--ttg-muted); }
.ttg-st-l{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.ttg-st-row{ display:grid; grid-template-columns:3.4rem auto minmax(0,1fr); gap:10px; align-items:start; width:100%; padding:8px 6px; text-align:left; background:none; border:0; border-radius:10px; cursor:pointer; font:inherit; color:inherit; }
.ttg-st-row:hover{ background:var(--ttg-paper); }
.ttg-st-when{ padding-top:3px; font:600 12px/1.2 var(--ttg-mono); color:var(--og,var(--ttg-ink)); white-space:nowrap; }
.ttg-st-who{ display:flex; flex-wrap:wrap; align-items:center; gap:3px 7px; min-width:0; }
.ttg-st-who > b{ font:700 14px/1.25 var(--ttg-sans); overflow-wrap:anywhere; }
.ttg-st-who .ttg-dot{ width:8px; height:8px; }
.ttg-st-meta{ flex-basis:100%; font:400 11.5px/1.3 var(--ttg-mono); color:var(--ttg-muted); }
.ttg-st-q{ flex-basis:100%; margin-top:3px; font:400 13px/1.4 var(--ttg-sans); color:var(--ttg-ink-soft); overflow-wrap:anywhere; }
@media (max-width:520px){ .ttg-st-tr{ grid-template-columns:minmax(0,1fr); } .ttg-st-row{ grid-template-columns:3rem auto minmax(0,1fr); gap:8px; } }

/* ---- how we know ---- */
.ttg-sizes{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.ttg-sizes li{ display:grid; gap:4px; padding:12px 14px; border-radius:12px; background:var(--ttg-paper); }
.ttg-sizes b{ font:700 26px/1 var(--ttg-serif); letter-spacing:-.02em; color:var(--ttg-ink); }
.ttg-sizes span{ font:500 13px/1.35 var(--ttg-sans); color:var(--ttg-ink-soft); }
.ttg-limits{ margin:22px 4px 0; font:400 13px/1.5 var(--ttg-sans); color:var(--ttg-muted); text-align:center; }

@media (prefers-reduced-motion:reduce){ .ttg-svg .ttg-k, .ttg-svg .ttg-badge{ transition:none; } .ttg-pill-dot{ animation:none; } }

/* ---- other sites: one big row per site, click to open its pages ---- */
.ttg-sites{ list-style:none; margin:0; padding:12px 14px 16px; display:grid; gap:2px; }
.ttg-site{ all:unset; box-sizing:border-box; width:100%; display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr) 5.2rem 9.5rem; gap:18px; align-items:center; padding:12px 10px; border-radius:10px; cursor:pointer; color:var(--scr-ink); transition:opacity .15s, background .15s; }
.ttg-site:hover, .ttg-sites .ttg-lit{ background:rgba(255,255,255,.06); }
.ttg-site:focus-visible{ outline:2px solid var(--scr-ink); outline-offset:-2px; }
.ttg-sites .ttg-dim{ opacity:.28; }
.ttg-site-l{ display:flex; align-items:center; gap:8px; min-width:0; font:600 16px/1.2 var(--ttg-sans); }
.ttg-site-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ttg-site:hover .ttg-site-name{ text-decoration:underline; text-underline-offset:3px; }
.ttg-site-n{ flex:none; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--scr-ink); color:var(--scr-bg); font:700 11px/1 var(--ttg-mono); }
.ttg-site-tag{ flex:none; font:600 9.5px/1 var(--ttg-mono); font-style:normal; letter-spacing:.08em; text-transform:uppercase; color:var(--scr-ink-3); border:1px solid var(--scr-line-2); border-radius:4px; padding:3px 5px; }
.ttg-site-bar{ display:block; height:14px; border-radius:3px; background:rgba(255,255,255,.04); overflow:hidden; }
.ttg-site-bar i{ display:block; height:100%; border-radius:3px; background:var(--scr-wi); }
.ttg-site-c{ font:700 22px/1 var(--ttg-mono); letter-spacing:-.02em; text-align:right; white-space:nowrap; }
.ttg-site-c small{ font:500 11px/1 var(--ttg-sans); color:var(--scr-ink-3); margin-left:5px; letter-spacing:0; }
.ttg-site-w{ font:500 12.5px/1.3 var(--ttg-sans); color:var(--scr-ink-2); white-space:nowrap; }
.ttg-off-list .ttg-off-g{ margin:0 0 8px; scroll-margin-top:16px; }
.ttg-off-g > summary{ font-size:15px; }
.ttg-off-g > summary .ttg-site-tag{ color:var(--ttg-muted); border-color:var(--ttg-line-2); }
.ttg-off-gw{ margin-left:auto; font:500 12px/1 var(--ttg-sans); color:var(--ttg-muted); }
/* one page = a headline you can read from across the room, the gist, then where + when */
.ttg-pgs{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ttg-pg{ padding:14px 16px; background:#fff; border:1px solid var(--ttg-line); border-radius:12px; display:grid; gap:6px; }
.ttg-pg-a{ color:inherit; text-decoration:none; }
.ttg-pg-a:hover .ttg-pg-t{ text-decoration:underline; text-underline-offset:3px; }
.ttg-pg .ttg-pg-t{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; font:600 17px/1.35 var(--ttg-serif); font-style:normal; color:var(--ttg-ink); }
.ttg-pg .ttg-pg-t0{ color:var(--ttg-ink-soft); font-weight:500; }
.ttg-pg .ttg-pg-s{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; font:400 14px/1.5 var(--ttg-sans); font-style:normal; color:var(--ttg-ink-soft); }
.ttg-pg-m{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-top:2px; font:500 13px/1.3 var(--ttg-sans); color:var(--ttg-muted); }
.ttg-pg-w{ font-weight:600; color:var(--ttg-ink-soft); overflow-wrap:anywhere; }
.ttg-pg-m .ttg-link{ margin-left:auto; }
@media (max-width:560px){ .ttg-pg{ padding:12px 13px; } .ttg-pg .ttg-pg-t{ font-size:16px; } .ttg-off-gw{ display:none; } }

/* ---- narrow ---- */
/* the drawer sits on <body> (outside any .ttg container), so its phone rules key off the viewport */
@media (max-width:520px){
  .ttg-port .ttg-dr-panel{ width:100vw; }
  .ttg-port .ttg-card-dl{ grid-template-columns:minmax(0,1fr); gap:2px 0; }
  .ttg-port .ttg-card-dl dd{ margin-bottom:8px; }
  .ttg-port .ttg-card-q{ gap:6px; }
}
@container (max-width:900px){
  .ttg-lower{ grid-template-columns:minmax(0,1fr); }
  .ttg-beats, .ttg-beats-5, .ttg-beats-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ttg-beat:nth-child(2n){ border-right:0; }
  .ttg-beat:nth-child(n+3){ border-top:1px solid var(--scr-line); }
  .ttg-key .ttg-k-note{ margin-left:0; width:100%; }
  .ttg-sw{ width:100%; border-radius:14px; margin-right:0; }
  .ttg-key .ttg-sw-b{ padding:9px 11px; }
  .ttg-site{ grid-template-columns:minmax(0,1fr) auto; gap:8px 14px; }
  .ttg-site-bar{ grid-column:1 / -1; grid-row:2; }
  .ttg-site-w{ grid-column:1 / -1; grid-row:3; }
}
@container (max-width:520px){
  .ttg-ogs{ padding:16px; gap:20px 16px; --og-p:15px; --og-d:10px; }
  .ttg-og:not(.ttg-og-rest){ flex:1 1 84px; }
  .ttg-og-h{ white-space:normal; column-gap:7px; }
  .ttg-og-t b{ font-size:20px; }
  .ttg-og-rest{ flex-basis:100%; }
  .ttg{ padding:16px 12px 20px; border-radius:16px; }
  .ttg-sh{ padding:18px 16px 14px; }
  .ttg-key, .ttg-side{ padding-left:16px; padding-right:16px; }
  .ttg-h{ font-size:22px; }
  .ttg-subject h1{ font-size:24px; }
  .ttg-head-side{ margin-left:0; }
  .ttg-beats, .ttg-beats-2, .ttg-beats-3, .ttg-beats-5{ grid-template-columns:minmax(0,1fr); }
  .ttg-beat{ border-right:0; border-top:1px solid var(--scr-line); padding:13px 16px 15px; }
  .ttg-beat:first-child{ border-top:0; }
  .ttg-fact{ padding:18px 16px 16px; }
  .ttg-fact-big{ font-size:40px; }
  .ttg-bars li{ grid-template-columns:minmax(0,6.5rem) minmax(0,1fr) auto; }
  .ttg-roots li{ grid-template-columns:minmax(0,1fr); }
  .ttg-root-n{ text-align:left; white-space:normal; }
  .ttg-row{ grid-template-columns:auto minmax(0,1fr); }
  .ttg-row-v{ display:none; }
  .ttg-svg{ min-width:760px; }
  .ttg-dr-panel{ width:100vw; }
  .ttg-card-dl{ grid-template-columns:minmax(0,1fr); gap:2px 0; }
  .ttg-card-dl dd{ margin-bottom:8px; }
}

/* ---- Who they are: country rows (hero), bio groups, the card block ---- */
.ttg-svg .ttg-who-c{ font-weight:600; font-size:15px; }
.ttg-dot-dash{ background:transparent; box-shadow:none; border:1.5px dashed var(--scr-ink); width:11px; height:11px; box-sizing:border-box; }
.ttg-grp{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.ttg-grp li{ border-top:1px solid var(--ttg-line); }
.ttg-grp li:first-child{ border-top:0; }
.ttg-grp summary{ display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr) auto; gap:12px; align-items:center; padding:9px 0; cursor:pointer; list-style:none; }
.ttg-grp summary::-webkit-details-marker{ display:none; }
.ttg-grp-t{ font:600 15px/1.25 var(--ttg-serif, Georgia, serif); color:var(--ttg-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ttg-grp-track{ display:block; min-width:0; }
.ttg-grp-bar{ display:flex; height:10px; border-radius:100px; overflow:hidden; background:rgba(23,19,16,.06); }
.ttg-grp-bar i{ display:block; height:100%; }
.ttg-grp-n{ font:500 13px var(--ttg-sans); color:var(--ttg-ink-soft); white-space:nowrap; }
.ttg-grp details[open] summary .ttg-grp-t{ text-decoration:underline; text-underline-offset:3px; }
.ttg-grp-q{ margin:0 0 8px; font:italic 400 13px/1.45 var(--ttg-sans); color:var(--ttg-ink-soft); }
.ttg-grp details > .ttg-chips{ padding-bottom:10px; }
.ttg-card-who{ display:grid; gap:8px; margin:14px 0 0; }
.ttg-card-bio{ margin:0; padding:10px 12px; border-left:3px solid var(--ttg-line-2); font:400 14px/1.45 var(--ttg-sans); color:var(--ttg-ink); overflow-wrap:anywhere; }
.ttg-card-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.ttg-card-where{ margin:0; font:500 12.5px/1.45 var(--ttg-mono); color:var(--ttg-muted); }
@container (max-width:900px){
  .ttg-grp summary{ grid-template-columns:minmax(0,7rem) minmax(0,1fr) auto; gap:8px; }
}

/* ---- intel pack (_trace/INTEL_PACK_SPEC.md): pace chip, hero line, typical, press/known, names, AI ---- */
/* pace: the state word, and one line of what it is made of */
.ttg-pace{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.ttg-pace-l{ font:500 12.5px/1.35 var(--ttg-sans); color:var(--ttg-ink-soft); text-align:right; max-width:46ch; }
.ttg-pill-fading{ color:var(--ttg-ink); }
.ttg-pill-over{ color:var(--ttg-muted); background:transparent; }
/* few: the board's hero line, the answer to "how big is this really" */
.ttg-few{ margin:18px 0 0; max-width:34ch; font:600 clamp(22px,2.8vw,30px)/1.2 var(--ttg-serif); letter-spacing:-.015em; color:var(--ttg-ink); text-wrap:balance; cursor:default; }
.ttg-l-few{ color:var(--ttg-ink); font-weight:700; box-shadow:inset 0 -.18em 0 0 rgba(224,82,47,.35); }
/* a lead line on paper above a tab's screen (Who they are: the typical account) */
.ttg-lede{ margin:16px 2px 0; max-width:62ch; font:400 17px/1.45 var(--ttg-serif); color:var(--ttg-ink-soft); text-wrap:pretty; }
.ttg-lede b{ font-weight:700; color:var(--ttg-ink); }
.ttg-pl-ag{ color:var(--ttg-ag); }
/* quoted words inside our sentences: theirs, verbatim */
.ttg-fq{ font-style:normal; }
.ttg-mark{ background:#ffe3a3; color:inherit; padding:0 .12em; border-radius:3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
/* offer: one quiet line, never a banner */
.ttg-offer{ margin:12px 2px 0; font:400 13.5px/1.5 var(--ttg-sans); color:var(--ttg-muted); }
.ttg-offer .ttg-link{ font-size:13.5px; white-space:nowrap; }
.ttg-gapoffer{ display:flex; align-items:flex-start; gap:12px; margin:14px 0 0; padding:12px 16px; border:1px dashed var(--ttg-line-2); border-radius:12px; font:400 14px/1.5 var(--ttg-sans); color:var(--ttg-ink-soft); }
.ttg-gapoffer b{ color:var(--ttg-ink); font-weight:600; }
.ttg-gapoffer .ttg-link{ white-space:nowrap; font-weight:600; }
.ttg-gap-ic{ flex:none; font:700 15px/1.4 var(--ttg-mono); color:#e0522f; letter-spacing:-1px; }
.ttg-note-0{ margin:0; }
/* press / known: marks on a roster row and on the card */
.ttg-row-mk{ display:inline-block; margin-right:8px; padding:1px 7px; border-radius:100px; font:600 10.5px/1.5 var(--ttg-mono); color:var(--ttg-ink-soft); background:transparent; box-shadow:inset 0 0 0 1px var(--ttg-line-2); white-space:nowrap; }
.ttg-row-mk-k{ color:#08809a; box-shadow:inset 0 0 0 1px rgba(10,145,174,.4); }
.ttg-card-flags{ display:flex; flex-wrap:wrap; gap:6px; margin:-4px 0 0; }
.ttg-chip-press{ background:var(--ttg-card); color:var(--ttg-ink); max-width:100%; white-space:normal; }
.ttg-chip-press q{ font-weight:600; }
.ttg-chip-known{ color:#08809a; border-color:rgba(10,145,174,.4); background:var(--ttg-card); }
/* buttons on a white panel (the fact card's are white on ink) */
.ttg-panel .ttg-btn{ background:var(--ttg-ink); color:#fff; border-color:var(--ttg-ink); }
.ttg-panel .ttg-btn-q{ background:transparent; color:var(--ttg-ink); border-color:var(--ttg-line-2); }
.ttg-panel .ttg-msg{ color:#08809a; }
/* what they call it */
.ttg-names{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.ttg-names li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; min-width:0; }
.ttg-name{ font:600 17px/1.2 var(--ttg-serif); color:var(--ttg-ink); overflow-wrap:anywhere; }
.ttg-name-1{ font-size:26px; letter-spacing:-.01em; }
.ttg-name-n{ font:500 12px/1.3 var(--ttg-mono); color:var(--ttg-muted); }
.ttg-mute{ display:grid; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--ttg-line); }
.ttg-mute-lab{ margin:0; font:600 10.5px/1.4 var(--ttg-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ttg-muted); }
.ttg-chip-mute{ font:600 12.5px/1.3 var(--ttg-mono); color:var(--ttg-ink); background:var(--ttg-paper); }
.ttg-mute .ttg-fact-act{ margin-top:0; }
/* what AI says about you */
.ttg-ai-q{ margin:0 0 10px; font:400 12.5px/1.45 var(--ttg-sans); color:var(--ttg-muted); }
.ttg-ai-l{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ttg-ai-e{ display:grid; gap:7px; padding-top:12px; border-top:1px solid var(--ttg-line); min-width:0; }
.ttg-ai-e:first-child{ padding-top:0; border-top:0; }
.ttg-ai-h{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.ttg-ai-h b{ font:700 16px/1.2 var(--ttg-sans); color:var(--ttg-ink); }
.ttg-ai-v{ font:600 12.5px/1.3 var(--ttg-sans); color:var(--ttg-muted); }
.ttg-ai-hit .ttg-ai-v{ color:var(--ttg-ag); }
.ttg-ai-x{ margin:0; padding:10px 12px; background:var(--ttg-paper); border-radius:10px; font:400 14px/1.5 var(--ttg-sans); color:var(--ttg-ink-soft); overflow-wrap:anywhere; }
.ttg-ai-hit .ttg-ai-x{ color:var(--ttg-ink); box-shadow:inset 3px 0 0 var(--ttg-ag); }
.ttg-ai-e:not(.ttg-ai-hit) .ttg-ai-x{ font-size:13px; }
.ttg-ai-src{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font:500 11.5px/1.3 var(--ttg-mono); color:var(--ttg-muted); }
.ttg-ai-src span{ text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; }
.ttg-ai-src .ttg-link{ font:500 11.5px/1.3 var(--ttg-mono); overflow-wrap:anywhere; }
.ttg-ai-none{ margin:0; font:500 14px/1.45 var(--ttg-sans); color:var(--ttg-ink-soft); }
.ttg-ai-calm .ttg-rc-more{ margin-top:8px; }
.ttg-pushdown{ margin:14px 0 0; padding-top:10px; border-top:1px solid var(--ttg-line); font:400 12.5px/1.5 var(--ttg-sans); color:var(--ttg-muted); }
.ttg-pushdown .ttg-link{ font:500 12.5px/1.5 var(--ttg-sans); }
/* raid: the fact card and the one quiet line under it */
.ttg-factcol{ display:grid; gap:12px; min-width:0; }
.ttg-factcol .ttg-offer{ margin:0 4px; }
/* receipts: the blocks after the first, two across, never a one-sided tower */
.ttg-grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:14px; margin:14px 0 0; align-items:start; }
/* notFound rows wear a quiet edge: these words are under your name */
.ttg-nf{ box-shadow:inset 3px 0 0 var(--ttg-line-2); }
@container (max-width:520px){
  .ttg-head-side{ width:100%; }
  .ttg-pace{ align-items:flex-start; }
  .ttg-pace-l{ text-align:left; }
  .ttg-live-away{ text-align:left; }
  .ttg-few{ font-size:21px; margin-top:14px; }
  .ttg-lede{ font-size:15.5px; }
  .ttg-name-1{ font-size:22px; }
}

/* "Also worth knowing" on Other sites: site name over its fact, so a long name never crushes the sentence */
.ttg-stats-stack li{ grid-template-columns:minmax(0,1fr); gap:3px; overflow-wrap:anywhere; }
.ttg-stats-stack b{ font:600 14px/1.25 var(--ttg-sans); letter-spacing:0; min-width:0; }

/* volume hero (Organized): hatched = X held more posts than we read; the groups sit under it */
.ttg-dot-hatch{ background:repeating-linear-gradient(45deg, rgba(242,237,229,.35) 0 2px, transparent 2px 4px) !important; box-shadow:inset 0 0 0 1px rgba(242,237,229,.25); }
.ttg-og-under{ margin-top:18px; padding-top:14px; border-top:1px solid var(--scr-line, rgba(242,237,229,.08)); }
.ttg-og-under .ttg-side-lab{ margin:0 0 10px; }

/* ===== THE LOCK (free trace, 2026-10-28): every name and post plain, the paid tabs behind glass, one offer on it ===== */
.ttg-hush{ filter:blur(4.5px); -webkit-user-select:none; user-select:none; border-radius:4px; }
.ttg-tab-lk .ttg-lk-i{ margin-right:-1px; opacity:.55; }
.ttg-tab-lk.on .ttg-lk-i{ opacity:.8; }
.ttg-btn .ttg-lk-i, .pf-report-btn .ttg-lk-i{ margin-right:6px; }
.ttg-btn-lk{ gap:0; }
/* the story's last line: the actions, and the one way to get them */
.ttg-lk-tail{ margin:18px 0 0; text-align:center; }
.ttg-lk-tail-b{ all:unset; box-sizing:border-box; display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 9px; max-width:100%; padding:13px 20px; border-radius:100px; cursor:pointer;
  border:1px solid rgba(224,82,47,.28); background:rgba(224,82,47,.06); color:var(--ttg-ink); font:500 15.5px/1.25 var(--ttg-sans); }
.ttg-lk-tail-n{ display:inline-flex; align-items:center; gap:7px; font-weight:600; }
.ttg-lk-tail-sep{ color:var(--ttg-muted); }
.ttg-lk-tail-go{ color:var(--ttg-ag); font-weight:700; white-space:nowrap; }
.ttg-lk-tail-go em{ font:800 13px/1 var(--ttg-mono); font-style:normal; background:var(--ttg-ag); color:#fff; padding:5px 8px; border-radius:7px; margin-left:4px; }
.ttg-lk-tail-b:hover{ background:rgba(224,82,47,.1); border-color:rgba(224,82,47,.45); }
@media (max-width:480px){ .ttg-lk-tail-b{ flex-direction:column; gap:6px; width:100%; border-radius:18px; } .ttg-lk-tail-sep{ display:none; } }
.ttg-lk-tail-b:focus-visible{ outline:3px solid rgba(224,82,47,.45); outline-offset:3px; }

.ttg-screen-lk{ padding-bottom:0; }
.ttg-lk-glass{ position:relative; min-height:600px; }
.ttg-lk-behind{ max-height:640px; overflow:hidden; filter:blur(8px) saturate(.75); opacity:.5; pointer-events:none; -webkit-user-select:none; user-select:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 92%); mask-image:linear-gradient(to bottom,#000 30%,transparent 92%); }
.ttg-lk-behind .ttg-panel, .ttg-lk-behind .ttg-fact{ margin:14px 18px 0; }
.ttg-lk-glass .ttg-lk-gate{ position:absolute; top:34px; left:50%; transform:translateX(-50%); width:min(500px,calc(100% - 28px)); }

.ttg-lk-gate{ box-sizing:border-box; background:#fbf8f3; color:var(--ttg-ink); border-radius:20px; padding:26px 28px 22px; text-align:left;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 2px 6px rgba(0,0,0,.18), 0 40px 90px -30px rgba(0,0,0,.75); font:400 14px/1.45 var(--ttg-sans); }
.ttg-lk-kick{ display:flex; align-items:center; gap:7px; margin:0; font:700 10.5px/1 var(--ttg-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ttg-ag); }
.ttg-lk-h{ margin:12px 0 0; font:600 clamp(25px,3vw,31px)/1.12 var(--ttg-serif); letter-spacing:-.02em; color:var(--ttg-ink); text-wrap:balance; }
.ttg-lk-h em{ font-style:normal; color:var(--ttg-ag); }
.ttg-lk-steps{ list-style:none; margin:18px 0 0; padding:14px 0 0; border-top:1px solid var(--ttg-line); display:grid; gap:10px; }
.ttg-lk-steps li{ display:grid; grid-template-columns:22px auto minmax(0,1fr); align-items:baseline; gap:10px; font:500 14.5px/1.35 var(--ttg-sans); color:var(--ttg-ink-soft); }
.ttg-lk-n{ align-self:center; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--ttg-ink); color:#fff; font:800 11px/1 var(--ttg-mono); }
.ttg-lk-steps b{ font:800 17px/1 var(--ttg-mono); color:var(--ttg-ink); letter-spacing:-.02em; }
.ttg-lk-cta{ margin:20px 0 0; }
.ttg-lk-buy{ all:unset; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:12px; width:100%; padding:16px 20px; border-radius:14px; cursor:pointer;
  background:var(--ttg-ag); color:#fff; font:800 17px/1 var(--ttg-sans); letter-spacing:-.005em; box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -10px rgba(224,82,47,.8); transition:transform .12s ease, filter .12s ease; }
.ttg-lk-buy span{ font:800 13px/1 var(--ttg-mono); background:rgba(255,255,255,.2); padding:6px 9px; border-radius:8px; }
.ttg-lk-buy:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.ttg-lk-buy:focus-visible, .ttg-lk-alt:focus-visible{ outline:3px solid rgba(224,82,47,.45); outline-offset:3px; }
.ttg-lk-fine{ margin:10px 2px 0; font:400 12.5px/1.45 var(--ttg-sans); color:var(--ttg-muted); text-wrap:pretty; }
.ttg-lk-alt{ all:unset; box-sizing:border-box; display:block; width:100%; margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--ttg-line); cursor:pointer;
  font:500 13px/1.45 var(--ttg-sans); color:var(--ttg-ink-soft); }
.ttg-lk-alt b{ color:var(--ttg-ink); }
.ttg-lk-alt:hover{ color:var(--ttg-ink); text-decoration:underline; text-underline-offset:3px; }

/* inline, in the accounts list: same offer, one line tall */
.ttg-lk-inline{ margin:10px 0 12px; }
.ttg-lk-gate-c{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 22px; padding:18px 20px; border-radius:16px;
  background:linear-gradient(135deg,#fff4ee,#fbf8f3); border:1px solid rgba(224,82,47,.28); box-shadow:0 18px 40px -28px rgba(224,82,47,.55); }
.ttg-lk-gate-c .ttg-lk-kick, .ttg-lk-gate-c .ttg-lk-h{ grid-column:1; }
.ttg-lk-gate-c .ttg-lk-h{ font-size:clamp(21px,2.4vw,25px); margin-top:8px; }
.ttg-lk-gate-c .ttg-lk-cta{ grid-column:2; grid-row:1 / span 4; margin:0; width:270px; }
.ttg-lk-buy{ white-space:nowrap; }
.ttg-lk-gate-c .ttg-lk-fine{ display:none; }
/* "your $49 counts": a returning crisis-report buyer; the credit line stays visible even in the one-line gate */
.ttg-lk-credit{ margin:0 2px 8px; font:700 13px/1.3 var(--ttg-sans); color:var(--ttg-ag); }
.ttg-lk-credit-on .ttg-lk-buy{ white-space:normal; text-align:center; }
.ttg-lk-gate-c.ttg-lk-credit-on .ttg-lk-buy{ font-size:16px; padding:14px 16px; }
@media (min-width:720px){ .ttg-lk-gate-c.ttg-lk-credit-on .ttg-lk-cta{ width:320px; } }
.ttg-lk-rcpt{ margin:0 0 12px; padding:10px 12px; border:1px dashed var(--ttg-line-2); border-radius:12px; display:grid; grid-template-columns:auto auto minmax(0,1fr); gap:6px 10px; align-items:baseline; font:400 13.5px/1.3 var(--ttg-sans); color:var(--ttg-ink-soft); }
.ttg-lk-rcpt b{ font:800 15px/1 var(--ttg-mono); color:var(--ttg-ink); text-align:right; }
.ttg-lk-op{ font:700 13px/1 var(--ttg-mono); color:var(--ttg-muted); }
.ttg-lk-ok{ color:#2f7d4f; }
.ttg-lk-rcpt .ttg-lk-tot{ border-top:1px solid var(--ttg-line); padding-top:6px; }
.ttg-lk-rcpt b.ttg-lk-tot{ color:var(--ttg-ag); }
.ttg-lk-gate-c .ttg-lk-rcpt{ display:none; }
.ttg-lk-buy[disabled]{ opacity:.7; cursor:progress; transform:none; }
.ttg-lk-gate-c .ttg-lk-alt{ grid-column:1 / -1; margin-top:8px; padding-top:10px; border-top-color:rgba(224,82,47,.18); font-size:12.5px; }

/* the drawer, for a locked account someone tapped */
.ttg-lk-card{ display:grid; gap:14px; }
.ttg-lk-card .ttg-lk-gate{ box-shadow:none; border:1px solid var(--ttg-line-2); padding:22px 20px 18px; }
/* the person card's "who they say they are" on a free trace: the compact gate, one column, quiet */
.ttg-card-gate{ margin:14px 0 0; }
.ttg-card-gate .ttg-lk-gate-c{ grid-template-columns:1fr; box-shadow:none; border:1px solid var(--ttg-line-2); padding:16px 16px 14px; }
.ttg-card-gate .ttg-lk-gate-c .ttg-lk-cta{ grid-column:1; grid-row:auto; width:auto; margin-top:12px; }
.ttg-card-gate .ttg-lk-gate-c .ttg-lk-h{ font-size:19px; }
.ttg-card-gate .ttg-lk-gate-c .ttg-lk-buy{ padding:13px 16px; font-size:15px; }

@media (max-width:640px){
  .ttg-lk-glass{ min-height:640px; }
  .ttg-lk-glass .ttg-lk-gate{ top:18px; padding:22px 18px 18px; }
  .ttg-lk-gate-c{ grid-template-columns:1fr; }
  .ttg-lk-gate-c .ttg-lk-cta{ grid-column:1; grid-row:auto; width:auto; }
  .ttg-lk-steps li{ font-size:13.5px; }
}
@media (prefers-reduced-motion:reduce){ .ttg-lk-buy{ transition:none; } .ttg-lk-buy:hover{ transform:none; } }

/* readable time axis (2026-10-24): bigger plain ticks, day names bold */
.ttg-svg .ttg-tick-x{ font-size:14px; fill:var(--scr-ink-2); }
.ttg-svg .ttg-tick-day{ font-weight:700; fill:var(--scr-ink); }
/* every word in the legend row is a button */
.ttg-linetog{ background:none; border:1px solid transparent; border-radius:100px; padding:4px 10px; font:inherit; color:inherit; cursor:pointer; }
.ttg-linetog[aria-pressed="false"]{ opacity:.5; text-decoration:line-through; }
.ttg-linetog:hover, .ttg-k-q.ttg-filter:hover{ border-color:var(--scr-line, rgba(255,255,255,.18)); }
.ttg-k-q.ttg-filter{ background:none; border:1px solid transparent; border-radius:100px; padding:4px 10px; font:inherit; color:inherit; cursor:pointer; }
.ttg-k-q.ttg-filter[aria-pressed="true"]{ border-color:var(--scr-ink-2); color:var(--scr-ink); }
.ttg-nolines .ttg-svg .ttg-edge{ display:none; }

/* the account card, gentler (2026-10-24): a light shade on phones, none on wide screens,
   a big Close, and a clear marker on what was clicked */
.ttg-dr-back{ background:rgba(23,19,16,.22); }
.ttg-dr-x{ font-size:14px !important; padding:10px 16px !important; }
@media (min-width:900px){
  .ttg-drawer{ pointer-events:none; }
  .ttg-drawer .ttg-dr-back{ background:transparent; }
  .ttg-drawer .ttg-dr-panel{ pointer-events:auto; top:14px; bottom:14px; right:14px; width:400px; border-radius:18px; border:1px solid var(--ttg-line-2); box-shadow:0 30px 80px -30px rgba(0,0,0,.55); }
}
.ttg-svg .ttg-picked{ stroke:#fff !important; stroke-width:3px !important; }
.ttg-svg .ttg-halo{ fill:none; stroke:#fff; stroke-width:2; opacity:.9; pointer-events:none; animation:ttg-halo 1.6s ease-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes ttg-halo{ 0%{ opacity:.9; transform:scale(.8); } 100%{ opacity:0; transform:scale(1.6); } }
@media (prefers-reduced-motion:reduce){ .ttg-svg .ttg-halo{ animation:none; opacity:.8; } }
.ttg-row.ttg-picked{ box-shadow:inset 4px 0 0 var(--ttg-ink); background:var(--ttg-paper); }
.ttg-chip.ttg-picked{ outline:2px solid var(--ttg-ink); outline-offset:1px; }

/* header: two small squares instead of sentences */
.ttg-head-side{ display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.ttg-datechip{ display:inline-flex; flex-direction:column; align-items:center; gap:4px; padding:9px 14px; border:1px solid var(--ttg-line-2); border-radius:12px; background:var(--ttg-card); }
.ttg-datechip b{ font:700 14px/1 var(--ttg-sans); color:var(--ttg-ink); white-space:nowrap; }
.ttg-datechip small{ font:500 11.5px/1 var(--ttg-sans); color:var(--ttg-muted); white-space:nowrap; }
.ttg-cover{ display:inline-flex; flex-direction:column; align-items:center; gap:4px; padding:9px 14px; border:1px solid var(--ttg-line-2); border-radius:12px; background:var(--ttg-card); cursor:help; }
.ttg-cover b{ display:inline-flex; align-items:center; gap:6px; font:700 14px/1 var(--ttg-sans); color:var(--ttg-ink); white-space:nowrap; }
.ttg-cover small{ font:500 11.5px/1 var(--ttg-sans); color:var(--ttg-muted); white-space:nowrap; }
.ttg-cover i{ width:8px; height:8px; border-radius:50%; background:var(--ttg-muted); }
.ttg-cover-settled i, .ttg-cover-all i{ background:var(--ttg-ink); }
.ttg-cover-more i, .ttg-cover-blocked i{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--ttg-ink-soft); }
.ttg-pace{ align-items:center; }
.ttg-pace-l{ font-size:11.5px !important; color:var(--ttg-muted) !important; text-align:center !important; white-space:nowrap; }

/* Organized: the subheading under the chart sits inside the frame, not on its edge */
.ttg-og-under{ padding-left:22px; padding-right:22px; }

.ttg-k-q.ttg-filter, .ttg-linetog{ display:inline-flex; align-items:center; gap:6px; }

/* Talking about: chips under the legend that split the crowd by what they said */
.ttg-key .ttg-topics{ flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding-top:9px; border-top:1px dashed var(--scr-line); }
.ttg-tp-lab{ font:600 10.5px/1 var(--ttg-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--scr-ink-3); margin-right:4px; }
.ttg-key .ttg-tp{ display:inline-flex; align-items:center; gap:6px; max-width:100%; font:500 12px/1.2 var(--ttg-sans); color:var(--scr-ink-2); background:rgba(255,255,255,.04); border:1px solid var(--scr-line); border-radius:100px; padding:6px 11px; cursor:pointer; text-align:left; }
.ttg-key .ttg-tp-w{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ttg-key .ttg-tp-said .ttg-tp-w::before{ content:"\201C"; } .ttg-key .ttg-tp-said .ttg-tp-w::after{ content:"\201D"; }
.ttg-key .ttg-tp b{ font:700 11px/1 var(--ttg-mono); color:var(--scr-ink-3); }
.ttg-key .ttg-tp:hover{ color:var(--scr-ink); border-color:var(--scr-ink-3); }
.ttg-key .ttg-tp[aria-pressed="true"]{ background:var(--scr-ink); border-color:var(--scr-ink); color:var(--scr-bg); }
.ttg-key .ttg-tp[aria-pressed="true"] b{ color:var(--scr-bg); opacity:.7; }
.ttg-key .ttg-tp:focus-visible{ outline:2px solid var(--scr-ink); outline-offset:2px; }
.ttg-key .ttg-tp-none{ opacity:.5; cursor:default; }
.ttg-key .ttg-tp-x{ font-style:normal; font-size:14px; line-height:1; margin-left:2px; opacity:.55; padding:0 2px; }
.ttg-key .ttg-tp-x:hover{ opacity:1; }
.ttg-tp-add{ display:inline-flex; margin:0; }
.ttg-tp-add input{ width:170px; font:500 12px/1.2 var(--ttg-sans); color:var(--scr-ink); background:transparent; border:1px dashed var(--scr-ink-3); border-radius:100px; padding:6px 12px; outline:none; }
.ttg-tp-add input::placeholder{ color:var(--scr-ink-3); }
.ttg-tp-add input:focus{ border-style:solid; border-color:var(--scr-ink-2); }
.ttg-tp-msg{ flex-basis:100%; font:500 13px/1.4 var(--ttg-sans); color:var(--scr-ink-2); padding-top:2px; }
.ttg-tp-msg q{ color:var(--scr-ink); }
.ttg-tp-msg:empty{ display:none; }
/* a topic picked: the chart's names and lines step back so only the matching dots speak */
.ttg-topic-on .ttg-svg .ttg-lbl:not(.ttg-lbl-soft), .ttg-topic-on .ttg-svg .ttg-lead, .ttg-topic-on .ttg-svg .ttg-badge, .ttg-topic-on .ttg-svg .ttg-edge{ opacity:.08; }
@container (max-width:900px){ .ttg-tp-add, .ttg-tp-add input{ width:100%; } }
/* ---- what happened (ttg-st-): the story tab. Bar fills are the validated ordinal ramp (attacks
   loudest, disagrees quietest); headline words use lighter text steps of the same hues (all >= 5:1
   on the screen). Neutral is an outline so it never sits as a fill beside disagrees. ---- */
.ttg-l-attacks{ color:#e55f33; } .ttg-l-mocks{ color:#d9774f; } .ttg-l-disagrees{ color:#c98a6e; }
.ttg-hw-attacks{ color:#e0522f; } .ttg-hw-mocks{ color:#b5482a; } .ttg-hw-disagrees{ color:#8a3f28; }
.ttg-st-hero{ padding:4px 22px 22px; }
.ttg-st-bar{ display:flex; gap:2px; height:46px; }
.ttg-st-seg{ flex:1 1 0; min-width:5px; background:var(--seg); border-radius:4px; cursor:pointer; transition:opacity .15s ease, filter .15s ease; }
.ttg-st-seg-o{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--seg); }
.ttg-st-seg:hover, .ttg-st-seg:focus-visible{ filter:brightness(1.18); outline:none; }
.ttg-st-seg.ttg-dim{ opacity:.38; }
.ttg-st-voices{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px 18px; }
.ttg-st-v{ border-top:3px solid var(--seg); padding-top:12px; min-width:0; }
.ttg-st-vn{ display:flex; align-items:baseline; gap:9px; margin:0; }
.ttg-st-vn b{ font:700 32px/1 var(--ttg-mono); letter-spacing:-.03em; color:var(--scr-ink); }
.ttg-st-vn span{ font:500 13px/1.3 var(--ttg-sans); color:var(--scr-ink-2); }
.ttg-st-vq{ all:unset; box-sizing:border-box; display:block; margin-top:10px; cursor:pointer; border-radius:8px; }
.ttg-st-vq:hover .ttg-q{ color:#fff; }
.ttg-st-vq:focus-visible{ outline:2px solid var(--scr-ink); outline-offset:3px; }
.ttg-st-vq .ttg-q{ display:block; font-size:15px; line-height:1.45; color:var(--scr-ink); white-space:normal; }
.ttg-st-vw{ display:flex; align-items:center; gap:7px; margin-top:9px; min-width:0; font:500 11.5px/1.2 var(--ttg-mono); color:var(--scr-ink-3); }
.ttg-st-vh{ color:var(--scr-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.ttg-st-vf{ flex:none; }
.ttg-st-vnone{ margin:10px 0 0; font-size:12.5px; color:var(--scr-ink-3); }
.ttg-st-ch{ list-style:none; margin:0; padding:18px 20px; display:grid; gap:0; background:var(--ttg-card); border:1px solid var(--ttg-line-2); border-radius:var(--ttg-r); }
.ttg-st-c{ position:relative; display:grid; grid-template-columns:30px minmax(0,1fr); gap:14px; padding:0 0 22px; }
.ttg-st-c:last-child{ padding-bottom:0; }
.ttg-st-c:not(:last-child):before{ content:""; position:absolute; left:14px; top:30px; bottom:4px; width:2px; background:var(--ttg-line); border-radius:2px; }
.ttg-st-n{ width:30px; height:30px; border-radius:50%; background:var(--ttg-ink); color:#fff; font:700 13px/30px var(--ttg-mono); text-align:center; }
.ttg-st-cb{ min-width:0; padding-top:3px; }
.ttg-st-when{ margin:0 0 4px; font:600 10.5px/1.2 var(--ttg-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ttg-muted); }
.ttg-st-t{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin:0 0 8px; font:600 19px/1.25 var(--ttg-serif); letter-spacing:-.01em; color:var(--ttg-ink); }
.ttg-st-stat{ font:700 12.5px/1.2 var(--ttg-mono); color:var(--ttg-ink-soft); background:var(--ttg-paper); border-radius:6px; padding:4px 8px; }
.ttg-st-t .ttg-chip-model{ font-family:var(--ttg-sans); }
.ttg-st-p{ margin:0 0 8px; font:400 14px/1.55 var(--ttg-sans); color:var(--ttg-ink-soft); max-width:62ch; text-wrap:pretty; }
.ttg-st-cb .ttg-q{ margin:0 0 8px; padding-left:12px; border-left:2px solid var(--ttg-line-2); }
.ttg-st-w{ margin:-2px 0 8px 14px; font:500 11.5px/1.3 var(--ttg-mono); color:var(--ttg-muted); }
.ttg-st-faces{ display:flex; gap:6px; margin:0 0 10px; }
.ttg-st-faces .ttg-say-face{ all:unset; cursor:pointer; border-radius:50%; }
.ttg-st-faces .ttg-say-face:focus-visible{ outline:2px solid var(--ttg-wi); outline-offset:2px; }
.ttg-st-claims{ list-style:none; margin:0 0 8px; padding:0; display:grid; gap:8px; }
.ttg-st-claims li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:baseline; padding-top:8px; border-top:1px solid var(--ttg-line); }
.ttg-st-claims li:first-child{ padding-top:0; border-top:0; }
.ttg-st-claims li:first-child .ttg-q{ font-size:16px; color:var(--ttg-ink); }
.ttg-st-claims b{ font:700 15px/1 var(--ttg-mono); color:var(--ttg-ink); }
.ttg-st-goes{ margin:2px 0 0; }
.ttg-st-go{ all:unset; cursor:pointer; font:600 12.5px/1 var(--ttg-sans); color:var(--ttg-wi); }
.ttg-st-go:hover{ text-decoration:underline; }
.ttg-st-go:focus-visible{ outline:2px solid var(--ttg-wi); outline-offset:3px; border-radius:4px; }
@media (max-width:560px){
  .ttg-st-hero{ padding:4px 16px 18px; }
  .ttg-st-bar{ height:38px; }
  .ttg-st-voices{ grid-template-columns:minmax(0,1fr); }
  .ttg-st-ch{ padding:16px 14px; }
  .ttg-st-c{ grid-template-columns:26px minmax(0,1fr); gap:11px; }
  .ttg-st-n{ width:26px; height:26px; line-height:26px; font-size:12px; }
  .ttg-st-c:not(:last-child):before{ left:12px; top:26px; }
}
@media (prefers-reduced-motion:reduce){ .ttg-st-seg{ transition:none; } }
@media (min-width:900px){ .ttg-st-lower .ttg-factcol{ position:sticky; top:16px; } }

/* ===== TRACE LIVE (TRACE_LIVE_SPEC.md section 3): one green dot, green +N badges, the stream,
   green rings on what is new since opening. Green means one thing here: new since you opened. ===== */
.ttg{ --ttg-live:#1f8a4c; --ttg-live-soft:rgba(31,138,76,.14); --scr-live:#4fc47f; }
.ttg-live{ display:inline-flex; align-items:center; gap:8px; align-self:center; padding:9px 14px; border-radius:100px; border:1px solid rgba(31,138,76,.35); background:var(--ttg-live-soft); color:var(--ttg-live); font:800 11px/1 var(--ttg-mono); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.ttg-live[hidden]{ display:none; }
.ttg-live i{ width:8px; height:8px; border-radius:50%; background:var(--ttg-live); box-shadow:0 0 0 0 rgba(31,138,76,.6); animation:ttgLivePulse 1.8s ease-out infinite; }
@keyframes ttgLivePulse{ 0%{ box-shadow:0 0 0 0 rgba(31,138,76,.55); } 70%{ box-shadow:0 0 0 8px rgba(31,138,76,0); } 100%{ box-shadow:0 0 0 0 rgba(31,138,76,0); } }
/* the +N rides the key's corner, out of the flow: inline it widened every key the moment live came on,
   the row wrapped to a 4 + 4 grid and the whole board jumped (James 11-04). The key never changes size. */
.ttg-tab{ position:relative; }
.ttg-tab-new{ position:absolute; top:-5px; right:-3px; z-index:2; font:700 9.5px/1 var(--ttg-mono); color:#fff; background:var(--ttg-live); padding:2px 5px; border-radius:100px; letter-spacing:-.02em; box-shadow:0 0 0 2px var(--ttg-card); pointer-events:none; }
.ttg-tab.on .ttg-tab-new{ background:var(--scr-live); color:var(--ttg-ink); }
/* the one quiet line by the dot for a $49 owner: watch this name while you're away */
.ttg-live-away{ margin:0 auto 0 0; padding:4px 2px; font:400 12px/1.2 var(--ttg-sans); color:var(--ttg-muted); }
.ttg-head .ttg-live-away, .ttg-head-side .ttg-live-away{ flex-basis:100%; margin:0; text-align:right; }
.ttg-live-away .ttg-link{ font-size:12px; white-space:nowrap; }
.ttg-live-away b{ font-weight:600; color:var(--ttg-ink); }
/* a saturated X poll: the counts are a floor, said in the stream header */
.ttg-lf-cap{ color:var(--ttg-muted); }
.ttg-lf-cap[hidden]{ display:none; }

/* the stream, on paper, above the Timeline screen */
.ttg-lf{ margin:14px 0 0; padding:16px 18px 10px; }
.ttg-lf-head h3{ display:inline-flex; align-items:center; gap:9px; }
.ttg-lf-head h3:before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--ttg-live); }
.ttg-lf-head p{ margin:4px 0 0; }
.ttg-lf-pill{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin:12px 0 4px; padding:11px 16px; border:0; border-radius:100px; cursor:pointer; background:var(--ttg-live); color:#fff; font:800 13.5px/1 var(--ttg-sans); box-shadow:0 10px 24px -14px rgba(31,138,76,.9); position:sticky; top:10px; z-index:2; }
.ttg-lf-pill[hidden]{ display:none; }
.ttg-lf-pill:hover{ filter:brightness(1.06); }
.ttg-lf-pill b{ font:800 13.5px/1 var(--ttg-mono); }
.ttg-lf-list{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:0; }
.ttg-lf-row{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; padding:12px 0; border-top:1px solid var(--ttg-line); animation:ttg-view-in .32s cubic-bezier(.22,1,.36,1); }
.ttg-lf-list > .ttg-lf-row:first-child, .ttg-lf-list > .ttg-lf-line:first-child{ border-top:0; }
.ttg-lf-face{ all:unset; cursor:pointer; border-radius:50%; align-self:start; margin-top:2px; }
.ttg-lf-face:focus-visible{ outline:2px solid var(--ttg-live); outline-offset:2px; }
.ttg-lf-m{ min-width:0; display:grid; gap:6px; justify-items:start; }
.ttg-lf-h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; min-width:0; justify-self:stretch; font-size:13.5px; }
.ttg-lf-h b{ font-weight:650; color:var(--ttg-ink); overflow-wrap:anywhere; }
.ttg-lf-n{ font:500 12px/1.2 var(--ttg-sans); color:var(--ttg-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:18ch; }
.ttg-lf-f{ font:500 11.5px/1.2 var(--ttg-mono); color:var(--ttg-muted); white-space:nowrap; }
.ttg-lf-t{ margin-left:auto; font:500 11.5px/1.2 var(--ttg-mono); color:var(--ttg-muted); white-space:nowrap; }
.ttg-lf-c{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.ttg-lf-chip{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:100px; font:700 10.5px/1.6 var(--ttg-mono); background:rgba(23,19,16,.06); color:var(--ttg-ink-soft); white-space:nowrap; }
.ttg-lf-tone{ background:transparent; box-shadow:inset 0 0 0 1px currentColor; }
.ttg-lf-tone-x{ color:var(--ttg-muted); }
.ttg-lf-via{ color:var(--ttg-ink); background:var(--ttg-paper); }
.ttg-lf-flag{ color:var(--ttg-th); background:transparent; box-shadow:inset 0 0 0 1px currentColor; }
.ttg-lf-pi .ttg-lf-flag{ color:var(--ttg-info); }
.ttg-lf-cnt{ font:500 11.5px/1.3 var(--ttg-mono); color:var(--ttg-muted); white-space:nowrap; }
.ttg-lf-q{ margin:0; justify-self:stretch; font:400 15px/1.45 var(--ttg-sans); color:var(--ttg-ink); white-space:pre-wrap; overflow-wrap:anywhere; }
.ttg-lf-th .ttg-lf-q{ padding-left:10px; box-shadow:inset 3px 0 0 var(--ttg-th); }
.ttg-lf-pi .ttg-lf-q{ padding-left:10px; box-shadow:inset 3px 0 0 var(--ttg-info); }
.ttg-lf-img{ display:block; max-width:100%; border-radius:12px; overflow:hidden; border:1px solid var(--ttg-line); }
.ttg-lf-img img{ display:block; max-width:100%; max-height:200px; object-fit:cover; }
.ttg-lf-open{ font-size:12px; }
/* a burst: 8+ posts inside 5 min, three faces, one line, the posts behind a button */
.ttg-lf-faces{ display:flex; align-self:start; margin-top:2px; }
.ttg-lf-faces .ttg-lf-face{ margin-left:-8px; box-shadow:0 0 0 2px var(--ttg-card); }
.ttg-lf-faces .ttg-lf-face:first-child{ margin-left:0; }
.ttg-lf-burst .ttg-lf-h b{ font:700 15px/1.2 var(--ttg-serif); }
.ttg-lf-more{ all:unset; cursor:pointer; font:600 12.5px/1.2 var(--ttg-sans); color:var(--ttg-wi); }
.ttg-lf-more:hover{ text-decoration:underline; }
.ttg-lf-more:focus-visible{ outline:2px solid var(--ttg-wi); outline-offset:3px; border-radius:4px; }
.ttg-lf-sub{ list-style:none; margin:4px 0 0; padding:0 0 0 12px; border-left:2px solid var(--ttg-line); display:grid; justify-self:stretch; }
.ttg-lf-sub[hidden]{ display:none; }
.ttg-lf-sub .ttg-lf-row{ padding:10px 0; }
.ttg-lf-sub .ttg-lf-row:first-child{ border-top:0; }
/* change lines: thin dividers that say one count */
.ttg-lf-line{ display:flex; align-items:center; gap:10px; padding:9px 0 5px; font:600 12px/1.3 var(--ttg-sans); color:var(--ttg-live); }
.ttg-lf-line:before, .ttg-lf-line:after{ content:""; flex:1 1 0; border-top:1px dashed rgba(31,138,76,.45); }
.ttg-lf-line span{ white-space:normal; text-align:center; }
.ttg-lf-line time{ font:500 11px/1 var(--ttg-mono); color:var(--ttg-muted); }
.ttg-lf-line-q{ color:var(--ttg-muted); } .ttg-lf-line-q:before, .ttg-lf-line-q:after{ border-top-color:var(--ttg-line-2); }
/* the catch-up divider: ink, not green (green is "new since you opened"); the time is the fact and stays on phones */
.ttg-lf-gap{ color:var(--ttg-ink-soft); padding:12px 0 6px; font:700 11px/1 var(--ttg-mono); letter-spacing:.1em; text-transform:uppercase; }
.ttg-lf-gap:before, .ttg-lf-gap:after{ border-top:1px solid var(--ttg-line-2); }
.ttg-lf-gap time{ font:600 11.5px/1 var(--ttg-mono); color:var(--ttg-ink); letter-spacing:0; text-transform:none; }
.ttg-lf-opened{ display:flex; align-items:center; gap:10px; margin:6px 0 0; padding:10px 0 4px; font:600 11px/1 var(--ttg-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ttg-muted); }
.ttg-lf-opened:before, .ttg-lf-opened:after{ content:""; flex:1 1 0; border-top:1px solid var(--ttg-line-2); }
.ttg-lf-opened time{ letter-spacing:0; text-transform:none; }
/* locked: placeholder rows drawn from the count alone, nothing real behind the blur */
.ttg-lf-lk{ pointer-events:none; }
.ttg-lf-ghost{ background:#b3a593 !important; filter:blur(2.5px); }
.ttg-lf-bar{ display:inline-block; height:11px; margin:3px 8px 3px 0; border-radius:6px; background:rgba(23,19,16,.14); filter:blur(2.5px); vertical-align:middle; }
.ttg-lf-bar-s{ height:9px; background:rgba(23,19,16,.1); }
.ttg-lf-lk .ttg-lf-q{ display:flex; flex-wrap:wrap; gap:0 8px; }
/* rings: anything new since opening, after a refresh (rows, faces, chart dots) */
.ttg-row.ttg-lv-new .ttg-av, .ttg-chip-acc.ttg-lv-new .ttg-av, .ttg-say-face.ttg-lv-new .ttg-av{ box-shadow:0 0 0 2px var(--ttg-card), 0 0 0 4px var(--ttg-live); }
.ttg-svg .ttg-d.ttg-lv-new{ stroke:var(--scr-live) !important; stroke-width:2.4px !important; }
.ttg-og-d.ttg-lv-new{ box-shadow:0 0 0 1.5px var(--scr-bg), 0 0 0 3.5px var(--scr-live); }
.ttg-row.ttg-lv-new .ttg-row-h b:after{ content:"new"; margin-left:8px; font:800 9.5px/1 var(--ttg-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ttg-live); vertical-align:1px; }
@media (prefers-reduced-motion:reduce){ .ttg-live i{ animation:none; } .ttg-lf-row{ animation:none; } }
@container (max-width:520px){
  .ttg-lf{ padding:14px 12px 8px; }
  .ttg-lf-t{ margin-left:0; flex-basis:100%; }
  .ttg-lf-n{ max-width:12ch; }
  .ttg-lf-q{ font-size:14.5px; }
  .ttg-lf-line time{ display:none; }
  .ttg-lf-gap time{ display:inline; }
  .ttg-lf-line span{ max-width:70%; }
}

/* ---- Trace Watch (TRACE_LIVE_SPEC section 7): the button by Save as PDF + its panel.
   Grandma path: the headline says what it does, three numbered lines say when it pings,
   one button. Off = an outline bell; on = a green dot, "Watching". ---- */
.twch{ position:relative; display:inline-flex; }
.twch-btn{ display:inline-flex; align-items:center; gap:7px; font:700 12px/1 var(--sans,inherit); color:var(--ink,#171310);
  padding:10px 15px; border-radius:100px; border:1px solid var(--line-2,#d9d2c6); background:var(--card,#fff); cursor:pointer; white-space:nowrap; }
.twch-btn svg{ width:14px; height:14px; }
.twch-btn:hover{ border-color:var(--ink,#171310); }
.twch-btn:focus-visible{ outline:2px solid var(--ink,#171310); outline-offset:2px; }
.twch-btn.on{ border-color:#bcd6c4; background:#eef6f0; color:var(--green,#234a34); }
.twch-dot{ width:8px; height:8px; border-radius:50%; background:#2f9e5b; box-shadow:0 0 0 3px rgba(47,158,91,.18); }
.twch-pop{ position:absolute; z-index:60; top:calc(100% + 8px); right:0; width:min(340px, calc(100vw - 32px)); background:var(--card,#fff);
  border:1px solid var(--line-2,#d9d2c6); border-radius:16px; padding:18px 18px 16px; box-shadow:0 24px 60px -24px rgba(20,35,26,.45); text-align:left; }
.twch-h{ margin:0; font:600 19px/1.25 var(--serif,Georgia,serif); color:var(--ink,#171310); }
.twch-h span{ font:500 13px var(--sans,inherit); color:var(--muted,#7a7168); }
.twch-steps{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
.twch-steps li{ display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; align-items:start; font-size:14.5px; line-height:1.4; color:var(--ink,#171310); }
.twch-steps b{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#c2441f; color:#fff; font:700 12px/1 var(--sans,inherit); }
.twch-sub{ margin:12px 0 0; font-size:14px; line-height:1.45; color:var(--ink-soft,#4a443e); }
.twch-fine{ margin:10px 0 0; font-size:12.5px; line-height:1.45; color:var(--muted,#7a7168); }
.twch-msg{ margin:12px 0 0; font-size:13.5px; line-height:1.45; color:var(--green,#234a34); font-weight:600; }
.twch-go{ display:block; width:100%; margin-top:14px; padding:13px 16px; border:0; border-radius:999px; background:var(--green,#234a34); color:#fff;
  font:700 15px/1 var(--sans,inherit); cursor:pointer; }
.twch-go:hover{ filter:brightness(1.08); }
.twch-go[disabled]{ opacity:.6; cursor:progress; }
.twch-go.twch-off{ background:var(--card,#fff); color:var(--ink,#171310); border:1px solid var(--line-2,#d9d2c6); }
.twch-link{ display:inline-block; margin-top:12px; font-size:14px; font-weight:600; color:var(--green,#234a34); text-decoration:underline; text-underline-offset:3px; }
/* phones: the row wraps, so the panel opens full width under the whole button row */
/* the story header's action row holds the same button on a keyword trace (spec section 8) */
@media (max-width:600px){ .ttg-head-side,.gvc-actions{ position:relative; } .twch{ position:static; } .twch-pop{ left:0; right:0; width:auto; } }
@media print{ .twch{ display:none !important; } }

/* ---- EMBED THIS TRACE (trace.js embed*, J 10-29): the Watch button's look, and a centered
   dialog because the hero is the card itself at its real size (embed.html in an iframe).
   Headline = what it does, one button, the card as readers see it, the fine print quiet. ---- */
.temb{ display:inline-flex; }
/* Ask Claude (trace.js ask*): the Watch button's look and pop */
.task .twch-btn{ border-color:#cfc3e6; }
.task .twch-btn:hover{ border-color:#5b3f8f; }
.task .twch-steps b{ background:#5b3f8f; }
.task .twch-fine a{ color:var(--green,#234a34); }
@media print{ .task{ display:none !important; } }
.temb-modal{ position:fixed; inset:0; z-index:300; display:flex; align-items:flex-start; justify-content:center; padding:24px 16px; overflow-y:auto; }
.temb-back{ position:fixed; inset:0; background:rgba(20,35,26,.5); }
.temb-panel{ position:relative; width:min(620px, 100%); margin:auto 0; box-sizing:border-box; background:var(--card,#fff); border-radius:18px; padding:22px 22px 20px;
  box-shadow:0 30px 80px -30px rgba(20,35,26,.6); text-align:left; }
.temb-panel .twch-h{ font-size:23px; padding-right:36px; }
.temb-x{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; border:1px solid var(--line-2,#d9d2c6); background:var(--card,#fff);
  color:var(--ink,#171310); font:600 13px/1 var(--sans,inherit); cursor:pointer; }
.temb-x:hover{ border-color:var(--ink,#171310); }
.temb-step{ display:flex; align-items:center; gap:10px; margin:16px 0 8px; font:600 14.5px/1.35 var(--sans,inherit); color:var(--ink,#171310); }
.temb-step b{ display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:50%; background:#c2441f; color:#fff; font:700 12px/1 var(--sans,inherit); }
.temb-code{ display:block; width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--line-2,#d9d2c6); border-radius:10px; background:#f6f3ee;
  color:var(--ink,#171310); font:500 12px/1.5 "JetBrains Mono",ui-monospace,monospace; resize:none; word-break:break-all; }
.temb-panel .twch-go{ margin-top:10px; }
.temb-prev{ max-width:560px; }
.temb-prev iframe{ display:block; width:100%; border:0; border-radius:20px; background:#100f0d; }
@media (max-width:600px){ .temb-modal{ padding:12px 10px; } .temb-panel{ padding:18px 14px 16px; } .temb-panel .twch-h{ font-size:20px; } }
@media print{ .temb, .temb-modal{ display:none !important; } }
/* ---- offline life (escalation): one quiet panel on Saved posts ---- */
.ttg-esc-l{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ttg-esc-r{ display:grid; grid-template-columns:2.2em 1fr; gap:10px; align-items:baseline; }
.ttg-esc-n{ font:600 22px/1 var(--ttg-serif); color:var(--ttg-ink); text-align:right; }
.ttg-esc-t{ font-size:14px; line-height:1.4; color:var(--ttg-ink); min-width:0; }
.ttg-esc-f{ display:block; margin-top:3px; font-size:12.5px; color:var(--ttg-muted); overflow-wrap:anywhere; }
.ttg-esc-who{ all:unset; cursor:pointer; font-weight:600; color:var(--ttg-ink); overflow-wrap:anywhere; }
.ttg-esc-who:hover{ text-decoration:underline; }
.ttg-esc-th{ margin:12px 0 0; font-size:12.5px; color:var(--ttg-th); }
.ttg-esc-cant{ margin:12px 0 0; font-size:12.5px; line-height:1.45; color:var(--ttg-muted); }
.ttg-esc-cant b{ color:var(--ttg-ink-soft); font-weight:600; }
.ttg-esc-src{ margin:6px 0 0; font-size:11.5px; line-height:1.45; color:var(--ttg-muted); }
.ttg-esc-0 .ttg-esc-cant{ margin-top:0; }

/* ---- "Don't show me the posts" (shield): off by default, one quiet text toggle ---- */
.ttg-shield-bar{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end; gap:2px 14px; margin:6px 2px 0; }
.ttg-shield-t{ all:unset; cursor:pointer; padding:4px 2px; font:500 12px/1.2 var(--ttg-sans); color:var(--ttg-muted); text-decoration:underline; text-decoration-color:var(--ttg-line-2); text-underline-offset:3px; }
.ttg-shield-t:hover{ color:var(--ttg-ink); text-decoration-color:currentColor; }
.ttg-sh-on{ display:none; }
.ttg-shield .ttg-sh-on{ display:inline; }
.ttg-shield .ttg-sh-off{ display:none; }
.ttg-shield-box{ display:none; }
.ttg-shield .ttg-shield-box{ display:block; margin:8px 0 0; padding:16px 18px; background:var(--ttg-card); border:1px solid var(--ttg-line-2); border-radius:var(--ttg-r); }
.ttg-shield-k{ margin:0; font:600 11px/1 var(--ttg-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ttg-muted); }
.ttg-shield-h{ margin:8px 0 0; font:600 19px/1.3 var(--ttg-serif); letter-spacing:-.01em; color:var(--ttg-ink); }
.ttg-shield-lab{ margin:14px 0 6px; font-size:12px; color:var(--ttg-muted); }
.ttg-shield-w{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.ttg-shield-w li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; font-size:13.5px; color:var(--ttg-ink-soft); }
.ttg-shield-i{ flex:none; width:18px; height:18px; border-radius:50%; background:var(--ttg-ink); color:#fff; font:600 11px/18px var(--ttg-mono); text-align:center; }
.ttg-shield-e{ margin:12px 0 0; }
.ttg-shield-n{ margin:10px 0 0; font-size:12px; color:var(--ttg-muted); }
/* folded: post words, names people call it, topic words, post pictures; the subject's own posts stay */
.ttg-shield :is(.ttg-q, .ttg-said-q, .ttg-st-q, .ttg-row-q, .ttg-lf-q, .ttg-name, .ttg-tp-w):not(.ttg-shown):not(.ttg-roots .ttg-q){ font-size:0 !important; line-height:0 !important; color:transparent !important; cursor:pointer; -webkit-line-clamp:unset; }
.ttg-shield :is(.ttg-q, .ttg-said-q, .ttg-st-q, .ttg-row-q, .ttg-lf-q, .ttg-name):not(.ttg-shown):not(.ttg-roots .ttg-q)::before{ content:"Folded. Tap to read."; font:italic 400 12.5px/1.7 var(--ttg-sans); letter-spacing:0; color:#8a8176; }
.ttg-shield .ttg-tp-w:not(.ttg-shown)::before{ content:"folded"; font:italic 400 12px/1.4 var(--ttg-sans); color:#8a8176; }
.ttg-shield :is(.ttg-q, .ttg-said-q, .ttg-st-q, .ttg-row-q, .ttg-lf-q, .ttg-name, .ttg-tp-w):not(.ttg-shown):not(.ttg-roots .ttg-q)::after{ content:none; }
.ttg-shield :is(.ttg-said-img, .ttg-lf-img):not(.ttg-shown){ position:relative; display:block; min-height:44px; background:var(--ttg-paper); border-radius:10px; cursor:pointer; }
.ttg-shield :is(.ttg-said-img, .ttg-lf-img):not(.ttg-shown) img{ visibility:hidden; max-height:44px; }
.ttg-shield :is(.ttg-said-img, .ttg-lf-img):not(.ttg-shown)::before{ content:"Picture folded. Tap to see it."; position:absolute; inset:0; display:grid; place-items:center; font:italic 400 12.5px/1 var(--ttg-sans); color:#8a8176; z-index:1; }
.ttg-shield .ttg-said-veil-t{ display:none; }
.ttg-shield .ttg-av img{ visibility:hidden; }
.ttg-shield .ttg-shown .ttg-av img, .ttg-shield .ttg-av.ttg-shown img{ visibility:visible; }
.ttg-shield .ttg-tq{ display:none; }
.ttg-shield .ttg-subject .ttg-av img{ visibility:visible; }
.ttg-shield .ttg-face[data-a] image{ visibility:hidden; }

/* THREE LEVELS OF LIGHT (J 10-29): the account, the accounts tied to it, everyone else.
   Only bites when the account has ties; with none, the old single-dot spot stays. */
.ttg-focus-ties .ttg-svg .ttg-d:not(.ttg-me):not(.ttg-near), .ttg-focus-ties .ttg-og-d:not(.ttg-me):not(.ttg-near){ opacity:.12; }
.ttg-focus-ties .ttg-svg .ttg-d.ttg-near, .ttg-focus-ties .ttg-og-d.ttg-near{ opacity:.95; stroke:var(--scr-ink, #f2ede5); stroke-width:1px; }
.ttg-focus-ties .ttg-svg .ttg-d.ttg-me, .ttg-focus-ties .ttg-og-d.ttg-me{ opacity:1; }
.ttg-focus-ties .ttg-svg .ttg-edge{ opacity:.04; }
.ttg-focus-ties .ttg-svg .ttg-edge.ttg-tie{ opacity:.95; stroke-width:2; stroke-opacity:.9; }
.ttg-focus-ties .ttg-svg .ttg-face{ opacity:.25; }
.ttg-svg .ttg-d.ttg-soft.ttg-near{ opacity:.95; }
/* the dot size switch */
.ttg-szsw{ display:inline-flex; align-items:center; gap:2px; margin-left:6px; padding:2px; border-radius:100px; border:1px solid var(--scr-line, rgba(255,255,255,.14)); }
.ttg-szsw > span{ padding:0 6px 0 8px; color:var(--scr-ink-3, #a9a194); }
.ttg-szsw button{ border:0; background:none; border-radius:100px; padding:4px 9px; font:inherit; color:var(--scr-ink-3, #a9a194); cursor:pointer; }
.ttg-szsw button[aria-pressed="true"]{ background:rgba(255,255,255,.12); color:var(--scr-ink, #f2ede5); }
.ttg-svg-acc circle.ttg-d{ transition:r .35s ease; }

/* THE ACCOUNTS CHART, drawn like the front page (J 10-30): the burst from their posts,
   white fans where people answered people, light tags for the movers. */
.ttg-svg .ttg-burst{ fill:none; stroke-width:.8; opacity:.17; pointer-events:none; transition:opacity .16s ease; }
.ttg-svg-acc .ttg-edge{ stroke:#f4efe6 !important; stroke-width:1.5; opacity:.7; stroke-opacity:1 !important; }
.ttg-svg-acc .ttg-edge.ttg-lit, .ttg-focus-ties .ttg-svg-acc .ttg-edge.ttg-tie{ opacity:1; stroke-width:2.2; }
.ttg-svg .ttg-root2{ fill:var(--scr-bg, #12100e); stroke:var(--scr-ink, #f4efe7); stroke-width:1.8; cursor:pointer; }
.ttg-svg .ttg-tagbg{ fill:#f4efe6; pointer-events:none; }
.ttg-svg .ttg-lbl.ttg-lbl-tag{ fill:#14110e; stroke:none; font-weight:700; font-size:11.5px; }
.ttg-svg .ttg-lead-tag{ stroke:rgba(244,239,230,.75); }
.ttg-nolines .ttg-svg .ttg-burst{ display:none; }
.ttg-focus .ttg-svg .ttg-burst{ opacity:.04; }
.ttg-topic-on .ttg-svg .ttg-burst, .ttg-topic-on .ttg-svg .ttg-tagbg{ opacity:.06; }
.ttg-svg-acc circle.ttg-d{ stroke-width:1.2; }

/* HOW IT SPREAD (J 11-04): one post followed from the moment it went up. The post card
   is the front page's ("It started here"), the chart is its replay on the real trace. */
.ttg-pp{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:100%; }
.ttg-key .ttg-pp-b .ttg-pp-d{ font:600 11px/1 var(--ttg-mono); color:var(--scr-ink-3); }
.ttg-key .ttg-pp-b[aria-pressed="true"] .ttg-pp-d{ color:var(--scr-bg); opacity:.7; }
.ttg-post{ width:100%; max-width:760px; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(229,95,51,.55); }
.ttg-post-top{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font:600 13.5px/1.2 var(--ttg-sans); color:var(--scr-ink); }
.ttg-post-top span{ font-weight:500; color:var(--scr-ink-3); }
.ttg-post-top .ttg-post-tag{ margin-left:auto; font:700 10.5px/1 var(--ttg-sans); letter-spacing:.04em; text-transform:uppercase; color:#1a0f0a; background:#ff8a66; border-radius:100px; padding:4px 8px; white-space:nowrap; }
.ttg-post q{ display:block; margin:8px 0 0; quotes:"\201C" "\201D"; font:500 16px/1.45 var(--ttg-serif); color:var(--scr-ink); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ttg-post-open{ display:inline-block; margin:8px 0 0; font:600 12px/1 var(--ttg-sans); color:var(--scr-ink-2); text-decoration:underline; text-decoration-color:rgba(255,255,255,.3); text-underline-offset:3px; }
.ttg-post-open:hover{ color:var(--scr-ink); }
.ttg-svg .ttg-spoke{ fill:none; stroke-width:.8; opacity:.2; pointer-events:none; transition:opacity .16s ease; }
.ttg-svg-post .ttg-edge.ttg-web{ opacity:.85; }
.ttg-focus .ttg-svg .ttg-spoke, .ttg-focus-ties .ttg-svg .ttg-spoke{ opacity:.05; }
.ttg-svg .ttg-pbr{ fill:none; stroke:#ff8a66; stroke-width:1.5; }
.ttg-svg .ttg-pbr-t{ fill:#ff8a66; font:700 12.5px/1 var(--ttg-sans); }
.ttg-key .ttg-brk{ flex-basis:100%; height:0; }
.ttg-key .ttg-ln.ttg-ln-w{ border-top-color:#f4efe6; }
@media (max-width:600px){ .ttg-pp .ttg-tp-lab{ display:none; } .ttg-post-top .ttg-post-tag{ margin-left:0; } .ttg-post q{ font-size:14.5px; -webkit-line-clamp:2; } .ttg-pp{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; } .ttg-pp .ttg-tp{ flex:0 0 auto; } }
.ttg-post.ttg-post-q{ border-color:var(--scr-line-2); }
.ttg-post-q .ttg-post-top .ttg-post-tag{ background:var(--scr-ink); }
.ttg-post-why{ margin:8px 0 0; font:500 12.5px/1.4 var(--ttg-sans); color:var(--scr-ink-2); }
.ttg-post-why .ttg-post-open{ margin:0 0 0 6px; }

/* THE TIME RULER (J 11-04): ends say exactly when, breaks say what was cut */
.ttg-svg .ttg-tick-end{ fill:var(--scr-ink); font-weight:700; }
.ttg-svg .ttg-axis-end{ stroke:var(--scr-ink-2); stroke-width:1.5; }
.ttg-svg .ttg-brk-m{ fill:none; stroke:var(--scr-ink-2); stroke-width:1.6; }
.ttg-svg .ttg-brk-t{ fill:var(--scr-ink-3); font-size:10.5px; }
.ttg-svg .ttg-brk-u{ fill:#ff8a66; }

/* HOW IT SPREAD v3 (J 11-04): the strip of every post, the post card as the hero */
.ttg-strip{ width:100%; }
.ttg-strip-k{ margin:0 0 2px; font:500 13px/1.35 var(--ttg-sans); color:var(--scr-ink-3); }
.ttg-strip-svg{ display:block; width:100%; height:auto; max-height:92px; }
.ttg-svg .ttg-sb{ fill:var(--scr-ink-3); opacity:.35; }
.ttg-svg .ttg-sb-can{ opacity:.7; cursor:pointer; }
.ttg-svg .ttg-sb-can:hover, .ttg-svg .ttg-sb-can:focus-visible{ opacity:1; fill:var(--scr-ink-2); outline:none; }
.ttg-svg .ttg-sb-on{ fill:#ff8a66; opacity:1; }
.ttg-svg .ttg-sb-l{ fill:#ff8a66; font:700 12px/1 var(--ttg-sans); }
.ttg-svg .ttg-pc-box{ fill:#1d1a17; stroke:var(--scr-line-2); stroke-width:1.2; }
.ttg-svg .ttg-pc-box.ttg-pc-hot{ stroke:rgba(229,95,51,.7); }
.ttg-svg .ttg-pc{ cursor:pointer; }
.ttg-svg .ttg-pc-who{ fill:var(--scr-ink); font:700 14px/1 var(--ttg-sans); }
.ttg-svg .ttg-pc-when{ fill:var(--scr-ink-3); font:500 12px/1 var(--ttg-sans); }
.ttg-svg .ttg-pc-q{ fill:var(--scr-ink); font:500 15px/1 var(--ttg-serif); }
.ttg-svg .ttg-pc-n{ fill:var(--scr-ink-2); font:600 12px/1 var(--ttg-sans); }
.ttg-svg .ttg-pc-tag{ fill:#ff8a66; font:700 10px/1 var(--ttg-sans); letter-spacing:.05em; }
.ttg-svg .ttg-pc-knot{ fill:var(--scr-ink); }
.ttg-svg .ttg-pghost{ fill:var(--scr-ink-3); opacity:.22; pointer-events:none; }
.ttg-svg .ttg-ylab{ fill:var(--scr-ink-2); font-weight:600; }
.ttg-key .ttg-dot-ghost{ background:var(--scr-ink-3); opacity:.4; }

/* How it spread on phones: the strip fits the screen, the post card sits above the chart */
.ttg-svg.ttg-strip-svg{ min-width:0; }
.ttg-post.ttg-post-n{ max-width:none; margin:0 0 10px; border-color:var(--scr-line-2); }
.ttg-post-n q{ -webkit-line-clamp:4; }
.ttg-post-n .ttg-post-why{ margin:8px 0 0; font:500 12.5px/1.3 var(--ttg-sans); color:var(--scr-ink-3); }
.ttg-post-n .ttg-post-open{ margin:0; }

/* How it spread, around the chart (J 11-04): counts in the key, the biggest voice on each side */
.ttg-key .ttg-k-q b{ font-weight:700; color:var(--scr-ink); margin-right:3px; font-variant-numeric:tabular-nums; }
.ttg-key .ttg-k-soft{ color:var(--scr-ink-3); }
.ttg-voices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.ttg-voice{ all:unset; box-sizing:border-box; cursor:pointer; display:grid; gap:8px; align-content:start; padding:12px 14px; border-radius:12px; border:1px solid rgba(23,19,16,.12); }
.ttg-voice:hover, .ttg-voice:focus-visible{ border-color:rgba(23,19,16,.45); outline:none; }
.ttg-voice-h{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font:500 12.5px/1.2 var(--ttg-sans); }
.ttg-voice-h span{ opacity:.65; }
.ttg-voice-w{ font:700 10.5px/1 var(--ttg-mono); font-style:normal; letter-spacing:.1em; text-transform:uppercase; }
.ttg-voice .ttg-q{ font-size:15px; line-height:1.45; }
.ttg-voice-n{ margin:10px 0 0; font:500 12.5px/1.4 var(--ttg-sans); opacity:.7; }

/* the post sits beside the headline, never inside the chart (J 11-04) */
.ttg-sh.ttg-sh-2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,400px); gap:16px 28px; align-items:start; }
.ttg-sh-2 .ttg-post.ttg-post-n{ margin:0; }
@media (max-width:760px){ .ttg-sh.ttg-sh-2{ grid-template-columns:minmax(0,1fr); } }
.ttg-svg-post .ttg-badge{ cursor:pointer; }

/* a chart that scrolls: a fade says there is more, the strip says where you are (J 11-04) */
.ttg-stage.ttg-wide::after{ content:""; position:absolute; top:0; right:0; height:calc(100% - 46px); width:56px; background:linear-gradient(to right, rgba(20,18,16,0), var(--scr-bg)); pointer-events:none; transition:opacity .2s; }
.ttg-stage.ttg-wide.ttg-end::after{ opacity:0; }
.ttg-ov{ position:relative; margin:6px 22px 26px; height:28px; cursor:pointer; touch-action:none; user-select:none; }
.ttg-ov svg{ display:block; width:100%; height:28px; }
.ttg-ov .ttg-ov-ax{ stroke:var(--scr-line-2); stroke-width:1; vector-effect:non-scaling-stroke; }
.ttg-ov-win{ position:absolute; top:0; bottom:0; border:1.5px solid var(--scr-ink); border-radius:6px; background:rgba(244,239,230,.08); pointer-events:none; }
.ttg-ov-k{ position:absolute; left:0; bottom:-17px; font:500 11px/1 var(--ttg-sans); color:var(--scr-ink-3); }
@media (max-width:640px){ .ttg-ov{ margin-inline:14px; } }
@media (prefers-reduced-motion:reduce){ .ttg-stage.ttg-wide::after{ transition:none; } }

/* How it spread zoom: the map strip, − + Fit all, the pinned follower scale (J 11-04) */
.ttg-ovw{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; margin:8px 22px 12px; }
.ttg-ovw .ttg-ov{ margin:0; }
.ttg-ovw .ttg-ov-k{ position:static; grid-column:1 / -1; font:500 11.5px/1.3 var(--ttg-sans); color:var(--scr-ink-3); }
.ttg-ovw .ttg-ov-k.ttg-ov-say{ color:var(--scr-ink); font-weight:700; }
.ttg-zm{ display:inline-flex; gap:2px; padding:3px; border-radius:999px; border:1px solid var(--scr-line-2); }
.ttg-zm button{ all:unset; box-sizing:border-box; cursor:pointer; min-width:32px; height:28px; padding:0 10px; border-radius:999px; text-align:center; font:600 14px/28px var(--ttg-sans); color:var(--scr-ink); }
.ttg-zm button[data-z="fit"]{ font-size:12.5px; }
.ttg-zm button:hover:not(:disabled), .ttg-zm button:focus-visible{ background:rgba(244,239,230,.12); outline:none; }
.ttg-zm button:disabled{ opacity:.35; cursor:default; }
.ttg-stage.ttg-zoomable .ttg-scroll{ cursor:grab; }
/* two fingers on a chart zoom the chart, not the page */
.ttg-stage.ttg-zoomable .ttg-scroll{ touch-action:pan-x pan-y; }
.ttg-stage.ttg-panning .ttg-scroll{ cursor:grabbing; user-select:none; }
.ttg-yax{ position:absolute; left:0; top:0; width:58px; height:var(--ttg-sch, 70%); pointer-events:none; opacity:0; transition:opacity .15s; background:linear-gradient(to right, var(--scr-bg) 60%, rgba(20,18,16,0)); }
.ttg-yax span{ position:absolute; right:10px; font:500 11px/1 var(--ttg-mono); color:var(--scr-ink-3); }
.ttg-stage.ttg-yax-on .ttg-yax{ opacity:1; }
.ttg-tip .ttg-tip-rel{ margin:6px 0 0; padding-top:6px; border-top:1px solid rgba(255,255,255,.14); font:600 12px/1.3 var(--ttg-sans); color:#ff8a66; }
@media (max-width:640px){ .ttg-ovw{ margin-inline:14px; } .ttg-zm button{ min-width:36px; height:32px; line-height:32px; } }
@media (prefers-reduced-motion:reduce){ .ttg-yax{ transition:none; } }
.ttg-stage.ttg-wide::after{ height:var(--ttg-sch, 70%); }

/* J 11-05: the board can't be selected or copied; fields stay usable */
.ttg-nocopy, .ttg-nocopy *{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.ttg-nocopy img, .ttg-nocopy image{ -webkit-user-drag:none; }
.ttg-nocopy input, .ttg-nocopy textarea, .ttg-nocopy select, .ttg-nocopy [contenteditable]{ -webkit-user-select:text; user-select:text; }
.ttg-nocopy-note{ position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:9999; transform:translate(-50%, 12px); max-width:calc(100vw - 32px); padding:10px 16px; border-radius:999px; background:#171310; color:#f4efe6; font:600 13.5px/1.3 "Inter",system-ui,sans-serif; box-shadow:0 8px 24px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; }
.ttg-nocopy-note.on{ opacity:1; transform:translate(-50%, 0); }
/* the map strip under a zoomable chart is its scrollbar; the native one only doubled it */
.ttg-stage.ttg-zoomable .ttg-scroll{ scrollbar-width:none; }
.ttg-stage.ttg-zoomable .ttg-scroll::-webkit-scrollbar{ display:none; }
@media (prefers-reduced-motion:reduce){ .ttg-nocopy-note{ transition:none; } }

/* J 11-05: tap a reply, its line back to the post lights (through whoever it answered) */
/* every string can be hovered: a wide see-through copy under the dots carries the pointer (J 11-05) */
.ttg-svg-post .ttg-hits{ opacity:0; }
.ttg-svg-post .ttg-hits .ttg-hitl{ fill:none !important; stroke:#000 !important; stroke-width:12px !important; pointer-events:stroke !important; animation:none !important; transition:none !important; }
/* the string under the pointer (or the hovered dot's own) lights back to the post; the rest steps back */
.ttg-svg-post.ttg-has-hpath .ttg-spoke:not(.ttg-hpath):not(.ttg-path){ stroke-opacity:.07; }
.ttg-svg-post.ttg-has-hpath .ttg-edge.ttg-web:not(.ttg-hpath):not(.ttg-path){ opacity:.12; }
.ttg-svg-post .ttg-spoke.ttg-hpath, .ttg-svg-post .ttg-edge.ttg-web.ttg-hpath{ opacity:1 !important; stroke-opacity:1 !important; stroke-width:2.4px; }
.ttg-svg-post circle.ttg-d.ttg-hpath{ stroke:#fff; stroke-width:2px; opacity:1; }
.ttg-svg-post{ -webkit-touch-callout:none; }
/* zoomed all the way: the button that cannot go further blinks once, so the wheel never feels dead */
.ttg-ovw.ttg-zm-max .ttg-zm [data-z="in"], .ttg-ovw.ttg-zm-min .ttg-zm [data-z="out"]{ animation:ttg-zm-lim .7s ease; }
@keyframes ttg-zm-lim{ 0%,100%{ box-shadow:none; } 30%{ box-shadow:0 0 0 3px rgba(255,255,255,.35); } }
.ttg-svg-post.ttg-has-path .ttg-spoke:not(.ttg-path){ stroke-opacity:.06 !important; }
.ttg-svg-post.ttg-has-path .ttg-edge.ttg-web:not(.ttg-path){ opacity:.08 !important; }
.ttg-svg-post .ttg-spoke.ttg-path, .ttg-svg-post .ttg-edge.ttg-web.ttg-path{ opacity:1 !important; stroke-opacity:1 !important; stroke-width:3px !important; stroke-dasharray:1; stroke-dashoffset:0; animation:ttg-pathdraw .7s ease-out; }
.ttg-svg-post circle.ttg-d.ttg-path{ stroke:#fff !important; stroke-width:2.5px !important; opacity:1 !important; }
@keyframes ttg-pathdraw{ from{ stroke-dashoffset:1; } }
.ttg-zm button[data-z="busy"]{ font-size:12.5px; }
@media (prefers-reduced-motion:reduce){ .ttg-svg-post .ttg-path{ animation:none !important; } }
.ttg-svg-post.ttg-has-path circle.ttg-d:not(.ttg-path):not(.ttg-picked), .ttg-svg-post.ttg-has-path .ttg-face:not(.ttg-face-keep){ opacity:.3; }

/* J 11-05: a picked account's badge and step read as picked, never a white blob. Badges and
   beats carry data-open, so pick() marks them; the dot's white outline must not reach them. */
.ttg-svg .ttg-badge.ttg-picked{ stroke:none !important; stroke-width:0 !important; }
.ttg-svg .ttg-badge.ttg-picked .ttg-badge-c{ fill:var(--scr-ag); stroke:#fff; stroke-width:2px; }
.ttg-svg .ttg-badge.ttg-picked .ttg-badge-t{ stroke:none; }
.ttg-beat.ttg-picked{ background:var(--scr-panel); box-shadow:inset 0 -3px 0 var(--scr-ag); }
.ttg-beat.ttg-picked .ttg-bn{ background:var(--scr-ag); }

/* J 11-05: switching posts reads as a different post, not a different view */
.ttg-showing{ display:grid; gap:8px; }
.ttg-showing-k{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px; font:600 12.5px/1.2 var(--ttg-sans); color:var(--scr-ink-2); }
.ttg-showing-k b{ color:#ff8a66; }
.ttg-pnavs{ display:inline-flex; gap:6px; }
.ttg-pnav{ all:unset; box-sizing:border-box; cursor:pointer; padding:6px 11px; border-radius:999px; border:1px solid var(--scr-line-2); font:600 12px/1 var(--ttg-sans); color:var(--scr-ink); }
.ttg-pnav:hover:not([disabled]), .ttg-pnav:focus-visible{ background:rgba(244,239,230,.1); outline:none; }
.ttg-pnav[disabled]{ opacity:.35; cursor:default; }
.ttg-pane-in .ttg-screen{ animation:ttg-panein .4s ease-out; }
.ttg-pane-in .ttg-post-n{ animation:ttg-cardflash 1.2s ease-out; }
@keyframes ttg-panein{ from{ opacity:.2; transform:translateY(8px); } }
@keyframes ttg-cardflash{ 0%{ box-shadow:0 0 0 2px #ff8a66; } 100%{ box-shadow:0 0 0 0 rgba(255,138,102,0); } }
/* replies to his other posts: there for context, quiet enough that each post looks like its own */
.ttg-svg .ttg-pghost{ opacity:.1; }
/* "↑ more followers" sat past the chart's left edge once the post card left the chart */
.ttg-svg-post .ttg-ylab{ text-anchor:start; transform:translateX(-54px); }
@media (prefers-reduced-motion:reduce){ .ttg-pane-in .ttg-screen, .ttg-pane-in .ttg-post-n{ animation:none; } }
/* the map strip caption says what the axis is; this note sat on the last break */
.ttg-svg-post .ttg-pnote{ display:none; }