/* ============================================================


   AIC Popover — floating card styling


   Uses AIC shared-ui design tokens (--pa-paper, --pa-ink, etc)


   ============================================================ */





/* Trigger styling — dotted underline convention for glossary terms */


.pa-term {


    color: inherit;


    text-decoration: none;


    border-bottom: 1px dotted var(--pa-ink-soft, #8a7f70);


    cursor: help;


    transition: border-color 0.15s ease;


}


.pa-term:hover,


.pa-term:focus {


    border-bottom-color: var(--pa-accent, #2D5016);


    border-bottom-style: solid;


}





/* Pill triggers keep their pill look but add the dotted cue */


.sam-pill[data-sa-popover] {


    cursor: help;


    position: relative;


}


.sam-pill[data-sa-popover]::after {


    content: '';


    position: absolute;


    left: 10%;


    right: 10%;


    bottom: 4px;


    height: 0;


    border-bottom: 1px dotted currentColor;


    opacity: 0.4;


}





/* External-link triggers get no underline addition — the link itself is underlined */


a[data-sa-popover] {


    cursor: pointer;


}





/* ============================================================


   Floating card


   ============================================================ */


.pa-popover {


    position: absolute;


    z-index: 99999;


    max-width: 320px;


    min-width: 220px;


    padding: 14px 16px;


    background: var(--pa-paper, #f6efe2);


    color: var(--pa-ink, #2b2620);


    border: 1px solid var(--pa-rule, #d9ccb0);


    border-radius: 6px;


    box-shadow: 0 4px 18px rgba(40, 30, 15, 0.14),


                0 1px 4px rgba(40, 30, 15, 0.08);


    font-family: var(--pa-font-body, 'Inter', system-ui, sans-serif);


    font-size: 14px;


    line-height: 1.5;


    opacity: 0;


    transform: translateY(4px);


    transition: opacity 0.14s ease, transform 0.14s ease;


    pointer-events: none;


}


.pa-popover.is-open {


    opacity: 1;


    transform: translateY(0);


    pointer-events: auto;


}





/* Typography inside popover */


.pa-popover p {


    margin: 0 0 8px 0;


}


.pa-popover p:last-child {


    margin-bottom: 0;


}


.pa-popover strong {


    color: var(--pa-ink, #2b2620);


    font-weight: 600;


}


.pa-popover a {


    color: var(--pa-accent, #2D5016);


    text-decoration: underline;


    text-underline-offset: 2px;


}





/* "Read more" glossary link */


.pa-popover-more {


    display: inline-block;


    margin-top: 6px;


    font-size: 13px;


    font-weight: 500;


    letter-spacing: 0.02em;


}





/* Loading / error states */


.pa-popover-loading,


.pa-popover-error {


    color: var(--pa-ink-soft, #6d6459);


    font-style: italic;


    font-size: 13px;


    text-align: center;


    padding: 4px 0;


}





/* ============================================================


   Link preview card


   ============================================================ */


.pa-popover-preview {


    margin: -14px -16px; /* tight against card edges */


}


.pa-popover-preview-image {


    height: 110px;


    background: var(--pa-gold-soft, #ece1c2) center/cover no-repeat;


    border-bottom: 1px solid var(--pa-rule, #d9ccb0);


    border-radius: 6px 6px 0 0;


}


.pa-popover-preview-body {


    padding: 12px 16px 14px;


}


.pa-popover-preview-site {


    display: flex;


    align-items: center;


    gap: 6px;


    font-size: 12px;


    color: var(--pa-ink-soft, #6d6459);


    text-transform: uppercase;


    letter-spacing: 0.06em;


    margin-bottom: 4px;


}


.pa-popover-preview-site img {


    border-radius: 2px;


}


.pa-popover-preview-title {


    font-family: var(--pa-font-display, 'Playfair Display', serif);


    font-size: 16px;


    font-weight: 600;


    color: var(--pa-ink, #2b2620);


    line-height: 1.3;


    margin-bottom: 6px;


}


.pa-popover-preview-desc {


    font-size: 13px;


    color: var(--pa-ink-soft, #4c453d);


    line-height: 1.45;


    display: -webkit-box;


    -webkit-line-clamp: 3;


    -webkit-box-orient: vertical;


    overflow: hidden;


}





/* ============================================================


   Mobile


   ============================================================ */


@media (max-width: 600px) {


    .pa-popover {


        max-width: calc(100vw - 24px);


        font-size: 15px;


    }


    .pa-popover-preview-image {


        height: 90px;


    }


}





/* Reduced motion */


@media (prefers-reduced-motion: reduce) {


    .pa-popover {


        transition: opacity 0.01s;


        transform: none;


    }


}