/**
 * Tag Cloud Pro front-end cloud styles.
 *
 * AI Dev Prompt:
 * This stylesheet must isolate [tag_cloud_pro] from theme link styling.
 * Keep selectors scoped under .tcp-cloud-container and preserve underline,
 * border, and pseudo-element resets for hostile theme CSS.
 */

.tcp-cloud-container {
    --tcp-cloud-text: var(--tcp-desktop-text, #26323f);
    --tcp-cloud-muted: var(--tcp-desktop-muted, #64748b);
    --tcp-cloud-surface: var(--tcp-desktop-surface, #ffffff);
    --tcp-cloud-border: var(--tcp-desktop-border, #d8dee6);
    --tcp-cloud-accent: var(--tcp-desktop-accent, #cc0000);
    --tcp-cloud-hover-bg: var(--tcp-desktop-hover-bg, #cc0000);
    --tcp-cloud-hover-text: var(--tcp-desktop-hover-text, #ffffff);
    --tcp-cloud-font-size: var(--tcp-desktop-font-size, 15px);
    --tcp-cloud-gap: var(--tcp-desktop-gap, 9px);
    --tcp-cloud-radius: var(--tcp-desktop-radius, 3px);
    --tcp-cloud-level-1-text: #cc0000;
    --tcp-cloud-level-2-text: #a30000;
    --tcp-cloud-level-3-text: #7f1d1d;
    --tcp-cloud-level-4-text: #5f1f2a;
    --tcp-cloud-level-5-text: #3f2a2a;
    --tcp-cloud-level-6-text: #334155;
    --tcp-cloud-level-7-text: #526071;
    --tcp-cloud-level-8-text: #707f8f;
    --tcp-cloud-level-9-text: #9099a6;
    --tcp-cloud-level-10-text: #b3b8c0;
    --tcp-cloud-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tcp-cloud-gap);
    box-sizing: border-box;
    font-size: var(--tcp-cloud-font-size);
    line-height: 1.25;
}

.tcp-cloud-container,
.tcp-cloud-container * {
    box-sizing: border-box;
}

.tcp-widget-layout {
    margin: 10px 0 0;
    padding: 0;
}

.tcp-cloud-container .tcp-tag-item,
.tcp-cloud-container .tcp-tag-item:link,
.tcp-cloud-container .tcp-tag-item:visited {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 2.1em;
    margin: 0;
    padding: 0.42em 0.72em;
    border: 1px solid var(--tcp-cloud-border) !important;
    border-bottom: 1px solid var(--tcp-cloud-border) !important;
    border-radius: var(--tcp-cloud-radius);
    background: var(--tcp-cloud-surface);
    background-image: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    color: var(--tcp-tag-tier-color, var(--tcp-cloud-text)) !important;
    font-family: inherit;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1.1;
    text-align: center;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-underline-offset: 0;
    text-shadow: none;
    word-break: keep-all;
    overflow-wrap: anywhere;
    transform: translateY(0);
    transform-origin: center;
    isolation: isolate;
    transition:
        background-color 180ms ease,
        background-image 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease,
        opacity 180ms ease,
        transform 180ms ease;
}

.tcp-cloud-container .tcp-tag-item::before,
.tcp-cloud-container .tcp-tag-item::after {
    display: none !important;
    content: none !important;
}

.tcp-cloud-container .tcp-tag-item[hidden] {
    display: none !important;
}

.tcp-cloud-container .tcp-tag-item:hover,
.tcp-cloud-container .tcp-tag-item:focus {
    border-color: var(--tcp-cloud-hover-bg) !important;
    border-bottom-color: var(--tcp-cloud-hover-bg) !important;
    background: var(--tcp-cloud-hover-bg) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(0, 0, 0, 0.04)) !important;
    box-shadow: var(--tcp-cloud-hover-shadow, var(--tcp-cloud-shadow));
    color: var(--tcp-cloud-hover-text) !important;
    opacity: 1;
    text-decoration: none !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
    transform: translateY(-2px) scale(var(--tcp-cloud-hover-scale, 1.02));
}

.tcp-cloud-container .tcp-tag-item:active {
    background: var(--tcp-cloud-hover-bg) !important;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.16);
    color: var(--tcp-cloud-hover-text) !important;
    transform: translateY(0);
}

.tcp-cloud-container .tcp-tag-item:focus-visible {
    outline: 2px solid var(--tcp-cloud-accent);
    outline-offset: 3px;
}

.tcp-cloud-container .tcp-tag-item.level-1-peak {
    padding: 0.5em 0.9em;
    border-color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-1-text)) !important;
    background: var(--tcp-cloud-surface);
    color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-1-text)) !important;
    font-size: 1.2em;
    font-weight: 800;
}

.tcp-cloud-container .tcp-tag-item.level-2-prime {
    border-color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-2-text)) !important;
    background: var(--tcp-cloud-surface);
    color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-2-text)) !important;
    font-size: 1.14em;
    font-weight: 750;
}

.tcp-cloud-container .tcp-tag-item.level-3-strong {
    color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-3-text)) !important;
    font-size: 1.08em;
    font-weight: 720;
}

.tcp-cloud-container .tcp-tag-item.level-4-high {
    color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-4-text)) !important;
    font-size: 1.03em;
    font-weight: 680;
}

.tcp-cloud-container .tcp-tag-item.level-5-solid {
    color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-5-text)) !important;
    font-size: 0.99em;
    font-weight: 640;
}

