/* css/share.css — Share-as-Image + Shareable Permalink (additive, self-contained).
   Per-card Share controls are INJECTED by js/features/share-export.js via a
   MutationObserver on #results-container (same pattern as the compat badges).
   The PNG is generated on an OFFSCREEN canvas; nothing here renders user/styled
   text as HTML. Reuses brand tokens from main.css; respects prefers-reduced-motion.

   Coexistence: the compatibility badge owns the card's TOP-RIGHT corner
   (position:absolute; top/right; z-index:2). These Share controls live at the
   BOTTOM-RIGHT (z-index:3) inside the card's overflow:hidden clip, so they never
   collide with the badge and never disturb the card's flex flow → no CLS. */

/* ── Per-card action cluster ── */
.share-actions {
    position: absolute;
    bottom: var(--s-xl);          /* aligns to the card's padding/action-row baseline */
    right: var(--s-xl);
    z-index: 3;
    display: inline-flex;
    gap: 6px;
    /* Desktop default: a quiet RESTING affordance (not fully hidden). Share is the
       referral lever — a feature nobody can see can't go viral. A low-opacity hint
       at rest signals "something's here," then lifts to full on hover/focus.
       Kept reachable for keyboard via :focus-within below — never display:none. */
    opacity: 0.35;
    transform: translateY(2px);
    pointer-events: auto;
    transition: opacity var(--t-fast), transform var(--t-fast);
}
.font-card:hover .share-actions,
.font-card:focus-within .share-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.share-btn {
    /* 44px touch target even though the glyph is small. */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    font-size: 1rem;
    line-height: 1;
    color: var(--c-text-secondary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--c-border);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast),
                border-color var(--t-fast), transform var(--t-fast),
                box-shadow var(--t-fast);
}
.share-btn:hover {
    background: var(--grad-brand);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(255, 45, 120, 0.3);
    transform: translateY(-1px);
}
.share-btn:active { transform: scale(0.95); }
.share-btn:focus-visible { outline: 2px solid var(--c-pink); outline-offset: 2px; }
.share-btn__icon {
    pointer-events: none;        /* clicks resolve to the button, not the span */
    transition: transform var(--t-fast), color var(--t-fast);
}

/* ── In-flight (image render): subtle pressed/busy state + cue not to double-tap.
      Pairs with aria-busy="true" set in JS. ── */
.share-btn--busy {
    opacity: 0.7;
    cursor: progress;
}
.share-btn--busy .share-btn__icon { animation: shareBusyPulse 0.9s ease-in-out infinite; }
@keyframes shareBusyPulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* ── Success confirm: a restrained cyan pop on the button the user touched —
      ties feedback to where attention already is (the centred toast does not).
      Reuses the brand cyan of the restore-target so the success language is
      consistent across the module. ── */
.share-btn--done {
    color: var(--c-cyan);
    border-color: var(--c-cyan);
    box-shadow: 0 0 0 1px var(--c-cyan), 0 0 16px rgba(6, 214, 160, 0.35);
}
.share-btn--done .share-btn__icon {
    color: var(--c-cyan);
    animation: shareDonePop 0.45s ease;
}
@keyframes shareDonePop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* ── Touch / no-hover: controls always visible (never gate actions behind hover). ── */
@media (hover: none) {
    .share-actions { opacity: 1; transform: none; pointer-events: auto; }
    /* backdrop-filter is a continuous compositor cost; on touch every card's
       cluster is painted at once, which can drop scroll FPS on low-end Android.
       Use a solid-enough background instead — visually equivalent at rest. */
    .share-btn {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(20, 20, 35, 0.72);
    }
}
@media (max-width: 600px) {
    .share-actions {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        /* Lift the always-visible cluster ABOVE the full-width Copy row so the two
           44px buttons never overlay Copy (the existing primary conversion path)
           and there's no tap ambiguity on the most important card action. */
        bottom: auto;
        top: calc(10px + 22px + 8px);   /* just under the compat badge (22px @ top:10px) */
        right: var(--s-lg);
    }
}

/* ── Permalink-restore target highlight (its own class — decoupled from the
      compat module's classes). Cyan ring pulse, on-brand. ── */
.share-card--target {
    border-color: var(--c-cyan) !important;
    box-shadow: 0 0 0 2px var(--c-cyan), 0 0 28px rgba(6, 214, 160, 0.35) !important;
    animation: shareTargetPulse 1.2s ease;
}
@keyframes shareTargetPulse {
    0%   { box-shadow: 0 0 0 2px var(--c-cyan), 0 0 0 rgba(6, 214, 160, 0); }
    50%  { box-shadow: 0 0 0 2px var(--c-cyan), 0 0 32px rgba(6, 214, 160, 0.45); }
    100% { box-shadow: 0 0 0 2px var(--c-cyan), 0 0 28px rgba(6, 214, 160, 0.35); }
}

/* The page-level "Copy link" control (#share-link-btn) reuses .toolbar-btn from
   components.css — no rule needed here. */

/* ── Reduced motion: kill transforms/animation (the global reset already
      neutralises durations; mirror compatibility.css for safety). ── */
@media (prefers-reduced-motion: reduce) {
    .share-actions { transition: none; transform: none; }
    .share-btn,
    .share-btn:active,
    .share-btn:hover { transition: none; transform: none; }
    .share-btn__icon { transition: none; }
    .share-card--target { animation: none; }
    /* Degrade the micro-states to an INSTANT color flip — confirmation never
       depends on motion, but it must not disappear for reduced-motion users. */
    .share-btn--busy .share-btn__icon,
    .share-btn--done .share-btn__icon { animation: none; transform: none; }
    .share-btn--done { box-shadow: 0 0 0 1px var(--c-cyan); }
}

/* light-mode: brand tokens (--c-text-secondary, --c-border, --grad-brand,
   --c-cyan) already adapt; the translucent button background reads fine on the
   light card, so no per-mode override is required. */