/* ============================================================================
   TR-SHARE-CARD — shared "support by sharing" sidebar widget
   ----------------------------------------------------------------------------
   Promoted verbatim from modules/resource/assets/css/single-resource.css, where
   it shipped as `.resource-share-card` and was reachable only from the Resource
   single template. Every declaration below is the value that file carried; the
   only change is the class name, which moves onto the `tr-*` shared namespace
   required by CLAUDE.md 9.4a for a reusable component.

   Consumers: single Resource, single AI Prompt, single Glossary Term.
   Enqueued by tiorai_enqueue_unified_share_card() — single views only, never
   globally (CLAUDE.md §5 conditional-loading contract).
   ========================================================================== */

/*
 * `color` is declared even though every text child sets its own. Without it the
 * component inherits whatever the host column happens to be — measured as
 * text-secondary inside the Resource sidebar and text-primary inside the
 * Glossary rail — which makes the box context-dependent for any future child
 * that does not set a colour of its own. A shared component should look the same
 * wherever it is dropped.
 */
.tr-share-card {
    color: var(--color-text-secondary);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-default, 20px);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
}

.tr-share-card__headline {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text-primary);
}

.tr-share-card__emoji {
    display: block;
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: var(--space-2);
}

.tr-share-card__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.tr-share-card__copy,
.tr-share-card__bookmark {
    width: 100%;
    justify-content: center;
    gap: var(--space-2);
}

.tr-share-card__copy.is-copied {
    background: var(--color-success, #10a64a);
    border-color: var(--color-success, #10a64a);
}

.tr-share-card__copy-icon,
.tr-share-card__bookmark-icon {
    flex-shrink: 0;
}

/* Bookmark hint toast — collapsed until the JS adds .is-visible. */
.tr-share-card__toast {
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    padding: 0 var(--space-4);
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: center;
    color: var(--color-text-secondary);
    background: var(--surface-interactive, var(--color-bg-tertiary));
    border: 0 solid var(--border-default);
    border-radius: var(--radius-md, 12px);
    transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.2s ease, padding 0.25s ease;
}

.tr-share-card__toast.is-visible {
    max-height: 120px;
    opacity: 1;
    transform: none;
    padding: var(--space-3) var(--space-4);
    border-width: 1px;
}

.tr-share-card__socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

.tr-share-card__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--border-default);
    background: var(--surface-base, transparent);
    color: var(--color-text-secondary);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.tr-share-card__social:hover,
.tr-share-card__social:focus-visible {
    color: var(--color-text-primary);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.tr-share-card__social--twitter:hover,
.tr-share-card__social--twitter:focus-visible  { color: #fff; background: #000000; border-color: #000000; }
.tr-share-card__social--facebook:hover,
.tr-share-card__social--facebook:focus-visible { color: #fff; background: #1877f2; border-color: #1877f2; }
.tr-share-card__social--linkedin:hover,
.tr-share-card__social--linkedin:focus-visible { color: #fff; background: #0a66c2; border-color: #0a66c2; }
.tr-share-card__social--whatsapp:hover,
.tr-share-card__social--whatsapp:focus-visible { color: #fff; background: #25d366; border-color: #25d366; }

/*
 * Reduced motion: the two transforms above are the only movement in the
 * component. The colour change carries the same information, so it stays.
 */
@media (prefers-reduced-motion: reduce) {
    .tr-share-card__toast,
    .tr-share-card__social {
        transition: none;
    }

    .tr-share-card__social:hover,
    .tr-share-card__social:focus-visible {
        transform: none;
    }
}