.thr{display:grid;gap:0;min-width:0}
.thr > *{min-width:0}

/* ------------------------------------------------------------ disclaimer */
.thr__badge{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem;
  padding:.7rem clamp(.9rem,2.2vw,1.4rem);border-bottom:1px solid var(--line);
  font-size:.76rem;line-height:1.5;color:var(--text-4);
}
.thr__badge b{
  font-family:var(--mono);font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);border:1px solid var(--amber-deep);padding:.16rem .45rem;border-radius:2px;flex:none;
}

/* ---------------------------------------------------------------- field */
.thr__field{
  --card:13.5rem;--half:7.4rem;
  position:relative;display:grid;grid-template-rows:1fr auto;gap:1.1rem;
  padding:clamp(1rem,2.6vw,1.8rem);
  background:var(--surface);
  overflow:hidden;
}

/* the boundary: everything inside it is what changed hands */
.thr__inside{
  min-width:0;position:relative;min-height:clamp(26rem,40vw,33rem);
  border:1px dashed var(--line-2);border-radius:8px;
  background:radial-gradient(90% 70% at 50% 45%,rgba(90,210,255,.05),transparent 70%);
}
.thr__fence-lab{
  position:absolute;left:1rem;top:-.6rem;z-index:5;
  font-size:.55rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--cyan);background:var(--surface);padding:0 .55rem;
}
.thr__links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}

.thr__link{
  fill:none;stroke:var(--slate);stroke-width:1.05;opacity:.42;
  transition:stroke var(--dur-2) var(--ease),stroke-width var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease);
}
.thr__link.is-deid{stroke:var(--cyan);opacity:.62;stroke-width:1.35}
.thr__link.is-hot{stroke:var(--yellow);stroke-width:2;opacity:1}
.thr__link--out{stroke:var(--red);stroke-width:1.5;stroke-dasharray:2 5;stroke-linecap:round;opacity:.95}
.thr.is-hovering .thr__link:not(.is-hot):not(.thr__link--out){opacity:.16}
.thr.is-exposed .thr__link.is-deid{opacity:.75}

/* ---------------------------------------------------------------- nodes */
.thr__node{
  /* clamped so a card centred near the edge can never escape the field */
  position:absolute;
  left:clamp(var(--half),var(--x),calc(100% - var(--half)));
  top:clamp(3.4rem,var(--y),calc(100% - 3.4rem));
  transform:translate(-50%,-50%);
  z-index:2;width:var(--card);max-width:44vw;
  display:grid;gap:.2rem;text-align:left;padding:.65rem .72rem;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius);
  box-shadow:0 8px 26px -18px #000;
  transition:opacity var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),
             background var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease);
}
.thr__node:hover,.thr__node.is-focus{border-color:var(--yellow);background:var(--surface-3);z-index:4;box-shadow:0 10px 30px -14px #000}
.thr__node.is-focus{transform:translate(-50%,-50%) scale(1.035)}
.thr__node.is-near{border-color:var(--cyan);z-index:3}
.thr__node.is-dim{opacity:.34}
.thr__node:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--yellow)}

.thr__sys{font-size:.55rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);opacity:.8}
.thr__type{font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--text);line-height:1.25}
.thr__who{display:block;min-height:1.15rem;position:relative}
.thr__name{font-size:.78rem;color:var(--yellow-2);font-weight:500}
.thr__name::after{background:var(--text-2)}
.thr__token{
  display:none;font-size:.62rem;letter-spacing:.02em;color:var(--cyan);
  border:1px solid var(--cyan-deep);border-radius:2px;padding:.06rem .3rem;
}
.thr__node.is-deid .thr__token{display:inline-block}
.thr__node.is-deid .thr__name{position:absolute;left:0;top:0;font-size:.78rem}
.thr__node.is-exposed .thr__name{color:var(--red-2);position:static}
.thr__node.is-exposed .thr__token{opacity:.4}

.thr__line{font-size:.7rem;line-height:1.4;color:var(--text-3)}
.thr__meta{font-size:.56rem;letter-spacing:.08em;color:var(--text-4)}

