/**
 * Tiering CSS - Standardized Free/Paid Tier Styles
 * Forced Signals / ForcedAlpha
 *
 * Usage:
 *   - Include this CSS on any tool page with tiered content
 *   - Relies on body.authenticated / body.unauthenticated classes (set by auth.js)
 *   - Pairs with PAYWALL.limitRows() and PAYWALL.gateColumn() in paywall.js
 */

/* ============================================================
   CSS Variables (dark-theme defaults matching site palette)
   ============================================================ */
:root {
    --tier-accent: #22c55e;
    --tier-accent-glow: rgba(34, 197, 94, 0.25);
    --tier-bg: #0a0a0a;
    --tier-bg-elevated: #111111;
    --tier-bg-card: #141414;
    --tier-border: #1e1e1e;
    --tier-text: #e5e5e5;
    --tier-text-muted: #737373;
    --tier-blur: 6px;
}

/* ============================================================
   FREE TIER: Preview rows (visible to everyone)
   ============================================================ */
.tier-free-preview {
    /* No special styling needed — these rows are always visible */
}

/* ============================================================
   GATED CONTENT: Hidden by default, shown contextually
   ============================================================ */
.tier-gated {
    display: none;
}

body.unauthenticated .tier-gated {
    display: block;
}

body.authenticated .tier-gated {
    display: none;
}

/* ============================================================
   LOCKED CONTENT: Blur effect for unauthenticated users
   ============================================================ */
.tier-locked {
    filter: blur(var(--tier-blur));
    -webkit-filter: blur(var(--tier-blur));
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    transition: filter 0.3s ease;
}

body.authenticated .tier-locked {
    filter: none;
    -webkit-filter: none;
    pointer-events: auto;
    user-select: auto;
    -webkit-user-select: auto;
}

/* ============================================================
   UPGRADE BANNER: CTA overlay for blurred/gated content
   ============================================================ */
.tier-upgrade-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px 24px;
    margin: -40px 0 24px 0;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0) 0%,
        rgba(10, 10, 10, 0.95) 30%,
        var(--tier-bg) 100%
    );
    text-align: center;
    z-index: 20;
}

.tier-upgrade-banner--inline {
    margin: 0;
    padding: 40px 24px;
    background: var(--tier-bg-card);
    border: 1px solid var(--tier-border);
    border-radius: 12px;
}

.tier-upgrade-banner__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 50%;
    font-size: 20px;
}

.tier-upgrade-banner__text {
    color: var(--tier-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.tier-upgrade-banner__subtext {
    color: var(--tier-text-muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    max-width: 400px;
}

.tier-upgrade-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--tier-accent);
    color: #000;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tier-upgrade-banner__cta:hover {
    background: #4ade80;
    transform: translateY(-1px);
    box-shadow: 0 0 24px var(--tier-accent-glow);
}

.tier-upgrade-banner__cta:active {
    transform: translateY(0);
}

body.authenticated .tier-upgrade-banner {
    display: none;
}

/* ============================================================
   TABLE TIERING: Show first N rows free, blur the rest
   Default: 5 free rows (overridable via JS data attributes)
   ============================================================ */

/* Default: blur rows 6+ for unauthenticated */
body.unauthenticated .tier-table tbody tr:nth-child(n+6) td {
    filter: blur(var(--tier-blur));
    -webkit-filter: blur(var(--tier-blur));
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    transition: filter 0.3s ease;
}

body.authenticated .tier-table tbody tr:nth-child(n+6) td {
    filter: none;
    -webkit-filter: none;
    pointer-events: auto;
    user-select: auto;
    -webkit-user-select: auto;
}

/* Dynamic row limits set by JS via data-free-rows attribute.
   JS injects a <style> block for custom row counts.
   These classes are used as overrides when the default 5 is not enough. */

/* Blurred row overlay hint (first locked row gets a subtle top border) */
body.unauthenticated .tier-table tbody tr.tier-row-locked:first-of-type td {
    border-top: 1px dashed rgba(34, 197, 94, 0.3);
}

/* ============================================================
   AI ANALYSIS COLUMN GATING
   ============================================================ */
.tier-ai-column {
    filter: blur(var(--tier-blur));
    -webkit-filter: blur(var(--tier-blur));
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    transition: filter 0.3s ease;
}

body.authenticated .tier-ai-column {
    filter: none;
    -webkit-filter: none;
    pointer-events: auto;
    user-select: auto;
    -webkit-user-select: auto;
}

/* Column header indicator for gated columns */
.tier-ai-column-header::after {
    content: "PRO";
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: var(--tier-accent);
    color: #000;
    font-size: 9px;
    font-weight: 800;
    border-radius: 3px;
    vertical-align: middle;
    letter-spacing: 0.5px;
}

body.authenticated .tier-ai-column-header::after {
    display: none;
}

/* ============================================================
   ROW COUNT BADGE: "Showing X of Y" for free users
   ============================================================ */
.tier-row-count {
    display: none;
    padding: 10px 16px;
    margin-top: 8px;
    background: var(--tier-bg-card);
    border: 1px solid var(--tier-border);
    border-radius: 8px;
    color: var(--tier-text-muted);
    font-size: 13px;
    text-align: center;
}

.tier-row-count a {
    color: var(--tier-accent);
    text-decoration: none;
    font-weight: 600;
}

.tier-row-count a:hover {
    text-decoration: underline;
}

body.unauthenticated .tier-row-count {
    display: block;
}

body.authenticated .tier-row-count {
    display: none;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    .tier-upgrade-banner {
        padding: 24px 16px;
        margin: -32px 0 16px 0;
    }

    .tier-upgrade-banner__text {
        font-size: 15px;
    }

    .tier-upgrade-banner__cta {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
    }

    .tier-upgrade-banner__icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* ============================================================
   PRO GATE BOX: Inline upgrade CTA used in playbooks/research
   Hidden for authenticated (pro) users
   ============================================================ */
body.authenticated .pro-gate-box {
    display: none !important;
}

body.authenticated .pro-gate {
    display: none !important;
}