/* ════════════════════════════════════════════════════════════════════════════
 * css/compatibility.css — Live Per-Platform Compatibility Verdict Strip
 *                         + per-card badges + "Show only compatible" + Fix My Name
 * Additive, self-contained. Uses existing design tokens (main.css). The site has
 * no amber/warning token, so a local --cc-warn is defined (light-mode aware).
 * Reserves strip height to prevent CLS; respects prefers-reduced-motion.
 * ════════════════════════════════════════════════════════════════════════════ */

:root {
    --cc-safe: var(--c-cyan);          /* ✓ reuses brand cyan */
    --cc-warn: #ffb020;                /* ⚠ amber (no site token exists) */
    --cc-bad: var(--c-pink);           /* ✗ reuses brand pink */
    --cc-safe-bg: rgba(6, 214, 160, 0.12);
    --cc-warn-bg: rgba(255, 176, 32, 0.14);
    --cc-bad-bg: rgba(255, 45, 120, 0.12);
}
html.light-mode {
    --cc-warn: #b8860b;                /* darker amber for light-bg contrast */
}

/* ──────────── Strip shell: reserve height → zero CLS ──────────── */
.compat-strip {
    min-height: 390px;
    margin-bottom: var(--s-xl);
    padding: var(--s-md) var(--s-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: var(--s-sm);
}
.compat-strip[hidden] { display: none; }

.compat-strip__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-md);
    flex-wrap: wrap;
}

/* "Will it work on:" eyebrow — turns the chip row from "filter controls" into
 * the answer to a question the user already has. */
.compat-eyebrow {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--c-text-secondary);
    white-space: nowrap;
}

/* ──────────── Platform chip row — WRAPS so every platform is visible at once
 * (no hidden horizontal scroll; users see the full breadth of supported apps). ──────────── */
.compat-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-sm);
    flex: 1 1 100%;
    padding-bottom: 2px;
}

.compat-chip {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--r-full);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-text-secondary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--c-border);
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--t-fast);
}
.compat-chip:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--c-border-hover);
    color: var(--c-text);
}
.compat-chip:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }
.compat-chip:active { transform: scale(0.96); }
.compat-chip--active {
    background: var(--grad-brand);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(255, 45, 120, 0.28);
}
.compat-chip__icon { font-size: 1rem; line-height: 1; }

/* ──────────── Show-only-compatible toggle ──────────── */
.compat-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--c-text-secondary);
}
.compat-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }
.compat-toggle__track {
    width: 38px; height: 22px;
    border-radius: var(--r-full);
    background: var(--c-border-hover);
    position: relative;
    transition: background var(--t-fast);
    flex: 0 0 auto;
}
.compat-toggle__thumb {
    position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform var(--t-fast);
}
.compat-toggle__input:checked + .compat-toggle__track { background: var(--c-cyan); }
.compat-toggle__input:checked + .compat-toggle__track .compat-toggle__thumb { transform: translateX(16px); }
.compat-toggle__input:focus-visible + .compat-toggle__track { outline: 2px solid var(--c-purple); outline-offset: 2px; }

/* ──────────── Verdict line ──────────── */
.compat-verdict {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-md);
}
.compat-verdict__counts { display: inline-flex; gap: var(--s-sm); flex-wrap: wrap; }
.compat-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--r-full);
    font-size: 0.8rem;
    font-weight: 700;
}
.compat-count--safe { color: var(--cc-safe); background: var(--cc-safe-bg); }
.compat-count--risky { color: var(--cc-warn); background: var(--cc-warn-bg); }
.compat-count--bad { color: var(--cc-bad); background: var(--cc-bad-bg); }
.compat-count--toolong { color: var(--cc-bad); background: var(--cc-bad-bg); }
.compat-count--neutral { color: var(--c-text-secondary); background: transparent; padding-left: 0; font-weight: 600; }
.compat-count__hint { font-weight: 600; color: var(--c-text-muted); }

