/* Trace threads (widgets/trace/trace.js) */
.tr { padding: 16px 22px; }
.tr__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tr__p { fill: none; stroke: color-mix(in srgb, var(--ink) 12%, transparent); stroke-width: 1.2; transition: stroke .3s ease; }
.tr__p.is-on { stroke: var(--a-teal); stroke-width: 2.4; }
.tr__cols { position: relative; height: 100%; display: grid; grid-template-columns: max-content 50px minmax(0, 220px) minmax(0, 460px); justify-content: start; gap: 0 34px; }
.tr__col { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.tr__list { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 4px; min-height: 0; }
.tr__col--o .tr__list, .tr__col--i .tr__list { justify-content: space-evenly; }
.tr__c { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border: 0; border-radius: 100px; background: none; text-align: left; transition: background-color .25s ease; }
.tr__c .aha-i { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--a-card); box-shadow: inset 0 0 0 1px var(--a-line); }
.tr__c span { display: flex; flex-direction: column; min-width: 0; }
.tr__c b { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.tr__c i { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr__c:hover .aha-i, .tr__c:focus-visible .aha-i { box-shadow: inset 0 0 0 1.5px var(--ink); }
.tr__c:focus-visible { outline: none; }
.tr__c.is-on .aha-i { background: var(--a-teal); color: #fff; box-shadow: none; }
.tr__o, .tr__i { display: inline-flex; align-items: center; gap: 8px; outline: none; }
.tr__o .aha-i, .tr__i .aha-i { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 8px; background: var(--a-card); box-shadow: inset 0 0 0 1px var(--a-line); color: var(--muted); transition: background-color .3s ease, color .3s ease; }
.tr__o.is-on .aha-i { background: #fbb040; color: #3b2400; box-shadow: none; }
.tr__i .aha-i { border-radius: 2px; }
.tr__i em { font-style: normal; font-size: 11.5px; line-height: 1.2; color: var(--muted); }
.tr__i.is-on .aha-i { background: #a6d75b; color: #1f2a0c; box-shadow: none; }
.tr__i.is-on em { color: var(--ink); font-weight: 600; }
.tr__ev { align-self: stretch; margin: auto 0; display: flex; flex-direction: column; gap: 8px; }
.tr__pink, .tr__blue { margin: 0; padding: 10px 12px; border-radius: 3px; font-size: 12.5px; line-height: 1.35; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.tr__pink { background: #ff5c9d; color: #fff; transform: rotate(-1deg); }
.tr__blue { background: #5cc0ef; color: #0b2c3d; transform: rotate(.8deg) translateX(10px); }
.tr__blue::before { content: '“'; } .tr__blue::after { content: '”'; }
/* Narrow frames (≤ 760px; class set by widgets/aha-kit/kit.js): criterion names only, insight names to the tips. */
.tr.aha--w760 { padding: 12px 14px; }
.aha--w760 .tr__cols { grid-template-columns: max-content 34px 34px minmax(0, 420px); gap: 0 26px; }
.aha--w760 .tr__c i, .aha--w760 .tr__i em { display: none; }
.aha--w760 .tr__c b { font-size: 10.5px; }
.aha--w760 .tr__o .aha-i, .aha--w760 .tr__i .aha-i { width: 26px; height: 26px; padding: 5px; }
.aha--w760 .tr__col .aha-eye { font-size: 9px; }
.tr.aha--w560 .tr__cols { grid-template-columns: 34px 34px 34px minmax(0, 1fr); gap: 0 22px; }
.aha--w560 .tr__c span, .aha--w560 .tr__col:not(.tr__col--e) .aha-eye { display: none; }
.aha--w560 .tr__c { padding: 0; }
/* Stacked: a fixed reading height for the threads. */
.is-vertical .tr__cols { height: auto; min-height: 340px; }