/* Risingshadow Design System v1.2.1: Genre Identity
 *
 * Primary genre colors are domain identity colors, not status colors.
 * Do not substitute success/info/danger tokens for these values.
 */
.rs-genre {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    min-height: 28px;
    padding: 3px 9px;
    border: 1px solid var(--rs-genre-other-border);
    border-radius: var(--rs-radius-md);
    background: var(--rs-genre-other-bg);
    color: var(--rs-genre-other);
    font-size: var(--rs-text-sm);
    font-weight: var(--rs-weight-semibold);
    line-height: 1.35;
    text-decoration: none;
}

.rs-genre--scifi {
    color: var(--rs-genre-scifi);
    background: var(--rs-genre-scifi-bg);
    border-color: var(--rs-genre-scifi-border);
}

.rs-genre--fantasy {
    color: var(--rs-genre-fantasy);
    background: var(--rs-genre-fantasy-bg);
    border-color: var(--rs-genre-fantasy-border);
}

.rs-genre--horror {
    color: var(--rs-genre-horror);
    background: var(--rs-genre-horror-bg);
    border-color: var(--rs-genre-horror-border);
}

.rs-genre--other {
    color: var(--rs-genre-other);
    background: var(--rs-genre-other-bg);
    border-color: var(--rs-genre-other-border);
}

/* Use only when the genre badge itself is a real link/button. */
.rs-genre--interactive {
    cursor: pointer;
    transition:
        border-color var(--rs-transition-normal),
        box-shadow var(--rs-transition-normal),
        filter var(--rs-transition-normal);
}

.rs-genre--interactive:hover {
    filter: brightness(1.12);
    box-shadow: var(--rs-glow-interactive);
}

.rs-genre--interactive:focus-visible {
    outline: 2px solid var(--rs-border-focus);
    outline-offset: 2px;
    box-shadow: var(--rs-glow-focus);
}

@media (pointer: coarse) {
    .rs-genre--interactive {
        min-height: var(--rs-touch-target);
        padding-inline: var(--rs-space-3);
    }
}