/* Word Counter — Tool Styles (~1.2KB) */

/* Layout: input left, stats right */
.wc__layout {
    display: flex;
    flex: 1;
    gap: 1px;
    background: var(--c-border);
    min-height: 0
}

.wc__input-wrap {
    flex: 1;
    display: flex;
    background: var(--c-bg);
    min-width: 0
}

.wc__input-wrap .tool__input {
    min-height: 300px
}

.wc__stats {
    flex: 0 0 340px;
    background: var(--c-bg);
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Stat sections */
.stat-section__title {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-text-2);
    margin-bottom: 8px;
}

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px
}

.stat-grid--2 {
    grid-template-columns: 1fr 1fr
}

.stat {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 8px 10px;
    text-align: center;
}

.stat__val {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.2
}

.stat__label {
    font-size: .625rem;
    color: var(--c-text-2);
    margin-top: 2px;
    display: block
}

/* Social media bars */
.social-limits {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.social-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .6875rem
}

.social-bar__label {
    width: 60px;
    color: var(--c-text-2);
    flex-shrink: 0
}

.social-bar__track {
    flex: 1;
    height: 6px;
    background: var(--c-border);
    border-radius: 3px;
    overflow: hidden
}

.social-bar__fill {
    height: 100%;
    background: var(--c-accent);
    border-radius: 3px;
    transition: width .2s;
    width: 0
}

.social-bar__fill.over {
    background: var(--c-error)
}

.social-bar__count {
    width: 56px;
    text-align: right;
    color: var(--c-text-2);
    font-variant-numeric: tabular-nums
}

/* Keywords */
.keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 24px
}

.kw-tag {
    font-size: .6875rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--c-accent) 10%, transparent);
    color: var(--c-accent);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.kw-tag .kw-count {
    opacity: .6;
    font-size: .6rem
}

/* Responsive */
@media(max-width:768px) {
    .wc__layout {
        flex-direction: column;
        background: transparent;
        gap: 0
    }

    .wc__input-wrap .tool__input {
        min-height: 200px
    }

    .wc__stats {
        flex: none;
        border-top: 1px solid var(--c-border)
    }

    .stat-grid {
        grid-template-columns: 1fr 1fr
    }
}