/* popups.css — Hover preview popup styles. */

/* ============================================================
   POPUP CONTAINER
   Absolutely positioned, single shared element.
   ============================================================ */

.link-popup {
    position: absolute;
    z-index: 500;
    max-width: 420px;
    min-width: 200px;
    padding: 0.7rem 0.9rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.09);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.55;
    pointer-events: auto;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.14s ease, visibility 0.14s ease;
}

.link-popup.is-visible {
    opacity: 1;
    visibility: visible;
}


/* ============================================================
   SHARED POPUP CONTENT
   ============================================================ */

/* Internal-page popups with a monogram render in two columns:
   the monogram on the left, title + abstract + meta on the right.
   Without a monogram, the body fills normally (default block flow). */
.popup-internal.has-monogram {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
}

/* Source label spans both columns when a monogram is present so it
   reads as the popup's source attribution, not as a column entry. */
.popup-internal.has-monogram > .popup-source {
    grid-column: 1 / -1;
}

.popup-monogram {
    grid-column: 1;
    line-height: 0;
    color: var(--text);
}

.popup-monogram svg {
    display: block;
    width: 100%;
    height: auto;
    color: inherit;
}

.popup-internal-body {
    grid-column: 2;
    min-width: 0;
}

.popup-title {
    font-weight: 600;
    color: var(--text);
    font-size: 0.82rem;
    margin-bottom: 0.3rem;
    line-height: 1.35;
}

.popup-abstract,
.popup-extract {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.55;
}

/* Source label ("Wikipedia", "arXiv") and tag line in internal popups */
.popup-source,
.popup-tags {
    display: flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.65rem;
    font-weight: 600;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.07em;
    color: var(--text-faint);
    margin-bottom: 0.25rem;
}

/* Icon preceding the source label — same mask-image technique as inline link icons */
.popup-source[data-popup-source]::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width:  0.85em;
    height: 0.85em;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    opacity: 0.7;
}

.popup-source[data-popup-source="wikipedia"]::before {
    mask-image: url('/images/link-icons/wikipedia.svg');
    -webkit-mask-image: url('/images/link-icons/wikipedia.svg');
}
.popup-source[data-popup-source="arxiv"]::before {
    mask-image: url('/images/link-icons/arxiv.svg');
    -webkit-mask-image: url('/images/link-icons/arxiv.svg');
}
.popup-source[data-popup-source="doi"]::before {
    mask-image: url('/images/link-icons/doi.svg');
    -webkit-mask-image: url('/images/link-icons/doi.svg');
}
.popup-source[data-popup-source="github"]::before {
    mask-image: url('/images/link-icons/github.svg');
    -webkit-mask-image: url('/images/link-icons/github.svg');
}
.popup-source[data-popup-source="forgejo"]::before {
    mask-image: url('/images/link-icons/forgejo.svg');
    -webkit-mask-image: url('/images/link-icons/forgejo.svg');
}
.popup-source[data-popup-source="youtube"]::before {
    mask-image: url('/images/link-icons/youtube.svg');
    -webkit-mask-image: url('/images/link-icons/youtube.svg');
}
.popup-source[data-popup-source="internet-archive"]::before {
    mask-image: url('/images/link-icons/internet-archive.svg');
    -webkit-mask-image: url('/images/link-icons/internet-archive.svg');
}
.popup-source[data-popup-source="biorxiv"]::before,
.popup-source[data-popup-source="medrxiv"]::before {
    mask-image: url('/images/link-icons/arxiv.svg');
    -webkit-mask-image: url('/images/link-icons/arxiv.svg');
}
.popup-source[data-popup-source="openlibrary"]::before {
    mask-image: url('/images/link-icons/worldcat.svg');
    -webkit-mask-image: url('/images/link-icons/worldcat.svg');
}
.popup-source[data-popup-source="pubmed"]::before {
    mask-image: url('/images/link-icons/orcid.svg');
    -webkit-mask-image: url('/images/link-icons/orcid.svg');
}
.popup-source[data-popup-source="internal"]::before {
    mask-image: url('/images/link-icons/internal.svg');
    -webkit-mask-image: url('/images/link-icons/internal.svg');
}

/* Author list (arXiv, DOI, GitHub, etc.) */
.popup-authors {
    font-size: 0.75rem;
    color: var(--text-faint);
    margin-bottom: 0.3rem;
    font-style: italic;
}