.tcp-cloud-container .tcp-tag-item.level-6-medium {
    color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-6-text)) !important;
    font-size: 0.96em;
    font-weight: 600;
}

.tcp-cloud-container .tcp-tag-item.level-7-soft {
    color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-7-text)) !important;
    font-size: 0.93em;
    font-weight: 560;
}

.tcp-cloud-container .tcp-tag-item.level-8-light {
    color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-8-text)) !important;
    font-size: 0.9em;
    font-weight: 530;
}

.tcp-cloud-container .tcp-tag-item.level-9-faint {
    color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-9-text)) !important;
    font-size: 0.88em;
    font-weight: 500;
}

.tcp-cloud-container .tcp-tag-item.level-10-muted {
    color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-10-text)) !important;
    font-size: 0.86em;
    font-weight: 480;
    opacity: 0.88;
}

.tcp-cloud-container .tcp-tag-item.level-10-muted:hover,
.tcp-cloud-container .tcp-tag-item.level-10-muted:focus {
    opacity: 1;
}

.tcp-cloud-container .tcp-tag-item:hover,
.tcp-cloud-container .tcp-tag-item:focus,
.tcp-cloud-container .tcp-tag-item:hover:visited,
.tcp-cloud-container .tcp-tag-item:focus:visited,
.tcp-cloud-container .tcp-tag-item.level-1-peak:hover,
.tcp-cloud-container .tcp-tag-item.level-1-peak:focus,
.tcp-cloud-container .tcp-tag-item.level-2-prime:hover,
.tcp-cloud-container .tcp-tag-item.level-2-prime:focus,
.tcp-cloud-container .tcp-tag-item.level-3-strong:hover,
.tcp-cloud-container .tcp-tag-item.level-3-strong:focus,
.tcp-cloud-container .tcp-tag-item.level-4-high:hover,
.tcp-cloud-container .tcp-tag-item.level-4-high:focus,
.tcp-cloud-container .tcp-tag-item.level-5-solid:hover,
.tcp-cloud-container .tcp-tag-item.level-5-solid:focus,
.tcp-cloud-container .tcp-tag-item.level-6-medium:hover,
.tcp-cloud-container .tcp-tag-item.level-6-medium:focus,
.tcp-cloud-container .tcp-tag-item.level-7-soft:hover,
.tcp-cloud-container .tcp-tag-item.level-7-soft:focus,
.tcp-cloud-container .tcp-tag-item.level-8-light:hover,
.tcp-cloud-container .tcp-tag-item.level-8-light:focus,
.tcp-cloud-container .tcp-tag-item.level-9-faint:hover,
.tcp-cloud-container .tcp-tag-item.level-9-faint:focus,
.tcp-cloud-container .tcp-tag-item.level-10-muted:hover,
.tcp-cloud-container .tcp-tag-item.level-10-muted:focus {
    color: var(--tcp-cloud-hover-text) !important;
    -webkit-text-fill-color: var(--tcp-cloud-hover-text);
}

@media (max-width: 767px) {
    .tcp-cloud-container:not(.tcp-cloud-context-widget) {
        --tcp-cloud-text: var(--tcp-mobile-text, #26323f);
        --tcp-cloud-muted: var(--tcp-mobile-muted, #64748b);
        --tcp-cloud-surface: var(--tcp-mobile-surface, #ffffff);
        --tcp-cloud-border: var(--tcp-mobile-border, #d8dee6);
        --tcp-cloud-accent: var(--tcp-mobile-accent, #cc0000);
        --tcp-cloud-hover-bg: var(--tcp-mobile-hover-bg, #cc0000);
        --tcp-cloud-hover-text: var(--tcp-mobile-hover-text, #ffffff);
        --tcp-cloud-font-size: var(--tcp-mobile-font-size, 14px);
        --tcp-cloud-gap: var(--tcp-mobile-gap, 7px);
        --tcp-cloud-radius: var(--tcp-mobile-radius, 3px);
    }

    .tcp-cloud-container .tcp-tag-item,
    .tcp-cloud-container .tcp-tag-item:link,
    .tcp-cloud-container .tcp-tag-item:visited {
        min-height: 2em;
        padding: 0.38em 0.62em;
    }

    .tcp-cloud-container .tcp-tag-item.level-1-peak {
        font-size: 1.1em;
    }

    .tcp-cloud-container .tcp-tag-item.level-2-prime {
        font-size: 1.02em;
    }
}

.tcp-cloud-container.tcp-cloud-context-widget {
    --tcp-cloud-text: var(--tcp-widget-text, #26323f);
    --tcp-cloud-muted: var(--tcp-widget-muted, #64748b);
    --tcp-cloud-surface: var(--tcp-widget-surface, #ffffff);
    --tcp-cloud-border: var(--tcp-widget-border, #d8dee6);
    --tcp-cloud-accent: var(--tcp-widget-accent, #cc0000);
    --tcp-cloud-hover-bg: var(--tcp-widget-hover-bg, #cc0000);
    --tcp-cloud-hover-text: var(--tcp-widget-hover-text, #ffffff);
    --tcp-cloud-font-size: var(--tcp-widget-font-size, 13px);
    --tcp-cloud-gap: var(--tcp-widget-gap, 7px);
    --tcp-cloud-radius: var(--tcp-widget-radius, 3px);
}