/* Celebratory "all clear" line (replaces the three pills when everything works). */
.compat-count--allclear {
    color: var(--cc-safe);
    background: var(--cc-safe-bg);
    box-shadow: 0 0 0 1px var(--cc-safe) inset;
    font-size: 0.85rem;
}
/* One-shot success motion on a genuine transition into all-clear. */
.compat-verdict__counts.compat-celebrate { animation: compatPop var(--t-spring, 0.4s) both; }
@keyframes compatPop {
    0% { transform: scale(0.96); opacity: 0.6; }
    60% { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Brief "that one's X-safe" confirmation after a compatible copy. */
.compat-verdict__counts.compat-confirm .compat-count--safe { box-shadow: 0 0 0 1px var(--cc-safe) inset; }

.compat-verdict__length { font-size: 0.85rem; font-weight: 600; color: var(--c-text-secondary); }
.compat-verdict__length.is-ok { color: var(--cc-safe); }
.compat-verdict__length.is-warn { color: var(--cc-warn); }
.compat-verdict__length.is-over { color: var(--cc-bad); }

/* Plain-language "why" explainer — surfaces the worst-tier reason inline so touch
 * users (no hover tooltip) still learn WHY a count is non-zero. */
.compat-verdict__explain {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    flex-basis: 100%;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
}
.compat-verdict__explain.is-warn { color: var(--cc-warn); }
.compat-verdict__explain.is-bad { color: var(--cc-bad); }
.compat-verdict__explain-glyph { flex: 0 0 auto; }
.compat-verdict__explain[hidden] { display: none; }

.compat-verdict__note { font-size: 0.8rem; font-weight: 600; color: var(--cc-warn); flex-basis: 100%; }
.compat-verdict__note[hidden] { display: none; }

/* ──────────── Fix My Name button ──────────── */
.compat-fix {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;                 /* ≥44px touch target */
    padding: 8px 18px;
    border-radius: var(--r-sm);
    font-size: 0.82rem;
    font-weight: 700;
    background: var(--grad-brand);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 45, 120, 0.25);
    transition: transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
    animation: compatFixIn var(--t-spring, 0.4s) both;   /* one entrance per appearance */
}
.compat-fix:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255, 45, 120, 0.4); }
.compat-fix:active { transform: translateY(0) scale(0.98); }
.compat-fix:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.compat-fix[hidden] { display: none; }
/* Soft "Best for X" jump-to-safe role when safe styles abound — present but calm,
 * so the payoff feature is continuously taught, not only surfaced in a crisis. */
.compat-fix--soft {
    background: transparent;
    color: var(--cc-safe);
    box-shadow: 0 0 0 1px var(--cc-safe) inset;
}
.compat-fix--soft:hover { background: var(--cc-safe-bg); box-shadow: 0 0 0 1px var(--cc-safe) inset; }
@keyframes compatFixIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ──────────── Disclaimer + report ──────────── */
.compat-disclaimer {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--c-text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}
/* Credibility signal + data pipeline → make it a real, legible tap target. */
.compat-disclaimer__report {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 2px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: underline;
}
.compat-disclaimer__report:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }

/* ════════════ PER-CARD BADGE (appended by MutationObserver) ════════════ */
.compat-badge {
    position: absolute;
    /* Inset enough that the inset ring isn't sitting on the card's rounded
     * overflow:hidden clip boundary (which would shave the badge corner). */
    top: 10px; right: 10px;
    z-index: 2;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    user-select: none;
}
.compat-badge__glyph { display: inline-flex; }
.compat-badge--ok { color: var(--cc-safe); background: var(--cc-safe-bg); box-shadow: 0 0 0 1px var(--cc-safe) inset; }
.compat-badge--risky { color: var(--cc-warn); background: var(--cc-warn-bg); box-shadow: 0 0 0 1px var(--cc-warn) inset; }
.compat-badge--bad { color: var(--cc-bad); background: var(--cc-bad-bg); box-shadow: 0 0 0 1px var(--cc-bad) inset; }

