/* LinkedIn Post Finder, v3. Most of the page is Tailwind; this holds the states
   the markup can't express: the search-mode toggle, the match hint and the
   loading rows. */

.search-mode-btn {
    color: #64748b;
}
.search-mode-btn:hover {
    color: #0f172a;
}
.search-mode-btn.active {
    color: #0f172a;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.06);
}

#advanced-search-chevron {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
#advanced-search-chevron.rotated {
    transform: rotate(180deg);
}

/* "Your audience is active here": the why, on hover and on keyboard focus. */
.match-hint {
    position: relative;
    cursor: help;
    text-decoration: underline dotted rgba(234, 88, 12, 0.5);
    text-underline-offset: 3px;
}
.match-hint-text {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 20;
    width: min(18rem, 80vw);
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s;
}
.match-hint:hover .match-hint-text,
.match-hint:focus .match-hint-text {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.skeleton-row {
    background: linear-gradient(90deg, #eef2f6 25%, #f8fafc 50%, #eef2f6 75%);
    background-size: 200% 100%;
    animation: skeleton-sweep 1.4s ease-in-out infinite;
}
@keyframes skeleton-sweep {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-row { animation: none; }
    .match-hint-text, #advanced-search-chevron { transition: none; }
}