/* Trace product-UI kit — styles for the tr-* custom elements (docs/KIT.md).
   Load after tokens.css. Every value is a custom property; variants override on :root or any ancestor.
   Product language (brief §13): white surfaces, black type, fine grey rules, 16px/1.5px icons,
   generous spacing, subtle radius, minimal shadow, very restrained colour. */

:where(:root) {
  --tr-scale: 1;
  --tr-text: var(--ink, #111);
  --tr-muted: var(--muted, #6B6A66);
  --tr-surface: var(--white, #fff);
  --tr-surface-2: var(--paper, #F7F6F2);
  --tr-rule: var(--line, #DEDDD8);
  --tr-radius: var(--radius, 10px);
  --tr-radius-l: var(--radius-l, 16px);
  --tr-accent: var(--sky, #A9CCF5);
  --tr-accent-ink: var(--sky-ink, #2E6CA8);
  --tr-highlight: color-mix(in srgb, var(--butter, #F5D864) 55%, transparent);
  --tr-dot: var(--tangerine, #F47A3C);
  --tr-edge: #CBC9C3;
  --map-idea: var(--sky, #A9CCF5);
  --map-decision: var(--ink, #111);
  --map-person: var(--white, #fff);
  --map-source: var(--paper, #F7F6F2);
  --tr-kind-1: #2F2E2C;
  --tr-kind-2: #77756F;
  --tr-kind-3: #B4B1AA;
  --tr-kind-4: var(--sky-ink, #2E6CA8);
  --tr-kind-5: #DCD9D2;
  --wordmark-solid: currentColor;
}

/* ---------- shared base ---------- */
:where(tr-ask, tr-sources, tr-chain, tr-fragments, tr-map, tr-source-view, tr-knowledge, tr-connection, tr-integrations, tr-request, tr-logo, tr-wordmark) {
  --_s: var(--tr-scale, 1);
  --tr-fs-meta: max(12px, calc(12px * var(--_s)));
  --tr-fs-ui: calc(14px * var(--_s));
  --tr-fs-ui-l: calc(15px * var(--_s));
  --tr-fs-answer: calc(18px * var(--_s));
  --tr-u: calc(4px * var(--_s));
  --tr-ic: calc(16px * var(--_s));
  --tr-mono: var(--font-mono, ui-monospace, 'SFMono-Regular', Menlo, monospace);
  display: block;
  position: relative;
  isolation: isolate;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--tr-fs-ui);
  line-height: 1.45;
  color: var(--tr-text);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.tr-ui :where(p, ol, ul, dl, dd, dt, figure, blockquote, h2, h3) { margin: 0; padding: 0; font: inherit; }
.tr-ui :where(ol, ul) { list-style: none; }
.tr-ui :where(button) {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; letter-spacing: inherit;
}
.tr-ui :where(button):focus-visible { outline: 2px solid var(--tr-text); outline-offset: 2px; border-radius: 6px; }
.tr-ui .tr-icon { width: var(--tr-ic); height: var(--tr-ic); flex: none; display: inline-block; }
.tr-ui .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }

/* text link with an arrow (CTAs inside product surfaces) */
.tr-link {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--tr-fs-ui); font-weight: 500; line-height: 1.3; color: var(--tr-text);
  padding: 4px 0;
}
.tr-link .tr-arr { display: inline-block; transition: transform var(--t, 280ms) var(--ease-out); }
.tr-link:hover .tr-arr { transform: translateX(2px); }

/* citation marker: ¹ ² (buttons) */
.tr-cite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35em; height: 1.4em; padding: 0 .28em; margin: 0 0 0 1px;
  font-size: max(12px, .6em); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums;
  vertical-align: .62em;
  color: var(--tr-accent-ink);
  background: color-mix(in srgb, var(--tr-accent) 30%, transparent);
  border-radius: 4px;
  transition: background-color var(--t-fast, 160ms) var(--ease-out), color var(--t-fast, 160ms) var(--ease-out);
}
/* the number is drawn by CSS so it never enters the text: copied/verbatim answers stay clean (aria-label names the source) */
.tr-cite::before { content: attr(data-n); }
.tr-cite:hover, .tr-cite.is-lit { background: var(--tr-accent); color: var(--tr-text); }
.tr-nb { white-space: nowrap; }
.tr-cites { white-space: nowrap; margin-left: 1px; }

/* ============================ tr-ask ============================ */
tr-ask { container-type: inline-size; }
.tr-ask__panel { position: relative; border-radius: var(--tr-radius-l); }
.tr-ask__panel--plain { background: var(--tr-surface); box-shadow: var(--shadow-1); }
.tr-ask__panel.tr-glass { --tr-rule-local: rgb(17 17 17 / .09); background: var(--glass-fill-strong, rgb(255 255 255 / .88)); }

.tr-ask__query {
  position: relative; display: flex; align-items: center; gap: calc(var(--tr-u) * 3);
  min-height: calc(60px * var(--_s));
  padding: calc(var(--tr-u) * 3) calc(var(--tr-u) * 3) calc(var(--tr-u) * 3) calc(var(--tr-u) * 5);
  cursor: text;
}
.tr-ask__query::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--tr-rule-local, var(--tr-rule)); opacity: 0; transition: opacity 300ms var(--ease-out);
}
tr-ask:is([data-phase=reading], [data-phase=answering], [data-phase=done], [reserve]) .tr-ask__query::after { opacity: 1; }
.tr-ask__mark { display: flex; color: var(--tr-text); }
.tr-ask__q {
  flex: 1; min-width: 0; position: relative; display: block;
  font-size: var(--tr-fs-ui-l); line-height: 1.4; letter-spacing: -.003em; text-align: left; cursor: text;
  padding: 2px 0; border-radius: 4px;
}
.tr-ask__ghost { display: block; visibility: hidden; }
.tr-ask__typed { position: absolute; inset: 2px 0 0 0; }
.tr-caret {
  display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; vertical-align: -.2em;
  background: currentColor; opacity: 0;
}
tr-ask[data-phase=idle] .tr-caret, tr-ask[data-phase=typing] .tr-caret { opacity: 1; }
tr-ask[data-phase=idle] .tr-caret { animation: tr-blink 1.1s steps(1) 6; }
.tr-ask__q:focus .tr-caret { opacity: 1; animation: tr-blink 1.1s steps(1) infinite; }
@keyframes tr-blink { 50% { opacity: 0; } }
.tr-ask__hint {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 22px; border-radius: 6px;
  border: 1px solid var(--tr-rule-local, var(--tr-rule)); color: var(--tr-muted);
}
.tr-ask__hint .tr-icon { width: 14px; height: 14px; }
.tr-ask__send {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: calc(34px * var(--_s)); height: calc(34px * var(--_s)); border-radius: 50%;
  background: var(--tr-text); color: var(--tr-surface);
  transition: transform var(--t-fast, 160ms) var(--ease-out), opacity var(--t-fast, 160ms);
}
.tr-ask__send:hover { transform: translateY(-1px); }
.tr-ask__send:active { transform: scale(.96); }
.tr-ask__send:focus-visible { outline-offset: 3px; border-radius: 50%; }
tr-ask:is([data-phase=reading], [data-phase=answering]) .tr-ask__send { opacity: .35; }
.tr-ask__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1;
  background: var(--tr-text); transform: scaleX(0); transform-origin: left; opacity: 0;
}

.tr-ask__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 620ms var(--ease-out); }
tr-ask:is([data-phase=reading], [data-phase=answering], [data-phase=done], [reserve]) .tr-ask__body { grid-template-rows: 1fr; }
.tr-ask__inner { min-height: 0; overflow: hidden; padding: 0 calc(var(--tr-u) * 5); }
.tr-ask__inner > :last-child { padding-bottom: calc(var(--tr-u) * 5); }

.tr-ask__status {
  display: flex; align-items: baseline; gap: 8px; min-height: 1.5em;
  padding-top: calc(var(--tr-u) * 4);
  font-size: var(--tr-fs-meta); line-height: 1.5; color: var(--tr-muted);
  transition: opacity 300ms var(--ease-out);
}
/* before the answer arrives (visible with [reserve]): no status line, no "Sources n" header or rule over an empty list */
tr-ask:is([data-phase=idle], [data-phase=typing]) .tr-ask__status { opacity: 0; }
.tr-ask__reading { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
tr-ask[data-phase=reading] .tr-ask__reading { display: block; }
tr-ask[data-phase=reading] :is(.tr-ask__label, .tr-ask__scope) { display: none; }
.tr-ask__label { font-weight: 500; color: var(--tr-text); }
.tr-ask__scope { margin-left: auto; white-space: nowrap; }

.tr-ask__answer {
  margin-top: calc(var(--tr-u) * 2.5);
  font-size: var(--tr-fs-answer); line-height: 1.52; letter-spacing: -.008em; color: var(--tr-text);
  text-wrap: pretty; max-width: 42em;
}
tr-ask:is([data-phase=idle], [data-phase=typing], [data-phase=reading]) .tr-ask__answer { opacity: 0; }
.tr-ask__answer .tr-w { opacity: 0; filter: blur(2px); transition: opacity 420ms var(--ease-out), filter 420ms var(--ease-out); }
.tr-ask__answer .tr-w.is-in { opacity: 1; filter: none; }
.tr-seg { border-radius: 3px; transition: background-color 220ms var(--ease-out); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tr-seg.is-lit { background: color-mix(in srgb, var(--tr-accent) 34%, transparent); }

.tr-ask__sources { margin-top: calc(var(--tr-u) * 6); }
.tr-ask__sh { display: flex; align-items: baseline; gap: 6px; padding-bottom: 8px; font-size: var(--tr-fs-meta); font-weight: 500; color: var(--tr-text); transition: opacity 360ms var(--ease-out); }
.tr-ask__shn { color: var(--tr-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.tr-ask__list { border-top: 1px solid var(--tr-rule-local, var(--tr-rule)); transition: border-color 360ms var(--ease-out); }
tr-ask:is([data-phase=idle], [data-phase=typing], [data-phase=reading]) .tr-ask__sh { opacity: 0; }
tr-ask:is([data-phase=idle], [data-phase=typing], [data-phase=reading]) .tr-ask__list { border-top-color: transparent; }
.tr-ask__meta { margin-top: 10px; font-size: var(--tr-fs-meta); color: var(--tr-muted); }
tr-ask:not([data-phase=done]) .tr-ask__meta, tr-ask:not([data-phase=done]) .tr-ask__trail { opacity: 0; }
.tr-ask__meta, .tr-ask__trail { transition: opacity 420ms var(--ease-out); }

/* source rows (shared by tr-ask + tr-sources list) */
.tr-src { border-bottom: 1px solid var(--tr-rule-local, var(--tr-rule)); opacity: 0; transform: translateY(5px); transition: opacity 360ms var(--ease-out), transform 480ms var(--ease-out); }
.tr-src.is-in { opacity: 1; transform: none; }
.tr-src__btn {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: calc(var(--tr-u) * 3);
  width: 100%; min-height: calc(42px * var(--_s)); padding: 8px 6px; border-radius: 6px;
  text-align: left; transition: background-color var(--t-fast, 160ms) var(--ease-out);
}
button.tr-src__btn:hover, .tr-src__btn.is-lit, .tr-src.is-lit .tr-src__btn { background: var(--tr-surface-2); }
.tr-glass .tr-src__btn:hover, .tr-glass .tr-src__btn.is-lit { background: rgb(17 17 17 / .04); }
.tr-src__n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px;
  font-size: var(--tr-fs-meta); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--tr-accent-ink); background: color-mix(in srgb, var(--tr-accent) 30%, transparent); border-radius: 4px;
  transition: background-color var(--t-fast, 160ms), color var(--t-fast, 160ms);
}
.tr-src__btn.is-lit .tr-src__n { background: var(--tr-accent); color: var(--tr-text); }
.tr-src__ic { display: flex; color: var(--tr-muted); }
.tr-src__name { font-size: var(--tr-fs-ui); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-src__meta { display: flex; align-items: baseline; gap: 14px; font-size: var(--tr-fs-meta); color: var(--tr-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-src__date { min-width: 3.3em; text-align: right; }
.tr-src__tool { min-width: 6.8em; }
@container (max-width: 520px) {
  .tr-src__btn { grid-template-columns: auto auto minmax(0, 1fr); row-gap: 1px; padding-block: 9px; }
  .tr-src__n { grid-row: span 2; align-self: start; margin-top: 1px; }
  .tr-src__ic { grid-row: span 2; align-self: start; margin-top: 2px; }
  .tr-src__meta { grid-column: 3; gap: 0; }
  .tr-src__date, .tr-src__tool { min-width: 0; text-align: left; }
  .tr-src__tool::before { content: "·"; margin: 0 6px; }
  .tr-src__btn--plain { grid-template-columns: auto minmax(0, 1fr); }
  .tr-src__btn--plain .tr-src__meta { grid-column: 2; }
}

/* trail: dated vertical timeline */
.tr-ask__trail { padding-top: calc(var(--tr-u) * 4); }
.tr-ask__cta .tr-arr { transition: transform 360ms var(--ease-out); }
tr-ask[data-trail-open] .tr-ask__cta .tr-arr { transform: rotate(90deg); }
.tr-ask__tl { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 560ms var(--ease-out); }
tr-ask[data-trail-open] .tr-ask__tl { grid-template-rows: 1fr; }
.tr-ask__tlin { min-height: 0; overflow: hidden; }
.tr-tl { padding-top: 14px; }
.tr-tl__step {
  position: relative; display: grid; grid-template-columns: 5.4em 15px minmax(0, 1fr); column-gap: 12px;
  padding-bottom: 14px; opacity: 0; transform: translateY(4px);
  transition: opacity 320ms var(--ease-out) calc(var(--i) * 110ms + 80ms), transform 420ms var(--ease-out) calc(var(--i) * 110ms + 80ms);
}
.tr-tl__step:last-child { padding-bottom: 2px; }
tr-ask[data-trail-open] .tr-tl__step { opacity: 1; transform: none; }
.tr-tl__date { padding-top: 2px; font-family: var(--tr-mono); font-size: var(--tr-fs-meta); color: var(--tr-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-tl__node { position: relative; }
.tr-tl__node::before {
  content: ""; position: absolute; left: 50%; top: 6px; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; border: 1px solid var(--tr-text); background: var(--tr-surface); box-sizing: border-box;
}
.tr-tl__step:last-child .tr-tl__node::before { background: var(--tr-text); }
.tr-tl__node::after {
  content: ""; position: absolute; left: 50%; top: 15px; bottom: -19px; width: 1px; margin-left: -.5px;
  background: var(--tr-text); opacity: .7; transform: scaleY(0); transform-origin: top;
  transition: transform 130ms linear calc(var(--i) * 110ms + 140ms);
}
.tr-tl__step:last-child .tr-tl__node::after { display: none; }
tr-ask[data-trail-open] .tr-tl__node::after { transform: none; }
.tr-tl__text { font-size: var(--tr-fs-ui); line-height: 1.45; }
.tr-tl__src { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: var(--tr-fs-meta); color: var(--tr-muted); }
.tr-tl__src .tr-icon { width: 14px; height: 14px; }
tr-ask.tr-instant :is(.tr-ask__tl, .tr-tl__step, .tr-tl__node::after) { transition: none !important; }

/* chips */
.tr-ask__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: calc(var(--tr-u) * 4); }
.tr-chip {
  padding: 7px 13px 8px; border-radius: 999px; border: 1px solid var(--tr-rule); background: var(--tr-surface);
  font-size: max(12px, calc(13px * var(--_s))); line-height: 1.3; color: var(--tr-muted); text-align: left;
  transition: color var(--t-fast, 160ms), border-color var(--t-fast, 160ms), background-color var(--t-fast, 160ms);
}
.tr-chip:hover { color: var(--tr-text); border-color: color-mix(in srgb, var(--tr-text) 32%, transparent); }
.tr-chip[aria-pressed=true] { color: var(--tr-text); border-color: var(--tr-text); }
.tr-chip:focus-visible { border-radius: 999px; }
tr-ask[mode=glass] .tr-chip { background: rgb(255 255 255 / .84); border-color: rgb(255 255 255 / .9); color: var(--muted-2, #5F5E5A); box-shadow: 0 1px 2px rgb(17 17 17 / .06); }
tr-ask[mode=glass] .tr-chip:hover { color: var(--tr-text); background: rgb(255 255 255 / .96); }
tr-ask[mode=glass] .tr-chip[aria-pressed=true] { color: var(--tr-text); background: var(--tr-surface); border-color: var(--tr-text); }
@container (max-width: 440px) {
  .tr-ask__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 2px; margin: calc(var(--tr-u) * 4 - 2px) -2px 0; }
  .tr-ask__chips::-webkit-scrollbar { display: none; }
  .tr-chip { flex: none; width: 76%; scroll-snap-align: start; }
}
@container (max-width: 560px) {
  .tr-ask__query { padding-left: calc(var(--tr-u) * 4); gap: calc(var(--tr-u) * 2.5); }
  .tr-ask__inner { padding: 0 calc(var(--tr-u) * 4); }
  .tr-ask__hint { display: none; }
}
@container (max-width: 440px) {
  .tr-ask__answer { font-size: max(16px, calc(17px * var(--_s))); }
}

/* ============================ tr-sources ============================ */
tr-sources { container-type: inline-size; }
.tr-sources__list { border-top: 1px solid var(--tr-rule); }
.tr-sources__list .tr-src__btn { cursor: default; }
.tr-sources__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-srcchip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px;
  border: 1px solid var(--tr-rule); background: var(--tr-surface); font-size: max(12px, calc(13px * var(--_s))); line-height: 1.3;
}
.tr-srcchip .tr-icon { color: var(--tr-muted); width: 14px; height: 14px; }
.tr-srcchip__date { color: var(--tr-muted); font-variant-numeric: tabular-nums; }
.tr-srcchip.is-lit { border-color: var(--tr-text); }
.tr-sources__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(220px * var(--_s))), 1fr)); gap: 12px; }
.tr-doc {
  display: flex; flex-direction: column; padding: 14px 16px 15px; border: 0; border-radius: 12px;
  background: var(--tr-surface); box-shadow: var(--shadow-1);
}
.tr-doc.is-lit { box-shadow: 0 0 0 1px var(--tr-text); }
.tr-doc__top { display: flex; align-items: center; gap: 7px; font-size: var(--tr-fs-meta); color: var(--tr-muted); }
.tr-doc__tool { margin-left: auto; }
.tr-doc__name { margin-top: 12px; font-size: var(--tr-fs-ui); font-weight: 500; line-height: 1.3; }
.tr-doc__ex { margin-top: 6px; font-size: max(12px, calc(13px * var(--_s))); line-height: 1.45; color: var(--tr-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tr-doc__date { margin-top: auto; padding-top: 12px; font-family: var(--tr-mono); font-size: var(--tr-fs-meta); color: var(--tr-muted); }

/* ============================ tr-chain ============================ */
:where(tr-chain) { height: calc(360px * var(--tr-scale, 1)); }
:where(tr-chain.is-vertical) { height: calc(540px * var(--tr-scale, 1)); }
.tr-chain__svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.tr-chain__edge { fill: none; stroke: var(--tr-text); stroke-width: 1; }
.tr-chain__edge.is-dashed { stroke: var(--tr-text); stroke-dasharray: 1.5 4; stroke-linecap: round; stroke-width: 1.25; }
.tr-chain__head { fill: none; stroke: var(--tr-text); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.tr-chain__dot { fill: var(--tr-text); }
.tr-chain__dot.is-late { fill: var(--tr-surface); stroke: var(--tr-text); stroke-width: 1.25; }
.tr-chain__nodes { position: absolute; inset: 0; pointer-events: none; }
.tr-chain__node {
  position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 9px 6px 8px; border-radius: 8px; background: var(--tr-chain-bg, var(--tr-surface));
  white-space: nowrap; will-change: transform, opacity; opacity: 0;
}
.tr-chain__ic { display: flex; padding-top: 1px; color: var(--tr-muted); }
.tr-chain__txt { display: flex; flex-direction: column; }
.tr-chain__name { font-size: var(--tr-fs-ui); font-weight: 500; line-height: 1.3; }
.tr-chain__date { font-family: var(--tr-mono); font-size: var(--tr-fs-meta); color: var(--tr-muted); line-height: 1.4; }
.tr-chain__node.is-late .tr-chain__ic { color: var(--tr-text); }

/* ============================ tr-fragments ============================ */
:where(tr-fragments) { height: calc(560px * var(--tr-scale, 1)); }
:where(tr-fragments.is-grid) { height: auto; }
.tr-frag__svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.tr-frag__line { fill: none; stroke: var(--tr-text); stroke-width: 1; }
.tr-frag__link { fill: none; stroke: var(--tr-muted); stroke-width: 1; opacity: .6; }
.tr-frag__cards { position: absolute; inset: 0; }
.tr-frag__card {
  position: absolute; left: 0; top: 0; width: calc(210px * var(--_s));
  padding: 12px 14px 13px; border-radius: 12px; background: var(--tr-surface);
  box-shadow: 0 0 0 .5px rgb(17 17 17 / .1), 0 1px 2px rgb(17 17 17 / .05), 0 10px 24px -14px rgb(17 17 17 / .18);
  will-change: transform; opacity: 0;
}
.tr-frag__top { display: flex; align-items: center; gap: 7px; font-size: var(--tr-fs-meta); color: var(--tr-muted); }
.tr-frag__name { margin-top: 10px; font-size: var(--tr-fs-ui); font-weight: 500; line-height: 1.3; }
.tr-frag__date { margin-top: 2px; font-family: var(--tr-mono); font-size: var(--tr-fs-meta); color: var(--tr-muted); }
.tr-frag__hub {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 12px; border-radius: 999px; background: var(--tr-text); color: var(--tr-surface);
  font-size: var(--tr-fs-ui); font-weight: 500; line-height: 1.2; white-space: nowrap; opacity: 0; transform-origin: center;
}
.tr-frag__hubmark { display: flex; }
.tr-frag__note, .tr-frag__ann {
  position: absolute; left: 0; top: 0; font-size: var(--tr-fs-meta); color: var(--tr-muted);
  white-space: nowrap; opacity: 0; font-variant-numeric: tabular-nums;
}
.tr-frag__ann { font-family: var(--tr-mono); }
tr-fragments.is-grid .tr-frag__cards { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 14px; }
tr-fragments.is-grid .tr-frag__card { position: relative; width: auto; transition: opacity 360ms var(--ease-out); }
tr-fragments.is-grid .tr-frag__hub { position: relative; display: flex; width: max-content; margin: 40px auto 0; }
tr-fragments.is-grid .tr-frag__note { position: relative; display: block; text-align: center; margin-top: 10px; }
tr-fragments.is-grid .tr-frag__ann { display: none; }

/* ============================ tr-map ============================ */
:where(tr-map) { aspect-ratio: 16 / 10; }
:where(tr-map.is-list) { aspect-ratio: auto; }
.tr-map__stage { position: absolute; inset: 0; }
.tr-map__svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.tr-map__edge { fill: none; stroke: var(--tr-edge); stroke-width: 1; transition: stroke 220ms var(--ease-out), opacity 220ms var(--ease-out); }
.tr-map__stage.has-focus .tr-map__edge { opacity: var(--tr-map-dim, .32); }
.tr-map__stage.has-focus .tr-map__edge.is-hot { opacity: 1; stroke: var(--tr-text); }
.tr-node {
  --tr-hit: 24px;
  position: absolute; left: 0; top: 0; z-index: 1;
  width: var(--tr-hit); height: var(--tr-hit); margin: calc(var(--tr-hit) / -2) 0 0 calc(var(--tr-hit) / -2); border-radius: 50%;
  transition: opacity 220ms var(--ease-out);
}
@media (pointer: coarse) { .tr-node { --tr-hit: 44px; } }
.tr-node:focus-visible { outline: none; }
.tr-node .tr-glyph { position: absolute; left: 50%; top: 50%; translate: -50% -50%; transition: box-shadow 220ms var(--ease-out); }
.tr-node__label {
  position: absolute; left: 50%; top: 50%; white-space: nowrap;
  font-size: var(--tr-fs-meta); line-height: 16px; color: var(--tr-text);
  padding: 0 3px; margin: 0 -3px; border-radius: 3px;
}
.tr-node--decision .tr-node__label { font-size: max(12px, calc(13px * var(--_s))); font-weight: 500; }
.tr-node--source .tr-node__label { color: var(--tr-muted); }
.tr-node:hover .tr-node__label, .tr-node.is-focus .tr-node__label { color: var(--tr-text); }
.tr-node:focus-visible .tr-glyph { outline: 2px solid var(--tr-text); outline-offset: 3px; }
.tr-node:focus-visible .tr-node__label { text-decoration: underline; text-underline-offset: 3px; }
.tr-node.is-focus .tr-glyph { box-shadow: 0 0 0 5px color-mix(in srgb, var(--tr-accent) 55%, transparent); }
.tr-map__stage.has-focus .tr-node:not(.is-hot) { opacity: var(--tr-map-dim, .32); }
tr-map.is-pre .tr-node, tr-map.is-pre .tr-map__edge { opacity: 0; }

.tr-glyph { display: flex; align-items: center; justify-content: center; box-sizing: border-box; flex: none; }
.tr-glyph--decision { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--map-decision); background: var(--tr-surface); }
.tr-glyph--decision::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--map-decision); }
.tr-glyph--idea { width: 14px; height: 14px; border-radius: 50%; background: var(--map-idea); box-shadow: inset 0 0 0 1px rgb(17 17 17 / .14); }
.tr-glyph--person {
  width: 26px; height: 26px; border-radius: 50%; background: var(--map-person);
  border: 1px solid color-mix(in srgb, var(--tr-text) 45%, transparent);
  font-size: 12px; font-weight: 500; letter-spacing: -.01em; color: var(--tr-text); line-height: 1;
}
/* initials from data-i: not DOM text (copy, find and text checks stay clean); the "/ ''" alt keeps them out of the a11y tree */
.tr-glyph--person[data-i]::after { content: attr(data-i); content: attr(data-i) / ""; }
.tr-glyph--source { width: 22px; height: 22px; border-radius: 6px; background: var(--map-source); border: 1px solid var(--tr-rule); color: var(--tr-text); }
.tr-glyph--source .tr-icon { width: 14px; height: 14px; }

.tr-map__tip {
  position: absolute; left: 0; top: 0; z-index: 3; min-width: 184px; max-width: 250px;
  padding: 12px 14px 13px; border-radius: 12px; background: var(--tr-surface);
  box-shadow: var(--shadow-float); opacity: 0; pointer-events: none;
  transition: opacity 180ms var(--ease-out);
}
.tr-map__tip.is-on { opacity: 1; }
.tr-tip__kind { display: flex; align-items: center; gap: 7px; font-size: var(--tr-fs-meta); color: var(--tr-muted); }
.tr-tip__kind .tr-glyph { scale: .62; margin: -4px; }
.tr-tip__title { margin-top: 6px; font-size: var(--tr-fs-ui-l); font-weight: 500; line-height: 1.3; }
.tr-tip__meta { margin-top: 2px; font-size: var(--tr-fs-meta); color: var(--tr-muted); font-variant-numeric: tabular-nums; }
.tr-tip__meta + .tr-tip__meta { margin-top: 0; }
.tr-map__legend {
  position: absolute; left: max(28px, 3%); bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-size: var(--tr-fs-meta); color: var(--tr-muted); pointer-events: none;
}
.tr-map__legend li { display: flex; align-items: center; gap: 8px; }
.tr-map__legend .tr-glyph { scale: .7; margin: -4px; }
.tr-map__legend .tr-glyph--person, .tr-map__legend .tr-glyph--decision { margin: -6px -5px; }

/* list layout (auto under 720px) */
.tr-mapl { display: grid; gap: 22px; }
.tr-mapl__h { display: flex; gap: 8px; align-items: baseline; padding-bottom: 8px; font-size: var(--tr-fs-meta); font-weight: 500; border-bottom: 1px solid var(--tr-rule); }
.tr-mapl__h span { color: var(--tr-muted); font-weight: 400; }
.tr-mapl__item { border-bottom: 1px solid var(--tr-rule); }
.tr-mapl__btn {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  width: 100%; min-height: 48px; padding: 9px 0; text-align: left;
}
.tr-mapl__btn .tr-glyph { grid-row: span 2; justify-self: center; }
.tr-mapl__title { font-size: var(--tr-fs-ui); font-weight: 500; line-height: 1.3; }
.tr-mapl__first { grid-column: 2; font-size: var(--tr-fs-meta); color: var(--tr-muted); }
.tr-mapl__chev { grid-column: 3; grid-row: 1 / span 2; color: var(--tr-muted); transition: transform 280ms var(--ease-out); }
.tr-mapl__item.is-open .tr-mapl__chev { transform: rotate(180deg); }
.tr-mapl__more { padding: 0 0 14px 38px; }
.tr-mapl__count { font-size: var(--tr-fs-meta); color: var(--tr-text); font-weight: 500; }
.tr-mapl__rel { margin-top: 8px; display: grid; gap: 6px; }
.tr-mapl__rel li { display: flex; align-items: center; gap: 8px; font-size: max(12px, calc(13px * var(--_s))); }
.tr-mapl__rel .tr-icon { color: var(--tr-muted); width: 14px; height: 14px; }
.tr-mapl__nb { margin-top: 10px; font-size: var(--tr-fs-meta); color: var(--tr-muted); line-height: 1.5; }
.tr-mapl__nb span { color: var(--tr-text); font-weight: 500; margin-right: 4px; }

/* ============================ tr-source-view ============================ */
.tr-sv__grid { display: grid; gap: 16px; }
tr-source-view.is-split .tr-sv__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(72px, 9%, 128px); align-items: center; }
.tr-sv__claim { padding: calc(var(--tr-u) * 6); border-radius: var(--tr-radius-l); background: var(--tr-surface); box-shadow: var(--shadow-1); }
.tr-sv__who { display: flex; align-items: center; gap: 8px; font-size: var(--tr-fs-meta); font-weight: 500; }
.tr-sv__statement { margin-top: 14px; font-size: calc(20px * var(--_s)); line-height: 1.42; letter-spacing: -.012em; text-wrap: pretty; }
.tr-sv__from { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--tr-rule); font-size: var(--tr-fs-meta); color: var(--tr-muted); }
.tr-sv__jump { margin-top: 10px; }
tr-source-view.is-split .tr-sv__jump { display: none; }
.tr-sv__doc { border-radius: var(--tr-radius-l); background: var(--tr-surface); box-shadow: 0 0 0 1px var(--tr-rule); overflow: hidden; }
.tr-sv__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--tr-rule); }
.tr-sv__docic { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--tr-surface-2); }
.tr-sv__title { font-size: var(--tr-fs-ui-l); font-weight: 500; line-height: 1.3; }
.tr-sv__meta { font-size: var(--tr-fs-meta); color: var(--tr-muted); font-variant-numeric: tabular-nums; }
.tr-sv__tool { margin-left: auto; align-self: flex-start; font-size: var(--tr-fs-meta); color: var(--tr-muted); }
.tr-sv__speaker { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 20px 2px; font-size: var(--tr-fs-meta); color: var(--tr-muted); }
.tr-sv__speaker span { color: var(--tr-text); font-weight: 500; }
.tr-sv__rows { padding: 6px 20px 18px; }
.tr-sv__doc { container-type: inline-size; }
.tr-sv__row { display: grid; grid-template-columns: minmax(0, 1fr); padding: 10px 0; border-radius: 6px; }
.tr-sv__row:focus { outline: none; }
.tr-sv__tw { display: flex; align-items: baseline; gap: 10px; }
.tr-sv__t { font-family: var(--tr-mono); font-size: var(--tr-fs-meta); color: var(--tr-muted); font-variant-numeric: tabular-nums; }
.tr-sv__w { font-size: var(--tr-fs-meta); font-weight: 500; color: var(--tr-muted); }
.tr-sv__x { margin-top: 3px; font-size: var(--tr-fs-ui-l); line-height: 1.55; color: color-mix(in srgb, var(--tr-text) 78%, var(--tr-surface)); }
@container (min-width: 540px) {
  .tr-sv__row { grid-template-columns: 9.6em minmax(0, 1fr); column-gap: 16px; padding: 11px 0; }
  .tr-sv__tw { flex-direction: column; gap: 2px; padding-top: 3px; }
  .tr-sv__x { margin-top: 0; }
}
.tr-sv__row.is-hl .tr-sv__x { color: var(--tr-text); }
.tr-sv__row.is-hl .tr-sv__t { color: var(--tr-text); }
.tr-sv__x mark {
  color: inherit; padding: 0 1px; border-radius: 2px;
  background: linear-gradient(var(--tr-highlight), var(--tr-highlight)) no-repeat 0 62% / 0% 80%;
  transition: background-size 620ms var(--ease-reveal);
}
tr-source-view.is-hl .tr-sv__x mark { background-size: 100% 80%; }
tr-source-view.is-lit .tr-sv__x mark { background-image: linear-gradient(color-mix(in srgb, var(--butter, #F5D864) 80%, transparent), color-mix(in srgb, var(--butter, #F5D864) 80%, transparent)); }
.tr-sv__svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; display: none; z-index: 2; }
tr-source-view.is-linked .tr-sv__svg { display: block; }
.tr-sv__line { fill: none; stroke: var(--tr-text); stroke-width: 1; stroke-linecap: round; }
.tr-sv__end { fill: var(--tr-text); transform-box: fill-box; transform-origin: center; }

/* ============================ tr-knowledge ============================ */
tr-knowledge { container-type: inline-size; }
.tr-kn { padding: calc(var(--tr-u) * 5) calc(var(--tr-u) * 6) calc(var(--tr-u) * 6); border-radius: var(--tr-radius-l); background: var(--tr-surface); box-shadow: 0 0 0 1px var(--tr-rule); }
tr-knowledge[compact] .tr-kn { padding: 0; box-shadow: none; background: none; border-radius: 0; }
.tr-kn__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--tr-rule); }
.tr-kn__crumb { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.tr-kn__ws { font-size: var(--tr-fs-ui); color: var(--tr-muted); }
.tr-kn__sep { color: var(--tr-rule); }
.tr-kn__pj { font-size: var(--tr-fs-ui-l); font-weight: 500; }
.tr-kn__right { display: flex; align-items: center; gap: 12px; }
.tr-kn__people { display: flex; padding-left: 6px; }
.tr-kn__people li {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: -4px; border-radius: 50%;
  background: var(--tr-surface-2); box-shadow: 0 0 0 2px var(--tr-surface), inset 0 0 0 1px var(--tr-rule);
  font-size: 12px; font-weight: 500; letter-spacing: -.01em; line-height: 1;
}
.tr-kn__ini[data-i]::after { content: attr(data-i); content: attr(data-i) / ""; }
.tr-kn__upd { font-size: var(--tr-fs-meta); color: var(--tr-muted); white-space: nowrap; }
.tr-kn__nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 20px; }
tr-knowledge[compact] .tr-kn__nums { margin-top: 0; }
.tr-kn__num { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; padding: 2px 16px; border-left: 1px solid var(--tr-rule); }
.tr-kn__num:first-child { padding-left: 0; border-left: 0; }
.tr-kn__num dt { font-size: var(--tr-fs-meta); color: var(--tr-muted); }
.tr-kn__v { display: block; font-size: calc(40px * var(--_s)); font-weight: 400; line-height: 1.1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.tr-kn__kinds { margin-top: 24px; }
.tr-kn__bar { display: flex; gap: 3px; height: 8px; }
.tr-kn__seg { flex: none; width: calc(var(--w) - 2.4px); min-width: 4px; border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 760ms var(--ease-reveal) calc(var(--i) * 90ms); }
tr-knowledge.is-in .tr-kn__seg { transform: none; }
.tr-kn__seg:nth-child(1), .tr-kn__legend li:nth-child(1) { --c: var(--tr-kind-1); }
.tr-kn__seg:nth-child(2), .tr-kn__legend li:nth-child(2) { --c: var(--tr-kind-2); }
.tr-kn__seg:nth-child(3), .tr-kn__legend li:nth-child(3) { --c: var(--tr-kind-3); }
.tr-kn__seg:nth-child(4), .tr-kn__legend li:nth-child(4) { --c: var(--tr-kind-4); }
.tr-kn__seg:nth-child(5), .tr-kn__legend li:nth-child(5) { --c: var(--tr-kind-5); }
.tr-kn__seg { background: var(--c); }
.tr-kn__legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; font-size: var(--tr-fs-meta); color: var(--tr-muted); }
.tr-kn__legend li { display: flex; align-items: center; gap: 7px; }
.tr-kn__sw { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.tr-kn__n { color: var(--tr-text); font-variant-numeric: tabular-nums; }
.tr-kn__recent { margin-top: 24px; }
.tr-kn__h { padding-bottom: 8px; font-size: var(--tr-fs-meta); font-weight: 500; border-bottom: 1px solid var(--tr-rule); }
.tr-kn__recent li { display: grid; grid-template-columns: 5.6em 16px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--tr-rule); }
.tr-kn__recent li:last-child { border-bottom: 0; padding-bottom: 0; }
.tr-kn__when { font-size: var(--tr-fs-meta); color: var(--tr-muted); font-variant-numeric: tabular-nums; }
.tr-kn__ic { display: flex; color: var(--tr-muted); }
.tr-kn__txt { font-size: var(--tr-fs-ui); line-height: 1.4; }
@container (max-width: 600px) {
  .tr-kn { padding: 18px 18px 20px; }
  .tr-kn__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tr-kn__nums { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .tr-kn__num:nth-child(4) { padding-left: 0; border-left: 0; }
  .tr-kn__v { font-size: calc(32px * var(--_s)); }
  .tr-kn__recent li { grid-template-columns: 4.8em 16px minmax(0, 1fr); align-items: start; }
  .tr-kn__ic { margin-top: 1px; }
}

/* ============================ tr-connection ============================ */
.tr-conn {
  padding: calc(var(--tr-u) * 4) calc(var(--tr-u) * 5) calc(var(--tr-u) * 3.5); border-radius: var(--tr-radius-l);
  transition: opacity 520ms var(--ease-out), transform 720ms var(--ease-reveal);
}
.tr-conn--plain { background: var(--tr-surface); box-shadow: var(--shadow-float); }
.tr-conn.tr-glass { background: var(--glass-fill-strong, rgb(255 255 255 / .88)); }
tr-connection:not(.is-in) .tr-conn { opacity: 0; transform: translateY(12px); }
.tr-conn__top { display: flex; align-items: center; gap: 10px; }
.tr-conn__dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tr-dot); }
.tr-conn__dot i { position: absolute; inset: 0; border-radius: 50%; background: var(--tr-dot); opacity: 0; }
tr-connection.is-pulse .tr-conn__dot i { animation: tr-pulse 1.3s var(--ease-out) 2 .25s; }
@keyframes tr-pulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(3.4); opacity: 0; } }
.tr-conn__label { font-size: var(--tr-fs-ui); font-weight: 500; }
.tr-conn__when { margin-left: auto; font-size: var(--tr-fs-meta); color: var(--tr-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-conn__body { margin-top: 8px; font-size: var(--tr-fs-ui-l); line-height: 1.48; text-wrap: pretty; }
.tr-conn__foot { margin-top: 10px; }
.tr-conn__cta .tr-arr { transition: transform 360ms var(--ease-out); }
tr-connection[data-open] .tr-conn__cta .tr-arr { transform: rotate(90deg); }
.tr-conn__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 560ms var(--ease-out); }
tr-connection[data-open] .tr-conn__more { grid-template-rows: 1fr; }
.tr-conn__in { min-height: 0; overflow: hidden; }
.tr-conn__links { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--tr-rule-local, rgb(17 17 17 / .08)); }
.tr-conn__link {
  position: relative; display: grid; grid-template-columns: 3.6em 13px minmax(0, 1fr); column-gap: 10px; padding-bottom: 12px;
  opacity: 0; transform: translateY(4px);
  transition: opacity 320ms var(--ease-out) calc(var(--i) * 110ms + 120ms), transform 420ms var(--ease-out) calc(var(--i) * 110ms + 120ms);
}
tr-connection[data-open] .tr-conn__link { opacity: 1; transform: none; }
.tr-conn__links .tr-conn__link:last-child { padding-bottom: 4px; }
.tr-conn__date { padding-top: 1px; font-family: var(--tr-mono); font-size: var(--tr-fs-meta); color: var(--tr-muted); white-space: nowrap; }
.tr-conn__node { position: relative; }
.tr-conn__node::before {
  content: ""; position: absolute; left: 50%; top: 5px; width: 7px; height: 7px; margin-left: -3.5px; box-sizing: border-box;
  border-radius: 50%; border: 1px solid var(--tr-text); background: var(--tr-surface);
}
.tr-conn__links .tr-conn__link:last-child .tr-conn__node::before { background: var(--tr-text); }
.tr-conn__links .tr-conn__node::after {
  content: ""; position: absolute; left: 50%; top: 14px; bottom: -17px; width: 1px; margin-left: -.5px; background: var(--tr-text); opacity: .7;
  transform: scaleY(0); transform-origin: top; transition: transform 160ms linear calc(var(--i) * 110ms + 220ms);
}
.tr-conn__links .tr-conn__link:last-child .tr-conn__node::after { display: none; }
tr-connection[data-open] .tr-conn__links .tr-conn__node::after { transform: none; }
.tr-conn__link--also .tr-conn__node::before { border-style: dashed; border-color: var(--tr-muted); }
.tr-conn__name { display: flex; align-items: center; gap: 6px; font-size: max(12px, calc(13px * var(--_s))); font-weight: 500; line-height: 1.35; }
.tr-conn__name .tr-icon { width: 14px; height: 14px; color: var(--tr-muted); }
.tr-conn__q { margin-top: 2px; font-family: var(--font-serif, Georgia, serif); font-size: var(--tr-fs-ui); font-weight: 300; line-height: 1.45; color: var(--muted-2, #5F5E5A); text-wrap: pretty; }
.tr-conn__also {
  margin: 8px 0 10px; padding-top: 12px; border-top: 1px dashed var(--tr-rule-local, rgb(17 17 17 / .12));
  font-size: var(--tr-fs-meta); font-weight: 500; color: var(--tr-muted);
  opacity: 0; transition: opacity 320ms var(--ease-out) 420ms;
}
tr-connection[data-open] .tr-conn__also { opacity: 1; }
.tr-conn__link--also { padding-bottom: 4px; }

/* ============================ tr-integrations ============================ */
tr-integrations {
  display: grid; align-items: center;
  grid-template-columns: max-content minmax(96px, 1fr) max-content minmax(150px, 1.25fr) max-content;
  grid-template-rows: 1fr auto 1fr;
}
.tr-int__tools { grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; width: calc(176px * var(--_s)); }
.tr-int__tool {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: 10px;
  width: 100%; padding: 5px 0 5px 10px; border-radius: 8px;
  font-size: var(--tr-fs-ui-l); line-height: 1.35; text-align: right;
  transition: color var(--t-fast, 160ms);
}
.tr-int__tool:focus-visible { outline-offset: 0; }
.tr-int__name { transition: color var(--t-fast, 160ms); }
tr-integrations.has-hot .tr-int__tool:not(.is-hot) .tr-int__name { color: var(--tr-muted); }
.tr-int__count { order: -1; font-size: var(--tr-fs-meta); color: var(--tr-muted); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 200ms var(--ease-out); }
.tr-int__tool:hover .tr-int__count, .tr-int__tool.is-hot .tr-int__count, .tr-int__tool:focus-visible .tr-int__count { opacity: 1; }
.tr-int__sub { flex-basis: 100%; font-size: var(--tr-fs-meta); line-height: 1.4; color: var(--tr-muted); }
.tr-int__port { fill: var(--tr-surface); stroke: color-mix(in srgb, var(--tr-text) 45%, transparent); stroke-width: 1; transition: stroke 200ms, fill 200ms; }
.tr-int__port.is-hot { fill: var(--tr-text); stroke: var(--tr-text); }
tr-integrations:not(.is-in) .tr-int__port { opacity: 0; }
.tr-int__port { transition: opacity 400ms var(--ease-out) 200ms; }
.tr-int__svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.tr-int__line { fill: none; stroke: color-mix(in srgb, var(--tr-text) 30%, transparent); stroke-width: 1; transition: stroke 220ms var(--ease-out), opacity 220ms var(--ease-out); }
.tr-int__line.is-hot { stroke: var(--tr-text); }
tr-integrations.has-hot .tr-int__line:not(.is-hot) { opacity: .45; }
.tr-int__out { fill: none; stroke: var(--tr-text); stroke-width: 1; }
.tr-int__notesline { fill: none; stroke: var(--tr-rule); stroke-width: 1; }
.tr-int__hub {
  grid-column: 3; grid-row: 2; position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 13px; border-radius: 999px;
  background: var(--tr-text); color: var(--tr-surface);
  font-size: var(--tr-fs-meta); font-weight: 500; letter-spacing: .16em; line-height: 1.2;
}
.tr-int__hubmark { display: flex; }
.tr-int__ctx {
  grid-column: 5; grid-row: 2; position: relative; z-index: 1;
  padding: 9px 16px; border-radius: 999px; background: var(--tr-surface); box-shadow: inset 0 0 0 1px var(--tr-text);
  font-size: var(--tr-fs-ui); font-weight: 500; line-height: 1.2;
}
.tr-int__notes { grid-column: 4 / -1; grid-row: 3; align-self: start; margin-top: 14px; display: grid; gap: 6px; }
.tr-int__notes li { position: relative; padding-left: 44px; font-size: var(--tr-fs-meta); line-height: 1.4; color: var(--tr-muted); }
.tr-int__notes li::before { content: ""; position: absolute; left: 28px; top: .7em; width: 8px; height: 1px; background: var(--tr-rule); }
.tr-int__pulses { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.tr-int__pulse {
  position: absolute; left: 0; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--tr-text);
  offset-rotate: 0deg; opacity: 0; display: none;
}
tr-integrations.is-live .tr-int__pulse { display: block; animation: tr-travel 6.4s cubic-bezier(.45, 0, .3, 1) 3; animation-delay: var(--d); }
tr-integrations.is-live .tr-int__pulse--out { animation-name: tr-travel-out; }
tr-integrations.is-paused .tr-int__pulse { animation-play-state: paused; }
@keyframes tr-travel { 0% { offset-distance: 0%; opacity: 0; } 4% { opacity: .9; } 30% { opacity: .9; } 34% { offset-distance: 100%; opacity: 0; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes tr-travel-out { 0%, 34% { offset-distance: 0%; opacity: 0; } 38% { opacity: .9; } 58% { opacity: .9; } 62% { offset-distance: 100%; opacity: 0; } 100% { offset-distance: 100%; opacity: 0; } }
tr-integrations:not(.is-in) :is(.tr-int__line, .tr-int__out, .tr-int__hub, .tr-int__ctx, .tr-int__notes, .tr-int__notesline) { opacity: 0; }
:is(.tr-int__hub, .tr-int__ctx, .tr-int__notes, .tr-int__notesline) { transition: opacity 500ms var(--ease-out) 500ms; }
.tr-int__ctx, .tr-int__notes { transition-delay: 1000ms; }
tr-integrations.is-vertical { grid-template-columns: max-content minmax(40px, 1fr) max-content; grid-template-rows: auto auto auto; }
tr-integrations.is-vertical .tr-int__tools { grid-row: 1; }
tr-integrations.is-vertical .tr-int__tools { width: calc(150px * var(--_s)); }
tr-integrations.is-vertical .tr-int__hub { grid-column: 3; grid-row: 1; }
tr-integrations.is-vertical .tr-int__ctx { grid-column: 3; grid-row: 2; justify-self: center; margin-top: 56px; }
tr-integrations.is-vertical .tr-int__notes { grid-column: 1 / -1; grid-row: 3; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--tr-rule); }
tr-integrations.is-vertical .tr-int__notes li { padding-left: 16px; }
tr-integrations.is-vertical .tr-int__notes li::before { left: 0; }
@media (prefers-reduced-motion: reduce) { .tr-int__pulse { display: none !important; } }

/* ============================ tr-wordmark ============================ */
tr-wordmark { font-weight: 500; line-height: 0; min-height: var(--wordmark-h, 0); }
tr-wordmark canvas { display: block; width: 100%; }

/* ============================ tr-logo ============================ */
tr-logo {
  display: inline-flex; align-items: center; gap: .3em;
  font-size: var(--tr-logo-size, 20px); font-weight: 500; letter-spacing: -.025em; line-height: 1; color: inherit;
}
.tr-logo__mark { width: 1.06em; height: 1.06em; flex: none; display: block; }
.tr-logo__word { display: block; padding-bottom: .04em; }

/* ============================ tr-request (dialog) ============================ */
tr-request { display: contents; }
.tr-req {
  width: min(440px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; margin: auto;
  border: 0; background: transparent; color: var(--tr-text); overflow: visible;
  font-family: var(--font-sans, system-ui, sans-serif); font-size: 15px; line-height: 1.45;
}
.tr-req::backdrop { background: rgb(17 17 17 / .32); }
.tr-req[open]::backdrop { animation: tr-fade 240ms var(--ease-out); }
@keyframes tr-fade { from { opacity: 0; } }
.tr-req__card { padding: 22px 24px 18px; border-radius: 20px; background: var(--tr-surface); box-shadow: var(--shadow-float); }
.tr-req__head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.tr-req__mark { width: 22px; height: 22px; flex: none; }
.tr-req__title { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
.tr-req__close {
  display: flex; align-items: center; justify-content: center; margin: -4px -8px -4px auto; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: none; color: var(--tr-muted); cursor: pointer;
  transition: background-color var(--t-fast, 160ms), color var(--t-fast, 160ms);
}
.tr-req__close:hover { background: var(--tr-surface-2); color: var(--tr-text); }
.tr-req :focus-visible { outline: 2px solid var(--tr-text); outline-offset: 2px; }
.tr-req__form { margin: 0; }
.tr-field { display: block; margin-bottom: 12px; }
.tr-field__label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--tr-muted); }
.tr-field__input {
  display: block; width: 100%; height: 44px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--tr-rule); border-radius: 10px; background: var(--tr-surface);
  font: inherit; font-size: 15px; color: var(--tr-text); outline: none;
  transition: border-color var(--t-fast, 160ms), box-shadow var(--t-fast, 160ms);
}
.tr-field__input:focus, .tr-field__input:focus-visible { border-color: var(--tr-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tr-accent) 55%, transparent); outline: none; }
.tr-field.is-filling .tr-field__input { border-color: color-mix(in srgb, var(--tr-text) 45%, transparent); }
.tr-req__submit {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin-top: 18px;
  border: 0; border-radius: 10px; background: var(--tr-text); color: var(--tr-surface); overflow: hidden;
  font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: transform var(--t-fast, 160ms) var(--ease-out);
}
.tr-req__submit:hover { transform: translateY(-1px); }
.tr-req__submit:disabled { cursor: default; transform: none; }
.tr-req__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--tr-surface); opacity: .8; transform: scaleX(0); transform-origin: left; }
.is-pending .tr-req__bar { transform: scaleX(1); transition: transform 600ms cubic-bezier(.4, 0, .2, 1); }
.is-pending .tr-req__lbl { opacity: .72; }
.tr-req__note { margin: 14px 0 0; font-size: 12px; color: var(--tr-muted); text-align: center; }
.tr-req__done { padding: 10px 0 2px; text-align: center; }
.tr-req__check { display: block; width: 52px; height: 52px; margin: 2px auto 16px; overflow: visible; }
.tr-req__ring { fill: none; stroke: var(--tr-rule); stroke-width: 1.5; }
.tr-req__origin { fill: var(--tr-text); }
.tr-req__tick { fill: none; stroke: var(--tr-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-req__ok { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.015em; outline: none; }
.tr-req__sub { margin: 4px 0 0; font-size: 15px; color: var(--tr-muted); }
.tr-req__again {
  margin-top: 22px; height: 40px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--tr-surface-2);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--tr-text); cursor: pointer;
}
.tr-req__again:hover { background: var(--stone, #E8E4DD); }

/* ?shot (review mode): final states only, nothing transitions in */
.tr-ui.tr-still *, .tr-ui.tr-still *::before, .tr-ui.tr-still *::after { transition: none !important; }

/* reduced motion: final states only (tokens.css also clamps durations) */
@media (prefers-reduced-motion: reduce) {
  .tr-ui *, .tr-ui *::before, .tr-ui *::after { transition: none !important; }
  .tr-caret { animation: none !important; }
}