/* FC Topic Categories — Frontend CSS */

#fctc-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    width: 100%;
}

/* All button */
.fctc-all-btn {
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: #f3f4f6;
    color: #374151;
    border: 1.5px solid #e5e7eb;
    transition: background .15s, color .15s;
    user-select: none;
}
.fctc-all-btn.fctc-active,
.fctc-all-btn:hover {
    background: #1f2937;
    color: #fff;
    border-color: transparent;
}

/* Band */
.fctc-band {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    overflow: hidden;
    border: 1.5px solid var(--c, #6366f1);
    cursor: pointer;
    transition: box-shadow .15s;
}
.fctc-band:hover {
    box-shadow: 0 2px 10px color-mix(in srgb, var(--c, #6366f1) 30%, transparent);
}

/* Band label (category name) */
.fctc-band-lbl {
    padding: 6px 14px;
    background: var(--c, #6366f1);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    user-select: none;
}

/* Chips — hidden until band is open */
.fctc-band-chips {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px 10px;
    background: color-mix(in srgb, var(--c, #6366f1) 8%, #fff);
}
.fctc-band.fctc-open {
    border-radius: 14px;
    flex-wrap: wrap;
    display: inline-flex;
    align-items: flex-start;
}
.fctc-band.fctc-open .fctc-band-chips {
    display: flex;
}

/* Individual topic chip */
.fctc-chip {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: color-mix(in srgb, var(--c, #6366f1) 10%, #fff);
    color: color-mix(in srgb, var(--c, #6366f1) 90%, #000);
    border: 1px solid color-mix(in srgb, var(--c, #6366f1) 25%, transparent);
    transition: background .12s;
    user-select: none;
    white-space: nowrap;
}
.fctc-chip:hover,
.fctc-chip.fctc-active {
    background: var(--c, #6366f1);
    color: #fff;
    border-color: transparent;
}

@media (max-width: 640px) {
    .fctc-band-lbl { font-size: 11px; padding: 5px 10px; }
    .fctc-chip { font-size: 11px; }
}