/* The flow builder hub and its starts (site-src/gen/dm/triggers.py, agent H, 2026-10-07). Class prefix tr-.
   Built on system.css tokens and the kit (kit.css). The phones reuse the hero phone's Instagram parts (.ig-*); the only
   colours that are not tokens are the platforms' own, kept inside their depictions as scoped --tr-* values. */

/* ───────────── the stage: the phone, the wire, the canvas ───────────── */
.tr-stage { --tr-fbg: #f0f2f5; --tr-fbm: #65676b; --tr-ios: #007aff; margin: 0; display: grid; justify-items: center; }
.tr-stage [data-in]:not(.on) { display: none; }
.tr-stage .tr-st { transition: opacity 0.6s var(--ease); }
.tr-stage.is-reset .tr-st { opacity: 0; }
.tr-st { position: relative; width: 1100px; height: 740px; text-align: start; }
.tr-phw { position: absolute; left: 20px; top: 40px; width: 310px; height: 660px; }
.tr-phone { width: 310px; height: 660px; }
.tr-phone .ps-screen:has(.ig-dm.on, .tr-ms.on, .tr-mail.on, .tr-feed.on) .ig-status.is-dark { color: #000; }

/* the event crossing from the phone to the canvas */
.tr-link { position: absolute; left: 338px; top: 170px; width: 100px; height: 0; border-top: 2px dashed color-mix(in srgb, var(--ink-4) 70%, transparent); }
.tr-pulse { position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: tr-go 0.7s var(--ease) forwards; }
@keyframes tr-go { to { left: calc(100% - 12px); } }

/* the canvas, as the builder draws it: a bar, the dotted ground, the cards */
.tr-cv { position: absolute; left: 440px; top: 20px; width: 640px; height: 700px; border-radius: var(--r-xl); border: var(--hairline) solid var(--line); background-color: var(--canvas); background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 45%, transparent) 1px, transparent 1.2px); background-size: 16px 16px; overflow: hidden; box-shadow: var(--shadow-card); }
.tr-bar { position: absolute; inset: 0 0 auto; z-index: 2; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--surface); border-bottom: var(--hairline) solid var(--line); font-size: 13.5px; }
.tr-bar b { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-ok { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--r-pill); border: var(--hairline) solid var(--accent-line); font-size: 12px; font-weight: 600; color: var(--accent-ink); white-space: nowrap; }
.tr-ok .i { width: 13px; height: 13px; }
.tr-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.tr-live i { position: relative; width: 28px; height: 16px; border-radius: var(--r-pill); background: var(--accent); }
.tr-live i::after { content: ''; position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); }
/* the cards and their wires are the kit's (node(), flow(): site-src/dm/FLOW_CARDS.md), in the canvas under the bar */
.tr-flow { position: absolute; inset: 46px 0 0; overflow: hidden; }

