.wsdex-canvas-annotation-popover {
 position: absolute;
 z-index: 12;
 display: grid;
 gap: .55rem;
 width: min(21rem,calc(100% - 1rem));
 max-height: min(26rem,70%);
 padding: .75rem;
 overflow: auto;
 border: 1px solid var(--wsdex-border-strong);
 border-radius: .7rem;
 background: var(--wsdex-tooltip-surface);
 color: var(--wsdex-tooltip-text);
 box-shadow: 0 .8rem 2rem rgba(0,0,0,.28);
 user-select: text;
}

.wsdex-canvas-annotation-popover[hidden] {
 display: none;
}

.wsdex-canvas-annotation-popover__close {
 justify-self: end;
 width: 1.8rem;
 height: 1.8rem;
 padding: 0;
 border: 1px solid var(--wsdex-tooltip-border);
 border-radius: .4rem;
 background: transparent;
 color: inherit;
 font: inherit;
 cursor: pointer;
}

.wsdex-canvas-annotation-popover__close:focus-visible {
 outline: 2px solid var(--wsdex-accent);
 outline-offset: 2px;
}

.wsdex-canvas-annotation-popover__item {
 display: grid;
 gap: .35rem;
}

.wsdex-canvas-annotation-popover__item.has-divider {
 padding-bottom: .6rem;
 border-bottom: 1px solid var(--wsdex-tooltip-border);
}

.wsdex-canvas-annotation-popover h3,
.wsdex-canvas-annotation-popover p,
.wsdex-canvas-annotation-popover dl {
 margin: 0;
}

.wsdex-canvas-annotation-popover dl {
 display: grid;
 gap: .25rem;
}

.wsdex-canvas-annotation-popover dl > div {
 display: grid;
 grid-template-columns: minmax(6rem,.8fr) minmax(0,1.2fr);
 gap: .5rem;
}

.wsdex-canvas-annotation-popover dt {
 color: color-mix(in srgb,currentColor 72%,transparent);
}

.wsdex-canvas-annotation-popover dd {
 margin: 0;
 overflow-wrap: anywhere;
}

@media (max-width: 600px) {
 .wsdex-canvas-annotation-popover {
  position: fixed;
  right: .65rem;
  bottom: .65rem;
  left: .65rem;
  top: auto;
  width: auto;
  max-height: 55dvh;
 }
}