/* --------------------------------------------------------- outside node */
.thr__outside{
  position:static;transform:none;width:auto;max-width:none;
  justify-self:center;min-width:min(100%,24rem);
  background:rgba(76,26,20,.3);border:1px dashed var(--red);
  opacity:0;height:0;padding-block:0;overflow:hidden;border-width:0;
  transition:opacity var(--dur-2) var(--ease);
}
.thr__outside.is-on{opacity:1;height:auto;padding:.7rem .85rem;border-width:1px}
.thr__outside .thr__sys{color:var(--red)}
.thr__outside .thr__type{color:var(--red-2)}
.thr__out-list{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;margin-top:.25rem}
.thr__out-list li{font-size:.63rem;line-height:1.35;color:var(--text-2);padding-left:.6rem;position:relative}
.thr__out-list li::before{content:"";position:absolute;left:0;top:.5em;width:.25rem;height:.25rem;border-radius:100px;background:var(--red)}

/* -------------------------------------------------------------- control */
.thr__ctrl{
  display:grid;gap:clamp(1rem,2.5vw,2rem);grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  padding:clamp(1rem,2.4vw,1.5rem);border-top:1px solid var(--line);align-items:start;
}
.thr__ctrl-a{display:grid;gap:1.1rem;min-width:0}
.thr__ctrl > *{min-width:0}

.thr__facts{display:grid;gap:.55rem;min-width:0;transition:opacity var(--dur-2) var(--ease)}
.thr__facts.is-off{opacity:.45}
.thr__facts-lab{color:var(--text-4)}
.thr__facts-hint{font-size:.76rem;line-height:1.5;color:var(--text-4);max-width:48ch}
.thr__fact .chip__dot{color:var(--line-2)}
.thr__fact[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#1a0603}
.thr__fact[aria-pressed="true"] .chip__dot{color:#1a0603}
.thr__fact:disabled{opacity:.5;cursor:not-allowed}

.thr__pool{
  display:grid;gap:.3rem;align-content:start;
  border-left:2px solid var(--line-2);padding-left:1.1rem;
  transition:border-color var(--dur-2) var(--ease);
}
.thr.is-exposed .thr__pool{border-left-color:var(--red)}
.thr__pool-l{color:var(--text-4);line-height:1.5}
.thr__pool-v{
  font-size:clamp(2.4rem,6vw,3.6rem);line-height:1;letter-spacing:-.05em;font-weight:500;
  color:var(--text);transition:color var(--dur-2) var(--ease);
}
.thr__pool-v.is-one{color:var(--red)}
.thr__pool-n{font-size:.82rem;line-height:1.55;color:var(--text-3);max-width:40ch;margin-top:.2rem}
.thr__pool-n b{color:var(--red-2)}

/* ============================ NARROW VARIANT ============================
   Same threads, same link-drawing code — the cards simply leave absolute
   positioning and become a single measured column. */
@media (max-width:820px){
  .thr__field{gap:.9rem;padding:1rem .9rem}
  .thr__inside{
    min-height:0;display:grid;gap:.75rem;padding:1.3rem .7rem 1rem .5rem;
  }
  .thr__node{
    position:static;transform:none;width:auto;max-width:none;margin-left:2.5rem;
  }
  .thr__node.is-focus{transform:none}
  .thr__outside{min-width:0;margin-left:0}
  /* long labels must wrap on a phone; .chip is nowrap by default */
  .thr__fact{white-space:normal;text-align:left;line-height:1.35;padding-block:.55rem}
  .thr__facts .ctrls{flex-direction:column;align-items:stretch}
  .thr__node.is-dim{opacity:.55}
  .thr__ctrl{grid-template-columns:1fr;gap:1.3rem}
  .thr__pool{border-left:0;border-top:1px solid var(--line-2);padding-left:0;padding-top:1rem}
  .thr__fact{min-height:2.5rem}
  .thr__badge{font-size:.72rem}
}