/* ──────────── "Show only compatible" dimming (class on #results-container) ──────────── */
#results-container.compat-filtering .compat-card--bad { display: none; }
#results-container.compat-filtering .compat-card--risky { opacity: 0.45; filter: grayscale(0.4); transition: opacity var(--t-fast); }

/* ──────────── Fix My Name target highlight ──────────── */
.compat-card--fix-highlight {
    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: compatFixPulse 1.2s ease;
}
@keyframes compatFixPulse {
    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); }
}

/* ──────────── Mobile ──────────── */
@media (max-width: 600px) {
    /* CLS reserve = the tallest LOAD-TIME state, not the tallest possible state.
     * CLS ignores shifts within 500ms of user input, and the strip only grows
     * (fix button + explainer + wrapped count pills) AFTER the user types — that
     * growth is debounced 150ms, well inside the input-exclusion window, so it is
     * NOT counted. The state that actually loads (before any typing) is the empty
     * "Live check for X / N char limit" state, which stacks vertically on mobile:
     *
     *   derived at a 360px viewport → strip content width ≈ 294px
     *   (360 − 2×16 section pad − 2×16 strip pad − 2px border):
     *     eyebrow row ........................ ~16px
     *     chips row (44px chip + 2px) ........ ~46px   (scrolls, never wraps)
     *     toggle row (44px) .................. ~44px
     *     2 × top row-gap (--s-md 16) ........ ~32px
     *     col-gap top→verdict (--s-sm 8) ..... ~8px
     *     neutral count line (wraps ~2) ...... ~34px
     *     verdict gap (--s-md 16) ............ ~16px
     *     length spec line ................... ~18px
     *     col-gap verdict→disclaimer ......... ~8px
     *     disclaimer (~230 chars ≈ 7 lines) .. ~112px  (low-conf game pages add a
     *                                                    ~2-line caveat ≈ +32px)
     *     strip padding+border (v) ........... ~18px
     *   ── high-confidence pages ≈ 352px · low-confidence game pages ≈ 384px ──
     *
     * 404px covers the low-confidence worst case with headroom for font-metric
     * variance, the report link wrapping to its own row, and ~320px viewports
     * (which wrap the disclaimer ~1 line more). The previous 196px under-reserved
     * the real empty state by ~160px, causing a visible hydrate jump. */
    .compat-strip { min-height: 404px; padding: var(--s-sm) var(--s-md); }
    /* On mobile, 12 labelled chips would wrap to ~6 lines and dominate the
     * screen — so restore a compact swipe row WITH a clear right-edge fade that
     * signals "more platforms →" (desktop wraps to show all at once). */
    .compat-platforms {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    }
    .compat-platforms::-webkit-scrollbar { display: none; }
    .compat-chip { scroll-snap-align: start; }
    /* Eyebrow + chips on their own wrapped row; toggle full-width below. */
    .compat-strip__top { flex-wrap: wrap; }
    .compat-eyebrow { flex: 0 0 100%; }
    .compat-platforms { flex: 1 1 100%; }
    .compat-toggle { width: 100%; justify-content: flex-start; }
    .compat-fix { margin-left: 0; width: 100%; justify-content: center; }
    .compat-badge { width: 20px; height: 20px; top: 8px; right: 8px; }
}

/* ──────────── Reduced motion (global reset already neutralises durations;
 *              explicitly disable the pulse + transitions for safety) ──────────── */
@media (prefers-reduced-motion: reduce) {
    .compat-card--fix-highlight,
    .compat-verdict__counts.compat-celebrate,
    .compat-fix { animation: none; }
    .compat-toggle__thumb,
    .compat-chip,
    .compat-chip:active,
    .compat-fix:active,
    .compat-fix { transition: none; transform: none; }
}