/* Journal / year / language / stars line */
.popup-meta {
    font-size: 0.72rem;
    color: var(--text-faint);
    margin-bottom: 0.3rem;
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   CITATION POPUP
   Shows the .csl-entry from the bibliography in-page.
   ============================================================ */

.popup-citation-entry {
    display: block;
}

.popup-citation-entry + .popup-citation-entry {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
}

.popup-citation .csl-entry {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
    /* Override the hanging-indent style used in the bibliography list */
    padding-left: 0;
    text-indent: 0;
    margin-bottom: 0;
}

.popup-citation .csl-entry a {
    color: var(--text-faint);
    word-break: break-all;
}

.popup-citation .ref-num {
    font-weight: 600;
    color: var(--text-faint);
    margin-right: 0.35em;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.popup-citation .ref-num:hover {
    color: var(--text);
}

/* Epistemic preview popup — content cloned from #epistemic; ep-* styles inherited */
.popup-epistemic {
    min-width: 230px;
}

/* Epistemic term definition popup — shown on hover for filter labels,
   metadata strip items, and footer DT elements. */
[data-ep-term] {
    cursor: help;
}

.popup-ep-term {
    max-width: 320px;
}

.popup-ep-term .popup-source a {
    color: inherit;
    text-decoration: none;
}
.popup-ep-term .popup-source a:hover {
    text-decoration: underline;
}

/* PDF thumbnail popup — first-page image generated by pdftoppm at build time */
.link-popup:has(.popup-pdf) {
    padding: 0;
    overflow: hidden;
}

.popup-pdf {
    line-height: 0; /* collapse whitespace gap below <img> */
}

.popup-pdf-thumb {
    display: block;
    width: 320px;
    max-width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    object-position: top left;
}

/* ============================================================
   SOURCE-FILE PREVIEW POPUP
   Shown on hover for inline `path/to/file` references and for
   Markdown links to the Forgejo source viewer (see
   build/Filters/SourceRefs.hs). The body is fetched from
   /source/<path> and Prism-highlighted client-side.
   ============================================================ */

.link-popup:has(.popup-source-code) {
    max-width: 560px;
    padding: 0;
    overflow: hidden;
}

.popup-source-code {
    display: block;
}

/* Header strip naming the file. Doubles as a visual seam between the
   chrome (border, padding) and the code body below. */
.popup-source-path {
    padding: 0.45rem 0.65rem 0.4rem;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-faint);
    word-break: break-all;
    background: var(--bg);
}

.popup-source-pre {
    margin: 0;
    padding: 0.55rem 0.65rem;
    max-height: 360px;
    overflow: auto;
    background: var(--bg);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--text);
    white-space: pre;
    border: none;
    border-radius: 0;
}

.popup-source-pre code {
    background: transparent;
    padding: 0;
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    white-space: pre;
}

/* "N more lines · view full file →" — visually parallel to the path
   header strip; together they bracket the code body. */
.popup-source-truncated {
    padding: 0.4rem 0.65rem;
    border-top: 1px solid var(--border);
    font-size: 0.65rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.07em;
    color: var(--text-faint);
    background: var(--bg);
}

/* Inline source-ref link styling: keep the inline-code chrome of the
   wrapped <code> intact and resist the link-classifier's external/
   internal stamp (Filters.Links explicitly skips us). The hover hint
   is a faint dotted underline — same convention as date-hover and
   epistemic-term cues. */
a.source-ref {
    color: inherit;
    text-decoration: none;
}

a.source-ref:hover {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--border-muted);
    text-underline-offset: 0.2em;
}

a.source-ref code {
    /* The underlying inline-code styling is inherited from typography.css;
       this rule exists only to ensure the link wrapper does not fight it. */
    color: inherit;
}

/* PGP signature popup */
.popup-sig pre {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    line-height: 1.45;
    white-space: pre;
    overflow-x: auto;
    color: var(--text-muted);
}

/* ============================================================
   DATE POPUP — compact, humanised span + "ago" framing, plus
   optional cadence line for the frontmatter history link.
   ============================================================ */

.link-popup:has(.popup-date) {
    min-width: 0;
    max-width: 260px;
    padding: 0.5rem 0.7rem;
}

.popup-date {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.popup-date-primary {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.popup-date-cadence {
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.05em;
    color: var(--text-faint);
}

/* Subtle cue that the date is interactive. Dotted underline is the standard
   convention for explanatory hover; kept faint so it doesn't shout. */
.date-hover {
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--border-muted);
    text-underline-offset: 0.2em;
}

/* Don't decorate container elements (li, dd, time) that already fit into
   a list with their own layout — the text decoration looks noisy on them. */
li.date-hover,
dd.date-hover {
    text-decoration: none;
    cursor: help;
}