/* what the start card gains when it fires: its preview (the kit's .kit-view, on the beat), the matching keyword lit, the count up by one */
.tr-lit { position: relative; display: inline-grid; }
.tr-lit > * { grid-area: 1 / 1; }
.tr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tr-chip { display: inline-grid; padding: 2px 8px; border-radius: var(--r-pill); border: var(--hairline) solid var(--line); background: var(--canvas); font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.tr-chip-on { margin: calc(-2px - var(--hairline)) calc(-8px - var(--hairline)); padding: calc(2px + var(--hairline)) calc(8px + var(--hairline)); border-radius: inherit; background: var(--g); color: var(--hero-ink); font-style: normal; animation: tr-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.tr-sring { width: 14px; height: 14px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--instagram); }
.tr-start .kit-view.on { animation: dmh-sk-in 0.35s var(--ease) backwards; }
.tr-start .kit-stats b { display: inline-block; }
.tr-start .kit-stats .tr-up { color: var(--accent-ink); animation: tr-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
/* one card looks selected at a time, as in the app (the family's hairline and a soft ring of it): the start while it fires, then the step the run has reached */
.tr-ring, .tr-run { position: absolute; inset: calc(var(--hairline) * -1); border: var(--hairline) solid var(--g); border-radius: var(--r-lg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 18%, transparent); pointer-events: none; animation: tr-in 0.3s var(--ease) backwards; }
@keyframes tr-pop { from { transform: scale(0.6); opacity: 0; } }
.tr-skipped { position: absolute; top: -13px; right: 12px; z-index: 2; padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-card); font-size: 11.5px; font-style: normal; font-weight: 600; color: var(--ink-3); animation: tr-pop 0.4s var(--ease) backwards; }

/* the ice breakers: four ways out, four answers, the canvas zoomed out (the app's compact cards) */
.tr-stage.is-ice .tr-start .kit-port.is-pill { min-height: 30px; padding-block: 4px; }
.tr-stage.is-ice .tr-next .kit-node-h { padding-block: 9px; }

/* the settings panel, open on the start */
.tr-panel { position: absolute; left: 24px; right: 24px; bottom: 16px; z-index: 1; display: grid; gap: 10px; padding: 11px 14px 13px; border-radius: var(--r-lg); border: var(--hairline) solid var(--line); background: var(--surface); box-shadow: var(--shadow-card); }
.tr-ph-h { display: flex; align-items: center; gap: 8px; margin: 0; padding-bottom: 8px; border-bottom: var(--hairline) solid var(--line-soft); font-size: 13px; color: var(--ink); }
.tr-ph-h .i { width: 15px; height: 15px; color: var(--accent-ink); }
.tr-ph-h span { margin-inline-start: auto; font-size: 12px; font-weight: 600; color: var(--accent-ink); }
.tr-sec { display: grid; justify-items: start; gap: 6px; }
.tr-lab { margin: 0; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.tr-help { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.tr-radios { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.tr-r { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 8px; border: var(--hairline) solid var(--line); background: var(--surface); font-size: 11.5px; color: var(--ink-2); }
.tr-r i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.tr-r.is-on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.tr-r.is-on i { box-shadow: inset 0 0 0 3.5px var(--accent); }
.tr-seg { display: inline-flex; margin: 0; padding: 2px; border-radius: 9px; border: var(--hairline) solid var(--line); background: var(--canvas); }
.tr-seg span { padding: 3px 10px; border-radius: 7px; font-size: 11.5px; color: var(--ink-3); }
.tr-seg .is-on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgb(15 23 42 / 0.06); }
.tr-tiles { display: flex; gap: 6px; }
.tr-tiles img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; opacity: 0.5; }
.tr-tiles .is-on { opacity: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.tr-stiles { display: flex; gap: 8px; }
.tr-stiles > span { position: relative; }
.tr-stiles img { display: block; width: 40px; height: 64px; border-radius: 8px; object-fit: cover; opacity: 0.5; }
.tr-stiles .is-on img { opacity: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.tr-stiles i { position: absolute; top: 3px; right: 3px; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--hero-ink); }
.tr-stiles i .i { width: 10px; height: 10px; }
.tr-stiles em { position: absolute; inset: auto 2px 3px; padding: 1px 0; border-radius: 4px; background: rgb(0 0 0 / 0.55); color: #fff; font-size: 8.5px; font-style: normal; font-weight: 600; text-align: center; }
.tr-input { display: flex; justify-content: space-between; gap: 8px; width: 100%; margin: 0; padding: 5px 10px; border-radius: 8px; border: var(--hairline) solid var(--line); background: var(--canvas); font-size: 12.5px; color: var(--ink); }
.tr-input small { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tr-linkrow { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 6px 12px; width: 100%; align-items: start; }
.tr-url { margin: 0; padding: 6px 10px; border-radius: 8px; border: var(--hairline) solid var(--line); background: var(--canvas); font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-copy { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; border: var(--hairline) solid var(--line); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--ink); box-shadow: 0 1px 0 rgb(15 23 42 / 0.04); }
.tr-copy .i { width: 13px; height: 13px; }
.tr-qrc { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: center; gap: 2px; padding: 6px; border-radius: 8px; border: var(--hairline) solid var(--line); }
.tr-qrc small { font-size: 10px; color: var(--ink-3); }
.tr-note, .tr-mod { display: flex; align-items: flex-start; gap: 8px; width: 100%; margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 11.5px; line-height: 1.4; color: var(--ink-2); }
.tr-note { background: color-mix(in srgb, var(--step-amber) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--step-amber) 30%, var(--surface)); }
.tr-mod { background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); }
.tr-note .i, .tr-mod .i { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.tr-note .i { color: color-mix(in srgb, var(--step-amber) 62%, var(--ink)); } .tr-mod .i { color: var(--accent-ink); }
.tr-note span, .tr-mod span { flex: 1; display: grid; gap: 1px; } .tr-note b, .tr-mod b { color: var(--ink); font-weight: 600; }
.tr-mod span { display: block; }
.tr-note em { align-self: center; flex: none; font-style: normal; font-weight: 600; color: var(--accent-ink); }
.tr-switch { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--ink); }
.tr-switch i { position: relative; width: 28px; height: 16px; border-radius: var(--r-pill); background: var(--accent); }
.tr-switch i::after { content: ''; position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); }
.tr-add { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; font-weight: 600; color: var(--accent-ink); }
.tr-add .i { width: 13px; height: 13px; }

/* ───────────── the phones' screens (Instagram parts from system.css .ig-*, plus these) ───────────── */
.tr-sp { flex: 1; }
.tr-push { cursor: default; }
.tr-msgr { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--facebook); color: #fff; }
.tr-msgr .i { width: 20px; height: 20px; }
.tr-day { align-self: center; margin: 6px 0 2px; font-size: 11px; color: var(--ig-meta); }
.tr-card { margin: 0; display: grid; gap: 1px; overflow: hidden; border-radius: 16px 16px 0 0; border: 1px solid #dbdbdb; border-bottom: 0; font-size: 11.5px; color: var(--ig-meta); }
.tr-card img { width: 100%; height: 92px; object-fit: cover; margin-bottom: 6px; }
.tr-card b, .tr-card span { padding-inline: 11px; } .tr-card b { font-size: 13px; color: #000; } .tr-card span { padding-bottom: 8px; }
.tr-card + .ig-btn { margin-top: -4px; border-radius: 0 0 16px 16px; }
.tr-qr { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tr-qr span { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid #dbdbdb; font-size: 12.5px; font-weight: 600; color: var(--ig-blue); }
.tr-sref { display: grid; justify-items: end; gap: 3px; margin: 0; }
.tr-sref img { width: 64px; height: 106px; border-radius: 10px; object-fit: cover; }
.tr-sref span { font-size: 11px; color: var(--ig-meta); }
.tr-shared { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 9px; align-items: center; width: 190px; margin: 0; padding: 6px; border-radius: 16px; background: var(--ig-grey); }
.tr-shared img { width: 52px; height: 68px; border-radius: 9px; object-fit: cover; }
.tr-shared span { display: grid; gap: 1px; font-size: 11.5px; color: var(--ig-meta); } .tr-shared b { color: #000; font-size: 12.5px; }
.tr-cards { display: flex; gap: 8px; width: 236px; overflow: hidden; }
.tr-c { flex: none; width: 150px; margin: 0; display: grid; overflow: hidden; border-radius: 16px; border: 1px solid #dbdbdb; font-size: 11.5px; color: var(--ig-meta); }
.tr-c img { width: 100%; height: 84px; object-fit: cover; }
.tr-c b { padding: 7px 10px 0; font-size: 12.5px; color: #000; } .tr-c span { padding: 0 10px 7px; }
.tr-c em { padding: 7px; border-top: 1px solid #efefef; text-align: center; font-style: normal; font-weight: 600; color: var(--ig-blue); }
.tr-ice { display: grid; justify-items: end; gap: 6px; margin: 0; }
.tr-ice span { padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid #dbdbdb; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ig-blue); transition: transform 0.15s var(--ease), background 0.2s var(--ease); }
.tr-ice .tap { transform: scale(0.94); background: var(--ig-grey); }

/* Facebook's feed with the sponsored post */
.tr-fbapp { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--tr-fbg); color: #050505; }
.tr-fbtop { flex: none; padding: 50px 14px 8px; background: #fff; }
.tr-fbtop b { font-size: 25px; font-weight: 800; letter-spacing: -0.04em; color: var(--facebook); }
.tr-fbpost { flex: 1; min-height: 0; margin-top: 6px; display: flex; flex-direction: column; background: #fff; overflow: hidden; }
.tr-fbh { display: flex; align-items: center; gap: 8px; padding: 9px 12px 6px; }
.tr-fbh img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.tr-fbh p { flex: 1; margin: 0; display: grid; } .tr-fbh b { font-size: 13px; }
.tr-fbh span { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--tr-fbm); } .tr-fbh span .i { width: 10px; height: 10px; }
.tr-fbh .ig-g { width: 18px; height: 18px; color: var(--tr-fbm); }
.tr-fbtx { margin: 0; padding: 0 12px 8px; font-size: 13px; line-height: 1.35; }
.tr-fbimg { width: 100%; height: 150px; object-fit: cover; object-position: 50% 60%; }
.tr-fbcta { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; background: var(--tr-fbg); }
.tr-fbcta span { flex: 1; display: grid; } .tr-fbcta small { font-size: 9.5px; color: var(--tr-fbm); } .tr-fbcta b { font-size: 12.5px; }
.tr-fbcta em { padding: 6px 10px; border-radius: 6px; background: #e4e6eb; font-size: 12px; font-style: normal; font-weight: 600; }
.tr-fbcount { display: flex; align-items: center; gap: 5px; margin: 0; padding: 7px 12px; font-size: 11.5px; color: var(--tr-fbm); }
.tr-fbr { font-size: 11px; letter-spacing: -2px; }
.tr-fbacts { display: flex; margin: 0 12px; padding: 6px 0; border-top: 1px solid #ced0d4; font-size: 12px; font-weight: 600; color: var(--tr-fbm); }
.tr-fbacts span { flex: 1; text-align: center; }
.tr-fbcms { flex: 1; display: grid; align-content: start; gap: 6px; padding: 6px 12px 0; }
.tr-fbc { display: flex; align-items: flex-start; gap: 7px; margin: 0; }
.tr-fbc.on { animation: dmh-sk-in 0.3s var(--ease) backwards; }
.tr-fbav { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--facebook) 14%, #fff); color: var(--facebook); font-size: 11.5px; font-weight: 700; }
.tr-fbav.is-me { background: color-mix(in srgb, var(--instagram) 14%, #fff); color: var(--instagram); }
.tr-fbb { display: grid; padding: 6px 10px; border-radius: 16px; background: var(--fb-bubble); font-size: 12.5px; line-height: 1.3; } .tr-fbb b { font-size: 11.5px; }
.tr-fbc.is-scam:has(.tr-hid.on) .tr-fbb { background: var(--fb-bubble-dim); color: var(--tr-fbm); text-decoration: line-through; }
.tr-hid { align-self: center; padding: 1px 7px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-ink); font-size: 10.5px; font-style: normal; font-weight: 650; animation: tr-pop 0.3s var(--ease) backwards; }
.tr-fbadd { display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 12px 18px; }
.tr-fbin { flex: 1; padding: 7px 12px; border-radius: 18px; background: var(--fb-bubble); font-size: 12.5px; white-space: nowrap; overflow: hidden; }

/* Messenger's chat */
.tr-ms { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: #050505; }
.tr-ms.on { animation: dmh-cut-in 0.45s var(--ease) backwards; }
.tr-ms-h { flex: none; display: flex; align-items: center; gap: 9px; padding: 52px 12px 9px; box-shadow: 0 1px 0 #e4e6eb; }
.tr-ms-h .ig-g { width: 21px; height: 21px; color: var(--facebook); }
.tr-ms-h img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.tr-ms-h p { flex: 1; min-width: 0; margin: 0; display: grid; } .tr-ms-h b { font-size: 13.5px; } .tr-ms-h span { font-size: 11px; color: var(--tr-fbm); white-space: nowrap; }
.tr-ms-th { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 8px 12px; }
.tr-ms-prof { align-self: center; flex: 1; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; }
.tr-ms-prof img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 6px; }
.tr-ms-prof b { font-size: 15px; } .tr-ms-prof span { font-size: 11.5px; color: var(--tr-fbm); }
.tr-ms-ctx { align-self: center; margin: 0 0 4px; max-width: 220px; text-align: center; font-size: 11px; color: var(--tr-fbm); }
.tr-mm { display: flex; align-items: flex-end; gap: 6px; }
.tr-mm.on { animation: dmh-sk-in 0.3s var(--ease) backwards; }
.tr-mm.me { justify-content: flex-end; }
.tr-mm > div { display: grid; gap: 4px; max-width: 78%; }
.tr-mb { margin: 0; max-width: 78%; padding: 8px 12px; border-radius: 18px; background: var(--fb-bubble); font-size: 13px; line-height: 1.35; }
.tr-mm > div .tr-mb { max-width: none; }
.tr-mm.me .tr-mb { background: var(--facebook); color: #fff; }
.tr-mbtn { margin: 0; padding: 8px 12px; border-radius: 14px; background: var(--fb-bubble); text-align: center; font-size: 12.5px; font-weight: 600; color: var(--facebook); transition: transform 0.15s var(--ease); }
.tr-mbtn.tap { transform: scale(0.95); }
.tr-mqr { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tr-mqr span { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--facebook); font-size: 12.5px; font-weight: 600; color: var(--facebook); }
.tr-ms-comp { flex: none; margin: 4px 12px 20px; }
.tr-ms-in { display: block; padding: 8px 14px; border-radius: 20px; background: var(--fb-bubble); font-size: 13px; white-space: nowrap; overflow: hidden; }

/* Instagram's story viewer */
.tr-story { position: absolute; inset: 0; background: #000; color: #fff; }
.tr-sbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tr-sshade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0.45), transparent 20%, transparent 70%, rgb(0 0 0 / 0.6)); }
.tr-sbars { position: absolute; top: 48px; inset-inline: 10px; display: flex; gap: 3px; }
.tr-sbars i { flex: 1; height: 2px; border-radius: 1px; background: rgb(255 255 255 / 0.35); }
.tr-sbars .is-done { background: #fff; }
.tr-sbars .is-now { background: linear-gradient(90deg, #fff 55%, rgb(255 255 255 / 0.35) 55%); }
.tr-stop { position: absolute; top: 58px; inset-inline: 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tr-stop img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .tr-stop span { opacity: 0.75; }
.tr-sticker { position: absolute; top: 40%; left: 50%; margin: 0; padding: 8px 14px; border-radius: 10px; background: #fff; color: #000; font-size: 16px; font-weight: 700; white-space: nowrap; transform: translateX(-50%) rotate(-3deg); }
.tr-sbot { position: absolute; bottom: 22px; inset-inline: 12px; display: flex; align-items: center; gap: 12px; }
.tr-sreply { flex: 1; min-width: 0; margin: 0; padding: 9px 14px; border-radius: 22px; border: 1px solid rgb(255 255 255 / 0.75); font-size: 13px; white-space: nowrap; overflow: hidden; }
.tr-sreply .ig-ph { color: rgb(255 255 255 / 0.85); }
.tr-sbot .ig-g { width: 25px; height: 25px; } .tr-sbot > span { transition: transform 0.15s var(--ease); } .tr-sbot > span.tap { transform: scale(0.8); }
.tr-sent { position: absolute; bottom: 80px; left: 50%; margin: 0; padding: 6px 14px; border-radius: var(--r-pill); background: rgb(0 0 0 / 0.65); font-size: 12.5px; font-weight: 600; transform: translateX(-50%); animation: tr-pop 0.3s var(--ease) backwards; }

/* a mail app with the newsletter */
.tr-mail { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: #000; }
.tr-mail-h { display: flex; align-items: center; gap: 4px; padding: 52px 12px 6px; color: var(--tr-ios); font-size: 15px; }
.tr-mail-h .ig-g { width: 22px; height: 22px; }
.tr-mail-s { margin: 4px 16px 10px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.tr-mail-from { display: flex; align-items: center; gap: 9px; padding: 0 16px 10px; border-bottom: 1px solid #efefef; }
.tr-mail-av { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #3a2e26; color: #fff; font-size: 13px; font-weight: 700; }
.tr-mail-from p { margin: 0; display: grid; } .tr-mail-from b { font-size: 13.5px; } .tr-mail-from span { font-size: 11.5px; color: var(--ig-meta); }
.tr-mail-body { display: grid; justify-items: center; gap: 8px; padding: 14px 18px; text-align: center; }
.tr-mail-body img { width: 100%; height: 170px; border-radius: 10px; object-fit: cover; }
.tr-mail-body b { font-size: 16px; } .tr-mail-body p { margin: 0; font-size: 12.5px; line-height: 1.45; color: #444; }
.tr-mail-btn { margin-top: 4px; padding: 10px 16px; border-radius: 9px; background: #3a2e26; color: #fff; font-size: 13px; font-weight: 600; transition: transform 0.15s var(--ease); }
.tr-mail-btn.tap { transform: scale(0.95); }
.tr-mail-body small { font-size: 10px; color: var(--ig-meta); }
.tr-sheet { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; background: rgb(0 0 0 / 0.32); animation: tr-pop 0.25s var(--ease) backwards; }
.tr-sheet > p { width: 236px; margin: 0; background: rgb(246 246 246 / 0.98); text-align: center; }
.tr-sheet > p:first-child { padding: 16px 14px; border-radius: 14px 14px 0 0; font-size: 14px; }
.tr-sheet-b { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #d6d6d6; border-radius: 0 0 14px 14px; }
.tr-sheet-b span { padding: 11px; font-size: 15px; color: var(--tr-ios); }
.tr-sheet-b span + span { border-inline-start: 1px solid #d6d6d6; font-weight: 600; }
.tr-sheet-b .tap { background: #e3e3e3; }

/* Instagram's feed and its share sheet */
.tr-feed { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: #000; }
.tr-feed-top { display: flex; align-items: center; justify-content: space-between; padding: 50px 14px 8px; }
.tr-feed-top b { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.tr-fh { display: flex; align-items: center; gap: 8px; padding: 6px 12px; }
.tr-fh img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--instagram); }
.tr-fh p { flex: 1; margin: 0; display: grid; } .tr-fh b { font-size: 13px; } .tr-fh span { font-size: 11px; color: var(--ig-meta); }
.tr-fimg { width: 100%; height: 300px; object-fit: cover; }
.tr-facts { display: flex; align-items: center; gap: 14px; padding: 9px 12px 4px; }
.tr-facts > span { transition: transform 0.15s var(--ease); } .tr-facts > span.tap { transform: scale(0.8); }
.tr-fcap { margin: 0; padding: 2px 12px; font-size: 12.5px; } .tr-fcap b { font-weight: 650; }
.tr-shs { position: absolute; inset: auto 0 0; z-index: 4; height: 54%; display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 -12px 40px rgb(0 0 0 / 0.22); animation: ps-up 0.45s var(--ease) backwards; }
.tr-shs-s { display: flex; align-items: center; gap: 8px; margin: 10px 14px 4px; padding: 8px 12px; border-radius: 10px; background: var(--ig-grey); font-size: 13px; color: var(--ig-meta); }
.tr-shs-s .ig-g { width: 16px; height: 16px; }
.tr-to { display: flex; align-items: center; gap: 10px; margin: 0; padding: 5px 14px; font-size: 13px; }
.tr-to b { flex: 1; font-weight: 600; }
.tr-to-av { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--instagram) 14%, #fff); color: var(--instagram); font-weight: 700; }
.tr-to-av img { width: 100%; height: 100%; object-fit: cover; }
.tr-to-s { padding: 6px 14px; border-radius: 8px; background: var(--ig-blue); color: #fff; font-size: 12.5px; font-weight: 600; }
.tr-to-s.is-sent { background: var(--ig-grey); color: #000; }

/* ───────────── a phone (860 and under): ONE surface at a time ─────────────
   PLAN §2 (Anant: everything fits the viewport on a phone). The stage is 260 wide and never scaled down, so the text keeps
   its size: the phone's bare screen at 260 x 316 (no frame, no status bar), and while the start fires the start card on
   its canvas in the same place (beat markers .tr-vm); the surface's name under it. Agent S's rule, 2026-10-07. */
.tr-vm, .tr-pan { display: none !important; }
.tr-vcap { display: none; }
@keyframes tr-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 860px) {
  .tr-stage, .tr-hub { padding: var(--s-4) var(--s-3) var(--s-3); border-radius: var(--r-xl); border: var(--hairline) solid var(--line); background: var(--surface); box-shadow: var(--shadow-card); }
  .tr-st { width: 260px; height: 340px; }
  .tr-phw { left: 0; top: 0; width: 260px; height: 316px; }
  .tr-phone { width: 260px !important; height: 316px !important; padding: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
  .tr-phone .ps-btn, .tr-phone .ig-status { display: none; }
  .tr-phone .ps-screen { border-radius: 16px; background: #fff; }
  .tr-link, .tr-bar, .tr-panel { display: none; }
  .tr-cv { left: 0; top: 0; width: 260px; height: 316px; border: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); overflow: visible; }
  /* the start card alone, in the kit's phone column (flow(col=True)); its ways out lead off this surface, so only the ice breakers keep theirs */
  .tr-flow { inset: 0; border-radius: 16px; }
  .tr-flow > .kit-flow { --col-x: 14px; --col-y: 14px; --col-w: 232px; width: 260px; height: 316px; }
  .tr-flow > .kit-flow > .tr-start::after { display: none; }
  .tr-flow .tr-start .kit-node-t b { white-space: normal; overflow: visible; text-overflow: clip; }   /* the app's own title wraps rather than being cut */
  .tr-stage:not(.is-ice) .tr-start .kit-ports { display: none; }
  .tr-vcap { position: absolute; left: 0; right: 0; top: 323px; margin: 0; display: grid; justify-items: center; }
  .tr-vcap span { grid-area: 1 / 1; font-size: 11.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3c); }
  .tr-st .tr-cv, .tr-st .tr-vc-f { visibility: hidden; }
  .tr-st:has(> .tr-vm.on) .tr-cv, .tr-st:has(> .tr-vm.on) .tr-vc-f { visibility: visible; animation: tr-in 0.35s var(--ease); }
  .tr-st:has(> .tr-vm.on) .tr-phw, .tr-st:has(> .tr-vm.on) .tr-vc-p { visibility: hidden; }
  .tr-st:not(:has(> .tr-vm.on)) .tr-phw { animation: tr-in 0.35s var(--ease); }
  .tr-start .kit-stats .tr-up { animation: tr-in 0.4s var(--ease) backwards; }
  /* the screens without a status bar: every top bar moves up; the newest rows stay, older ones step out whole */
  .tr-phone .ig-reel-top { top: 12px; }
  .tr-phone .ig-push { top: 8px; inset-inline: 6px; padding: 9px 10px; }
  .tr-phone .ig-rail { bottom: 70px; gap: 10px; }
  .tr-phone .ig-rail .ig-g { width: 24px; height: 24px; }
  .tr-phone .ig-rail > span:last-child { display: none; }
  .tr-phone .ig-meta { bottom: 14px; }
  .tr-phone .ig-sheet { height: calc(100% - 48px); }
  .tr-phone .ig-sheet-h { margin-top: 6px; padding-bottom: 8px; font-size: 14px; }
  .tr-phone .ig-cm { padding: 5px 0; gap: 8px; grid-template-columns: 28px minmax(0, 1fr) 22px; }
  .tr-phone .ig-cm-av { width: 28px; height: 28px; font-size: 12px; }
  .tr-phone .ig-cm-t { font-size: 13px; line-height: 1.3; }
  .tr-phone .ig-cms { padding-block: 2px; }
  .tr-phone .ig-cm-a { display: none; }
  .tr-phone .ig-cm-l { padding-top: 4px; }
  .tr-phone .ig-cms > .ig-cm:nth-child(n + 3) { display: none; }
  .tr-phone .ig-add { padding: 6px 10px 10px; }
  .tr-phone .kit-ig-dmh, .tr-phone .ig-dm-h { padding-top: 10px; padding-bottom: 8px; }
  .tr-phone .ig-dm:not(:has(.ig-typed)) .ig-comp { display: none; }
  .tr-phone .ig-dm .ig-comp { margin: 4px 8px 8px; }
  .tr-phone .ig-th:has(> .ig-m.me.on) > .ig-ctx { display: none; }
  .tr-phone .ig-prof img { width: 48px; height: 48px; }
  .tr-phone .tr-fbtop, .tr-phone .tr-feed-top { padding-top: 10px; }
  .tr-phone .tr-ms-h, .tr-phone .tr-mail-h { padding-top: 10px; }
  .tr-phone .tr-ms-comp { margin-bottom: 8px; }
  .tr-phone .tr-sbars { top: 8px; } .tr-phone .tr-stop { top: 18px; }
  .tr-phone .tr-sbot { bottom: 12px; } .tr-phone .tr-sent { bottom: 64px; }
  /* arrivals that slide in from off the screen settle in place instead (a phone screen has no room above it) */
  .tr-phone .ig-push, .tr-phone .tr-shs { animation: tr-in 0.4s var(--ease) backwards; }
  .tr-cv .tr-chip-on, .tr-cv .tr-skipped { animation: tr-in 0.4s var(--ease) backwards; }
  .tr-phone .tr-ms-h .ig-g:last-child { display: none; }
  .tr-phone .ig-prof { margin-bottom: 4px; }
  .tr-phone .ig-prof img { width: 40px; height: 40px; }
  .tr-phone .ig-prof .ig-view { display: none; }
  .tr-phone .tr-ice { gap: 5px; } .tr-phone .tr-ice span { padding: 6px 12px; }
  .tr-phone .tr-card img { height: 64px; }
  .tr-phone .tr-shs { height: auto; }
  .tr-phone .tr-shs > .tr-to ~ .tr-to ~ .tr-to { display: none; }
  /* each story keeps its newest messages: the oldest step out whole once a later one arrives */
  .is-cm .ig-th:has(> .ig-m:last-child.on) > .ig-m:first-of-type { display: none; }
  .is-ad .tr-ms-comp { display: none; }
  .is-ad .tr-ms-th:has(> .tr-mm.me.on) > .tr-ms-ctx, .is-ad .tr-ms-th:has(> .tr-mm:last-child.on) > .tr-mm:first-of-type { display: none; }
  .is-dmk .ig-comp:has(> p > .ig-ph:not([data-x]).on) { display: none; }
  .is-dmk .ig-th:has(> .ig-m:nth-of-type(5).on) > :nth-child(-n + 3) { display: none; }
  .is-ref .ig-th:has(> .ig-m:last-child.on) > .ig-prof { display: none; }
  .is-wel .tr-ms-comp:has(.ig-ph:not([data-x]).on) { display: none; }
  .is-wel .tr-ms-th:has(> .tr-day.on) > .tr-ms-prof + .tr-mm.me { display: none; }
  .is-shr .ig-th:has(> .ig-m:last-child.on) > .ig-m:nth-child(-n + 2) { display: none; }
  .is-shr .ig-m > div:has(.tr-cards) { max-width: none; }
  .is-shr .tr-cards { width: auto; gap: 6px; }
  .is-shr .tr-c { width: 96px; }
  .is-shr .tr-c img { height: 64px; }
  .is-shr .tr-c b { padding: 6px 8px 0; } .is-shr .tr-c span { padding: 0 8px 6px; } .is-shr .tr-c em { padding: 6px; }
  .tr-phone .ig-cms > .ig-cm.on:nth-child(n + 3) { display: grid; }
  .tr-phone .ig-cms > .ig-cm:nth-child(n + 5), .tr-phone .ig-cms:has(> .ig-cm.is-mine.on) > .ig-cm:nth-child(4) { display: none; }
  .is-ad .tr-fbimg, .is-ad .tr-fbcta, .is-ad .tr-fbcount { display: none; }
  .is-ad .tr-fbacts { margin-top: 2px; }
  .is-ad .tr-fbadd { padding-bottom: 10px; }
  .is-ad .tr-fbpost:has(.tr-fbc:not(.is-scam).on) .tr-fbadd { display: none; }
  .is-ad .tr-fbapp > .tr-push { position: absolute; inset: 8px 6px auto; }
  .tr-phone .ig-sheet { animation: tr-in 0.4s var(--ease) backwards; }
  .is-ad .tr-hid { font-size: 11px; animation: tr-in 0.3s var(--ease) backwards; }
  .is-dmk .ig-th:has(> .ig-m:nth-of-type(6).on) > .ig-m:nth-of-type(3) { display: none; }
  .is-dmk .ig-m > div:has(> .tr-qr) { max-width: none; }
  .is-sto .ig-th:has(> .ig-m:nth-of-type(2).on) .tr-sref img, .is-sto .ig-th:has(> .ig-m:last-child.on) .tr-sref { display: none; }
  .is-ref .tr-mail-s { margin: 2px 14px 8px; font-size: 17px; }
  .is-ref .tr-mail-from { padding: 0 14px 8px; }
  .is-ref .tr-mail-body { gap: 6px; padding: 10px 14px; }
  .is-ref .tr-mail-body img { height: 64px; }
  .is-ref .tr-mail-body small { font-size: 11px; }
  .is-ref .tr-mail-body p { display: none; }
  .is-shr .tr-fimg { height: 128px; }
  .is-shr .tr-shared { width: 176px; }
}

/* ───────────── the hub's canvas ───────────── */
.tr-hub { margin: 0; display: grid; justify-items: center; }
.tr-hub [data-in]:not(.on) { display: none; }
/* (FC1, 2026-10-08: the canvas is the kit's own flow builder: its bar, steps rail, tools and pill, the app's real cards and wires;
   site-src/dm/FLOW_CARDS.md. The window shows four columns of a longer flow and the camera follows the test run.) */
.tr-hb { position: relative; width: 1380px; height: 620px; overflow: hidden; border-radius: var(--r-xl); border: var(--hairline) solid var(--line); background: var(--surface); box-shadow: var(--shadow-card); text-align: start; }
.tr-hb > .kit-fbar { position: absolute; inset: 0 0 auto; }
.tr-hb-body { position: absolute; inset: 56px 0 0; display: flex; }
.tr-hcv { position: relative; flex: 1; min-width: 0; overflow: hidden; background-color: var(--canvas); background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 45%, transparent) 1px, transparent 1.2px); background-size: 16px 16px; }
/* the camera: it rests on the start, moves on when the run reaches the message, and again at the question */
.tr-hub:has([data-node='m'] > .tr-run.on) .kit-flow { --pan-x: 656px; }
.tr-hub:has([data-node='q'] > .tr-run.on) .kit-flow { --pan-x: 1284px; }
/* the step the test run has reached wears the app's selected ring: the family's hairline and a soft ring of it */
.tr-hub .tr-run { animation: none; }
/* only the card the test run is on looks selected: a card the run has passed (a later card in the run's order is lit) goes back to plain (MG2) */
.tr-hub .kit-node:has(~ .kit-node > .tr-run.on) > .tr-run { display: none; }
@media (max-width: 860px) { .tr-hub .kit-node:not(:has(~ .kit-node:not(.kit-sm-off) > .tr-run.on)) > .tr-run.on { display: block; } }   /* a phone's column leaves cards out: the last card of the column keeps the ring */
.tr-hb-run { position: absolute; z-index: 3; left: 252px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; height: 32px; margin: 0; padding: 0 13px; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-lift); font-size: 12.5px; font-weight: 600; color: var(--ink-2); animation: dmh-sk-in 0.3s var(--ease) backwards; }
.tr-hb-run i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
.tr-hub .kit-fpill.on { animation: dmh-sk-in 0.3s var(--ease) backwards; }
.tr-hb > .tr-hb-ok { display: none; color: var(--accent-ink); } .tr-hb-ok .i { width: 15px; height: 15px; }
@media (max-width: 860px) {
  /* the hub on a phone: the canvas as one surface under its bar, the run's path as one column of the app's cards; the camera follows the run card by card */
  .tr-hb { width: 260px; height: calc(378px + var(--tr-hb-more, 0px)); overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .tr-hb::before { content: ''; position: absolute; inset: 0 0 auto; z-index: 4; height: calc(316px + var(--tr-hb-more, 0px)); border-radius: 16px; box-shadow: 0 0 0 1px var(--line); pointer-events: none; }
  .tr-hb > .kit-fbar { height: 40px; gap: 8px; padding-inline: 12px; border-radius: 16px 16px 0 0; }
  .tr-hb > .kit-fbar > b { font-size: 13.5px; }
  .tr-hb .kit-fbar-t, .tr-hb .kit-fbar-back, .tr-hb .kit-fbar-sep, .tr-hb .kit-fbar-ic, .tr-hb .kit-fbar-hist, .tr-hb .kit-fbar-dots, .tr-hb .kit-fbar-save, .tr-hb .kit-rail, .tr-hb .kit-ftools { display: none; }
  .tr-hb .kit-fbar-live { font-size: 12.5px; }
  .tr-hb-body { inset: 40px 0 auto; height: calc(276px + var(--tr-hb-more, 0px)); overflow: hidden; border-radius: 0 0 16px 16px; }
  .tr-hcv .kit-flow { --col-x: 16px; --col-y: 14px; --col-w: 228px; --pan-x: 0px !important; width: 260px; height: calc(276px + var(--tr-hb-more, 0px)); }
  .tr-hub:has([data-node='p'] > .tr-run.on) .kit-flow { --pan-y: calc(var(--top-p, 0px) - 14px); }
  .tr-hub:has([data-node='r'] > .tr-run.on) .kit-flow { --pan-y: calc(var(--top-r, 0px) - 14px); }
  .tr-hub:has([data-node='c'] > .tr-run.on) .kit-flow { --pan-y: calc(var(--top-c, 0px) - 14px); }
  .tr-hub:has([data-node='m'] > .tr-run.on) .kit-flow { --pan-y: calc(var(--top-m, 0px) - 14px); }
  .tr-hub:has([data-node='q'] > .tr-run.on) .kit-flow { --pan-y: calc(var(--top-q, 0px) - 14px); }
  .tr-hcv .kit-flow .kit-note { display: none; }   /* each card of the path fits the window whole */
  .tr-hcv > .kit-fpill { display: none; }
  .tr-hb > .tr-hb-ok.on { display: inline-flex; }
  .tr-hb > .tr-hb-run { inset: calc(344px + var(--tr-hb-more, 0px)) 0 auto; z-index: 5; width: max-content; max-width: 260px; margin-inline: auto; }
  .tr-hb > .tr-vcap span { font-size: 11.5px; }
  /* French: the start's name ("Quelqu'un commente") takes two lines in the 228px column, so the window is one line taller and the card still fits it whole (LF, 2026-10-10) */
  html[lang='fr'] .tr-hb { --tr-hb-more: 18px; }
  .tr-hb > .tr-vcap { top: calc(323px + var(--tr-hb-more, 0px)); }
}

/* ───────────── the hub's doors ───────────── */
.tr-tiles-g, .tr-steps-g, .tr-tools { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.tr-tiles-g { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tr-tile, .tr-step, .tr-tool { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: var(--r-xl); border: var(--hairline) solid var(--line); background: var(--surface); color: inherit; text-decoration: none; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); }
.tr-tile:hover, .tr-step:hover, .tr-tool:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: var(--shadow-card); }
.tr-tile:focus-visible, .tr-step:focus-visible, .tr-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tr-tile-v, .tr-step-v { display: grid; place-items: center; min-height: 132px; padding: var(--s-5) var(--s-4); border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: var(--hairline) solid var(--line-soft); background-color: var(--canvas); background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 45%, transparent) 1px, transparent 1.2px); background-size: 16px 16px; overflow: hidden; }
.tr-tile-v .kit-node, .tr-step-v .kit-node { width: min(100%, 236px); box-shadow: var(--shadow-card); }
.tr-tile-v .kit-node .kit-dot, .tr-step-v .kit-node .kit-dot { display: none; }
.tr-tile-t { display: flex; align-items: center; gap: 10px; padding: var(--s-5) var(--s-5) 0; }
.tr-tile-t b, .tr-step-t b, .tr-tool b { font-size: 16.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.tr-tile-i, .tr-tool-i { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); }
.tr-tile-i .i, .tr-tool-i .i { width: 15px; height: 15px; }
.tr-tile-d { flex: 1; padding: var(--s-2) var(--s-5) 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.tr-tile-f { display: flex; align-items: center; gap: 12px; padding: var(--s-4) var(--s-5) var(--s-5); }
.tr-plat { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-3); }
.tr-plat .i { width: 14px; height: 14px; }
.tr-plat:has(use[href="#i-ig-brand"]) .i { color: var(--instagram); } .tr-plat:has(use[href="#i-messenger-brand"]) .i { color: var(--facebook); }
.tr-go { margin-inline-start: auto; width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease); }
.tr-go .i { width: 15px; height: 15px; }
a:hover .tr-go { background: var(--accent-soft); color: var(--accent-ink); transform: translateX(2px); }
[dir='rtl'] .tr-go .i { transform: scaleX(-1); }
.tr-grps { display: grid; gap: var(--s-12); }
.tr-grp { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.tr-grp-h { position: sticky; top: calc(var(--nav-stack, 96px) + 24px); padding-top: var(--s-2); }
.tr-grp-h h3 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); }
.tr-grp-h p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.tr-steps-g { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tr-step-v { min-height: 116px; }
.tr-step-t { flex: 1; display: grid; align-content: start; gap: 4px; padding: var(--s-4) var(--s-5) var(--s-5); padding-inline-end: 52px; }
.tr-step-t span { font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.tr-step > .tr-go { position: absolute; right: var(--s-4); bottom: var(--s-4); }
.tr-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tr-tool { gap: var(--s-3); padding: var(--s-5); padding-bottom: 56px; }
.tr-tool > span:not([class]) { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.tr-tool > .tr-go { position: absolute; right: var(--s-4); bottom: var(--s-4); }
.tr-after { max-width: 72ch; margin: var(--s-8) auto 0; text-align: center; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.tr-after a, .kit-cap a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.tr-after a:hover { text-decoration-color: currentColor; }
@media (max-width: 1180px) { .tr-tiles-g, .tr-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tr-steps-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .tr-grp { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } .tr-grp-h { position: static; } }
@media (max-width: 640px) { .tr-tiles-g, .tr-tools, .tr-steps-g { grid-template-columns: minmax(0, 1fr); } .tr-after { text-align: start; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .tr-tile, .tr-step, .tr-tool, .tr-go { transition: none; } .tr-pulse { display: none; } }

/* the hub's start tiles: a start card title wraps to two lines rather than cutting the app's own wording ("Someone sends you a message"; QA round 2) */
.tr-tile-v .kit-node-t b { white-space: normal; overflow: visible; text-overflow: clip; }

/* phones, round 2 (QA2 P-2; agent S, 2026-10-07): a surface switch is a cross-fade over a solid surface, never through a
   blank stage: the surface that leaves stays in place under the one that arrives until it is fully in (0.3s). */
@media (max-width: 860px) {
  .tr-st .tr-cv, .tr-st .tr-phw { z-index: 0; transition: visibility 0s linear 0.3s, z-index 0s linear 0.3s; }
  .tr-st .tr-cv { background-color: var(--surface); }
  .tr-st:has(> .tr-vm.on) .tr-cv, .tr-st:not(:has(> .tr-vm.on)) .tr-phw { transition-delay: 0s; z-index: 2; animation: tr-xf 0.3s linear; }
  /* hold, then cut (QA pass 3 L-1 and pass 4; agent F2, 2026-10-08). An opacity cross-fade let the leaving surface read
     through the arriving one for 0.3s (two surfaces on top of each other), and an arriving surface that covers at once is
     an empty box while its own parts fade in. So the leaving surface stays ON TOP, whole, for 0.3s while the arriving
     one draws underneath it, then it is gone in one frame: never blank, never two at once. */
  @keyframes tr-xf { from, to { z-index: 1; } }
  /* the loop's restart: the page's script marks the root is-first for the first beat, drawn in the same task that clears
     the last one. Nothing eases in that moment, so the last picture is replaced by the complete first one in one frame
     (without it the last surface would empty itself for 0.3s under the hold, or the first would fade in from a blank). */
  :is(.tr-stage, .tr-hub).is-first, :is(.tr-stage, .tr-hub).is-first *, :is(.tr-stage, .tr-hub).is-first *::before, :is(.tr-stage, .tr-hub).is-first *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  /* a screen or view that REPLACES another inside one surface (the chat over a story, a reel or a profile) arrives whole: the one it replaces leaves in the
     same frame, so an entrance from nothing was a blank surface for a frame or two (agent F2, 2026-10-08) */
  .tr-stage .ps-phone .ig-dm, .tr-stage .ps-phone .tr-ms { animation: none !important; }
}

/* ───────────── hardening (agent H2, 2026-10-07): engines, accessibility, reduced motion, right to left ───────────── */
/* the chat always sits over the screen it replaces: the Comments sheet (z 4) no longer shows above the chat's header
   during the switch (QA2 P-3 / H-11), on a phone and on desktop alike; the status bar (9) stays on top */
.tr-phone .ig-dm, .tr-phone .tr-ms { z-index: 5; }
/* Messenger's notification over Facebook's feed lands at the top of the screen, as the Instagram one does (it was a
   flex child of the feed and sat under the comments) */
@media (min-width: 861px) { .tr-fbapp > .tr-push { position: absolute; top: 50px; inset-inline: 8px; } }
/* a phone: once his own comment is under the ad, the Like / Comment / Share row steps out so his comment is whole */
@media (max-width: 860px) { .is-ad .tr-fbpost:has(.tr-fbc:not(.is-scam).on) .tr-fbacts { display: none; } .is-ad .tr-fbpost:has(.tr-fbc:not(.is-scam).on) .tr-fbcms { padding-top: 2px; } }
/* the hub's start tiles: every tile's card band and title block are one height, whether the app's title wraps or not */
@media (min-width: 641px) { .tr-tile-v { min-height: 158px; } .tr-tile-t { min-height: 71px; } }
/* reduced motion: the still is drawn settled, nothing pops, fades or spins into it */
@media (prefers-reduced-motion: reduce) {
  .tr-stage *, .tr-stage *::before, .tr-stage *::after, .tr-hub *, .tr-hub *::before, .tr-hub *::after { animation: none !important; transition: none !important; }
}
/* contrast (AA 4.5) on the stage's own small labels; the networks' own blues stay theirs, a shade deeper where they carry
   text on a tint (measured: Messenger's button 4.30, the iOS sheet 3.56, the struck scam comment 4.33; Instagram's words go through H0's tokens) */
.tr-stage { --tr-ios: color-mix(in srgb, #007aff, #000 24%); --tr-fbl: color-mix(in srgb, var(--facebook), #000 12%); }
.tr-mbtn { color: var(--tr-fbl); }
.tr-fbc.is-scam:has(.tr-hid.on) .tr-fbb { color: color-mix(in srgb, var(--tr-fbm), #000 22%); }
.tr-fbav { color: color-mix(in srgb, var(--facebook), #000 22%); }
.tr-fbav.is-me, .tr-to-av { color: color-mix(in srgb, var(--instagram) 80%, var(--ink)); }
.tr-mail-from .tr-mail-av { font-size: 13px; color: #fff; }
/* right to left: the drawn scenes (a phone, the canvas, a step card) are pictures of the product in English and stay left
   to right whatever the page's direction; the page's own parts follow the page (logical sides) */
.tr-st, .tr-hb, .tr-tile-v, .tr-step-v { direction: ltr; }
.tr-step > .tr-go, .tr-tool > .tr-go { right: auto; inset-inline-end: var(--s-4); }
[dir='rtl'] a:hover .tr-go { transform: translateX(-2px); }
[dir='rtl'] :is(.tr-tile-v, .tr-step-v) :is(b, span, p) { unicode-bidi: plaintext; }
/* speed: the scene's box has its final size from the first paint (CLS was 0.06 to 0.10 at 1440: the box was 310 x 660
   until the kit's script measured it). The script still sets the scale; these are the same numbers it arrives at. */
.tr-stage .kit-fit.tr-fit { --kit-w: 1100px; --kit-h: 740px; --tr-ar: 1100 / 740; }
.tr-hub .kit-fit.tr-fit { --kit-w: 1380px; --kit-h: 620px; --tr-ar: 1380 / 620; --kit-s: min(0.8638, tan(atan2(100vw - 304px, 1380px))); }
@media (max-width: 860px) {
  .tr-stage .kit-fit.tr-fit { --kit-w: 260px; --kit-h: 340px; --tr-ar: 260 / 340; }
  .tr-hub .kit-fit.tr-fit { --kit-w: 260px; --kit-h: 378px; --tr-ar: 260 / 378; --kit-s: 1; }
}
.kit-fit.tr-fit { width: min(100%, var(--kit-w)); height: auto; aspect-ratio: var(--tr-ar); }
/* the event's dot crosses the wire on the compositor (it animated `left`) */
.tr-pulse { animation-name: tr-go2; }
@keyframes tr-go2 { to { transform: translateX(88px); } }
/* a phone: the loop restarts without fading the stage to nothing (it was blank for about half a second at every
   restart, QA pass 3). The last surface holds until the first is in; the surface cross-fade above does the rest. */
@media (max-width: 860px) { .tr-stage.is-reset .tr-st { opacity: 1; } }