/* Topic flairs — vocabulary lives in src/Services/Flair.php; keep in sync. */

.flair {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    padding: 0.125rem 0.5rem;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
}

.flair--lucid      { color: #8b5cf6; background: rgba(139, 92, 246, 0.14); }
.flair--recurring  { color: #14b8a6; background: rgba(20, 184, 166, 0.14); }
.flair--nightmare  { color: #ef4444; background: rgba(239, 68, 68, 0.14); }
.flair--first-visit { color: #f97316; background: rgba(249, 115, 22, 0.14); }
.flair--art        { color: #ec4899; background: rgba(236, 72, 153, 0.14); }
.flair--question   { color: #0ea5e9; background: rgba(14, 165, 233, 0.14); }
.flair--theory     { color: #22c55e; background: rgba(34, 197, 94, 0.14); }
.flair--story      { color: #ca8a04; background: rgba(234, 179, 8, 0.16); }

a.flair:hover,
.flair--active {
    border-color: currentColor;
}

/* Filter row on section pages */
.flair-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

/* Picker on the create form — radio chips */
.flair-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.flair-option__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.flair-option {
    cursor: pointer;
}

.flair-option .flair {
    opacity: 0.55;
    transition: opacity 0.15s;
}

.flair-option:hover .flair {
    opacity: 1;
}

.flair-option__input:checked + .flair {
    opacity: 1;
    border-color: currentColor;
}

.flair-option__input:focus-visible + .flair {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}