/**
 * share-panel.css — the share card.
 *
 * Reuses .modal / .modal-content / .btn from styles.css so the card inherits the
 * site's existing dialog treatment; only the card's own internals are here.
 */

.share-card {
    max-width: 460px;
    /* The card is ~600px tall. On a landscape phone, or any short viewport, that
       overflows and the Close button becomes unreachable because .modal centres
       its content rather than scrolling it. Scoped to this card rather than
       changed on the shared .modal-content, which other dialogs rely on. */
    max-height: 90vh;
    overflow-y: auto;
}

/* Thumbnail beside the metadata, not above it — the card has to read as one
   object at a glance, which is the entire reason the thumbnail exists. */
.share-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem;
    background: var(--light-color);
    border-radius: var(--border-radius);
    margin-bottom: 1.1rem;
}

.share-thumb {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    border-radius: 50%;
    /* The live canvas is square, so a circular clip shows the wheel and hides the
       transparent corners without needing a second render. */
    background: #fff;
}

.share-meta {
    min-width: 0;
}

.share-title {
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
    /* Page titles are long. Two lines, then ellipsis, so a verbose title cannot
       push the link row out of the card. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.share-count {
    margin: 0.15rem 0 0;
    color: #666;
    font-size: 0.9rem;
}

.share-label {
    display: block;
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.share-link-row {
    display: flex;
    gap: 0.5rem;
}

.share-link-row input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.7rem;
    border: 2px solid #E0E0E0;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    font-family: inherit;
    color: #444;
    background: #fff;
}

.share-link-row input:focus-visible,
.share-target:focus-visible,
.share-copy:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

.share-link-row .btn {
    flex: 0 0 auto;
}

/* Reserves its line whether or not there is a message, so confirming a copy does
   not shift the buttons below it. */
.share-copied {
    min-height: 1.25rem;
    margin: 0.4rem 0 1rem;
    font-size: 0.875rem;
    color: #666;
}

.share-copied.is-ok {
    color: var(--success-color);
    font-weight: 600;
}

.share-targets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}

/* Social last and understated. These are a convenience, not the point of the
   card — the copied link is what people actually use. */
.share-target {
    padding: 0.45rem 0.85rem;
    border: 2px solid #E0E0E0;
    border-radius: 25px;
    text-decoration: none;
    color: var(--dark-color);
    font-size: 0.9rem;
    transition: var(--transition);
}

.share-target:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.share-embed-link {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: #666;
}

.share-embed-link a {
    color: var(--primary-color);
}

@media (max-width: 460px) {
    .share-card {
        padding: 1.35rem;
    }

    .share-link-row {
        flex-wrap: wrap;
    }

    .share-link-row .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .share-target {
        transition: none;
    }
}