.distance-notice-trigger {
    anchor-name: --distance-notice;
    cursor: pointer;
    text-decoration: underline dotted;
    color: var(--text-link);

    &:hover { text-decoration-style: solid }
}

.distance-notice-popover {
    position: fixed;
    inset: auto;
    position-anchor: --distance-notice;
    top: anchor(bottom);
    left: anchor(left);
    translate: 0 0.25rem;
    position-try-fallbacks: flip-block, flip-inline;

    margin: 0;
    max-inline-size: 35ch;
    border: 1px solid var(--border-subtle);
    border-radius: 0.25rem;
    box-shadow: var(--facet-shadow);
    padding: 0.75rem 1rem;
    color: var(--text-on-field);
    background: var(--surface-raised);

    &::backdrop { background: transparent }

    p { margin-block: 0 0.5rem }

    a {
        text-decoration: underline;
        color: var(--text-link);
    }
}