/* Minimal custom styles augmenting Tailwind */

.word-box {
    display: flex;
    align-items: center;
    background-color: var(--tw-bg-opacity, rgba(243, 244, 246, 0.5));
    /* gray-100 */
}

.dark .word-box {
    background-color: rgba(31, 41, 55, 0.5);
    /* gray-800 */
}

.word-index {
    color: rgba(107, 114, 128, 0.7);
    /* gray-500 */
    user-select: none;
    width: 28px;
    text-align: right;
    margin-right: 0.75rem;
}

.dark .word-index {
    color: rgba(156, 163, 175, 0.7);
    /* gray-400 */
}

/* Active state for length toggle buttons */
#btn-12-words.active,
#btn-24-words.active {
    background-color: rgb(139, 92, 246) !important;
    /* primary */
    color: white !important;
    border-color: rgb(139, 92, 246) !important;
    z-index: 1;
    /* bring to front for border focus */
}