/* Interpersonal ties lesson. All rules scoped under .tie-* */
.tie-hero img { width: 300px; max-width: 100%; max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

.tie-bars { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.tie-brow { display: grid; grid-template-columns: 104px 1fr 44px; align-items: center; gap: 8px; font: 600 14px var(--sans); color: var(--text); }
.tie-btrack { height: 18px; border-radius: 9px; background: var(--raised); border: 1px solid var(--line-strong); overflow: hidden; }
.tie-btrack i { display: block; height: 100%; width: 0; background: var(--mint); border-radius: 9px; }
.tie-brow b { font: 700 15px var(--sans); color: var(--mint); text-align: right; }
.tie-bnote { font: 500 13px var(--sans); color: var(--dim); text-align: center; }

.tie-net { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 4px; }
.tie-key { display: flex; justify-content: center; gap: 18px; font: 500 13px var(--sans); color: var(--dim); }
.tie-key span { display: flex; align-items: center; gap: 6px; }
.tie-key i { display: inline-block; width: 22px; height: 0; }
.tie-ks { border-top: 4px solid rgba(169,155,255,.75); }
.tie-kw { border-top: 2px dashed rgba(169,155,255,.75); }
.tie-svg { display: block; width: 100%; height: auto; overflow: visible; }
.tie-strong { stroke: rgba(169,155,255,.55); stroke-width: 4; transition: stroke .4s; }
.tie-strong.tie-lit { stroke: var(--gold); }
.tie-weak { stroke: rgba(169,155,255,.75); stroke-width: 2; stroke-dasharray: 5 5; }
.tie-far { opacity: 0; transition: opacity .6s; }
.tie-far.tie-show { opacity: 1; }
.tie-far.tie-ghost { opacity: .4; }
line.tie-far { stroke: var(--mint); stroke-width: 2; }
.tie-new { fill: var(--mint); }
.tie-job { fill: var(--gold); font: 700 15px var(--sans); text-anchor: middle; }
.tie-me circle { fill: var(--gold); }
.tie-me text { fill: #2A2216; font: 700 14.5px var(--sans); text-anchor: middle; }
.tie-node { cursor: pointer; }
.tie-hit { fill: transparent; }
.tie-dot { fill: #3A3160; stroke: var(--violet-bright); stroke-width: 2.5; transition: fill .3s; }
.tie-close .tie-dot { fill: var(--violet); }
.tie-asked .tie-dot { stroke: var(--gold); stroke-width: 4; }
.tie-node text { fill: var(--text); font: 600 15.5px var(--sans); text-anchor: middle; }
.tie-node text.tie-l { text-anchor: start; }
.tie-node text.tie-r { text-anchor: end; }
.tie-node text.tie-sub { fill: var(--dim); font-weight: 500; font-size: 14.5px; }
.tie-read { text-align: center; font: 500 14px var(--sans); color: var(--dim); }
.tie-read b { color: var(--gold); }