/* A quiet recommendation within the matching screen, using the active theme. */
.loading-invitation {
    order: 4;
    display: grid;
    grid-template-columns: minmax(0, 100px) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding-top: 20px;
    border-top: 1px solid var(--border-secondary, #3a3a3a);
    text-align: left;
    color: var(--text-primary, #f4f0e6);
}
.loading-invitation-art { display: block; border-radius: 12px; overflow: hidden; }
.loading-invitation-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; }
.loading-invitation-copy { min-width: 0; }
.loading-invitation-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--text-secondary, #9a9a9a);
    font: 500 10px/1.4 Inter, system-ui, sans-serif;
}
.loading-invitation h3 {
    margin: 0 0 7px;
    color: inherit;
    font: 700 17px/1.2 "Comic Neue", "Comic Sans MS", cursive;
}
.loading-invitation p {
    margin: 0 0 9px;
    color: var(--text-secondary, #9a9a9a);
    font: 400 11px/1.5 Inter, system-ui, sans-serif;
}
.loading-invitation-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    color: var(--accent-primary, #f4f0e6);
    font: 600 12px/1.4 Inter, system-ui, sans-serif;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.loading-invitation-link:hover { text-decoration-thickness: 2px; }
.loading-invitation a:focus-visible { outline: 2px solid var(--accent-primary, #f4f0e6); outline-offset: 4px; }
.loading-invitation-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body[data-theme="inkpaw"] .loading-invitation h3 { font-family: "Klee One", cursive; font-size: 16px; }
body[data-theme="neon"] .loading-invitation-art { border-radius: 7px; }
#loadingOverlay .loading-content { max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box; }
@media (max-width: 350px) {
    .loading-invitation { grid-template-columns: minmax(0, 80px) minmax(0, 1fr); gap: 10px; }
    .loading-invitation h3 { font-size: 15px; }
}