/* ==========================================================================
   Public topic preview link
   --------------------------------------------------------------------------
   Intentionally tiny: the card's primary actions remain Notes / MCQs / Cards.
   The glyph is rendered with CSS/text rather than Font Awesome so production
   cannot lose it because of an icon-library version mismatch.
   ========================================================================== */

.ppl-topicCard {
    position: relative;
}

.ppl-topicPreviewLink {
    position: absolute;
    top: .72rem;
    right: .72rem;
    z-index: 4;

    display: inline-grid;
    place-items: center;

    width: 1.85rem;
    height: 1.85rem;

    border: 1px solid rgba(28, 70, 165, .18);
    border-radius: 999px;

    background: #eef3ff;
    color: #1c46a5;

    text-decoration: none;

    box-shadow: 0 4px 12px rgba(16, 45, 108, .08);

    opacity: .82;

    transition:
        opacity .15s ease,
        transform .15s ease,
        background-color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.ppl-topicPreviewLink__glyph {
    display: block;

    font-family: Arial, Helvetica, sans-serif;
    font-size: .78rem;
    font-weight: 900;
    font-style: normal;
    line-height: 1;

    transform: translateY(-.02rem);
}

.ppl-topicPreviewLink:hover,
.ppl-topicPreviewLink:focus-visible {
    opacity: 1;

    transform: translateY(-1px);

    background: #dfe9ff;

    border-color: rgba(28, 70, 165, .34);

    box-shadow:
        0 7px 16px rgba(16, 45, 108, .13);

    color: #102d6c;

    outline: none;
}

.ppl-topicPreviewLink:focus-visible {
    box-shadow:
        0 0 0 3px rgba(28, 70, 165, .16),
        0 7px 16px rgba(16, 45, 108, .13);
}

html[data-theme="dark"] .ppl-topicPreviewLink {
    background: #1f3c77;
    border-color: rgba(219, 230, 251, .20);
    color: #dcf465;
    box-shadow: none;
}

html[data-theme="dark"] .ppl-topicPreviewLink:hover,
html[data-theme="dark"] .ppl-topicPreviewLink:focus-visible {
    background: #274e9d;
    border-color: rgba(220, 244, 101, .34);
    color: #ffffff;
}

@media (max-width: 575.98px) {
    .ppl-topicPreviewLink {
        top: .62rem;
        right: .62rem;

        width: 1.78rem;
        height: 1.78rem;
    }
}