/* ═══════════════════════════════════════════════════════════════════════════════
   Radical Picker — component-based kanji search grid
   Integrated into Spotlight Search and Add Mode Search
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Toggle button (used in both Spotlight and AddModeSearch headers) ──────── */

.rpk-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.rpk-toggle:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-main);
    border-color: var(--color-text-muted);
}

.rpk-toggle.rpk-toggle-active {
    background: #3B82F6;
    color: #fff;
    border-color: #3B82F6;
}

.rpk-toggle.rpk-toggle-active:hover {
    background: #2563EB;
    border-color: #2563EB;
}

.rpk-toggle:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

/* ─── Periodic rainbow shine sweep (idle state only) ───────────────────────── */

/* Same palette as the spotlight container's rotating conic border */
.rpk-toggle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent            25%,
        rgba(59, 130, 246, 0.18)  35%,  /* blue   */
        rgba(192, 132, 252, 0.28) 47%,  /* purple */
        rgba(16, 185, 129, 0.18)  57%,  /* green  */
        rgba(250, 204, 21, 0.12)  64%,  /* yellow */
        transparent            73%
    );
    transform: translateX(-100%) skewX(-10deg);
    animation: rpk-toggle-shine 5s ease-in-out infinite;
    pointer-events: none;
}

/* No shine while active — solid blue fill already draws the eye */
.rpk-toggle.rpk-toggle-active::after {
    display: none;
}

@keyframes rpk-toggle-shine {
    0%, 65% {
        transform: translateX(-100%) skewX(-10deg);
        opacity: 0;
    }
    68% {
        opacity: 1;
    }
    84% {
        transform: translateX(50%) skewX(-10deg);
        opacity: 1;
    }
    89%, 100% {
        transform: translateX(50%) skewX(-10deg);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rpk-toggle::after {
        animation: none;
        opacity: 0;
    }
}

/* ─── Mode label (shown in header when radical picker is active) ──────────── */

.rpk-mode-label {
    flex: 1;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ─── Selected chips bar ───────────────────────────────────────────────────── */

.rpk-selected-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    min-height: 40px;
    align-items: center;
}

.rpk-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid #3B82F6;
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.4;
}

.rpk-chip:hover {
    background: rgba(59, 130, 246, 0.2);
}

.rpk-chip:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

.rpk-chip-char {
    font-size: 1rem;
}

.rpk-chip-name {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.8;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpk-chip-x {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-left: 2px;
}

.rpk-chip-clear {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 400;
}

.rpk-chip-clear:hover {
    border-color: var(--color-text-secondary);
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
}

.rpk-chip-clear:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

/* ─── Bar spacer + compact toggle ──────────────────────────────────────────── */

.rpk-bar-spacer {
    flex: 1;
    min-width: 8px;
}

.rpk-compact-toggle {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.rpk-compact-toggle:hover {
    border-color: var(--color-text-secondary);
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
}

.rpk-compact-toggle.rpk-compact-active {
    border-color: #3B82F6;
    color: #3B82F6;
    background: rgba(59, 130, 246, 0.1);
}

.rpk-compact-toggle.rpk-compact-active:hover {
    background: rgba(59, 130, 246, 0.2);
}

.rpk-compact-toggle:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

/* ─── Grid scroll container ────────────────────────────────────────────────── */

.rpk-grid-scroll {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
}

/* ─── Side-by-side layout ──────────────────────────────────────────────────── */

.rpk-layout {
    display: flex;
    height: 460px;
    overflow: hidden;
}

.rpk-left {
    flex: 1;
    min-width: 0;
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rpk-right {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Grid fills left column */
.rpk-left .rpk-grid-scroll {
    max-height: none;
    flex: 1;
    border-bottom: none;
}

/* Results fill right column */
.rpk-right .rpk-results-grid {
    max-height: none;
    flex: 1;
}

/* Hint/empty states fill right column */
.rpk-right .rpk-hint,
.rpk-right .rpk-no-results,
.rpk-right .rpk-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Compact result rows (right column) ───────────────────────────────────── */

.rpk-right .rpk-result-row {
    gap: 8px;
    padding: 6px 8px;
    margin: 3px 6px;
    width: calc(100% - 12px);
    border-radius: 8px;
}

.rpk-right .rpk-result-char {
    font-size: 1.4rem;
    min-width: 38px;
    height: 38px;
    border-radius: 6px;
}

.rpk-right .rpk-result-meaning {
    font-size: 0.82rem;
}

.rpk-right .rpk-result-reading {
    font-size: 0.71rem;
}

.rpk-right .rpk-studying-badge {
    display: none;
}

.rpk-right .rpk-jlpt {
    font-size: 0.6rem;
    padding: 1px 5px;
}

/* Custom scrollbar */
.rpk-grid-scroll::-webkit-scrollbar {
    width: 6px;
}
.rpk-grid-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.rpk-grid-scroll::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

/* ─── Continuous flow grid ─────────────────────────────────────────────────── */

.rpk-flow-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: stretch;
    /* Alternating row bands — 44px = 40px cell + 4px gap */
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.04) 0px,
        rgba(255, 255, 255, 0.04) 40px,
        transparent 40px,
        transparent 88px
    );
    border-radius: 6px;
    padding: 2px;
    background-position: 0 2px;
}

/* ─── Inline stroke count divider ──────────────────────────────────────────── */

.rpk-stroke-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 40px;
    padding: 0 6px;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.18);
    color: #60a5fa;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;
    margin-left: 8px;
    flex-shrink: 0;
    user-select: none;
    pointer-events: none;
}

.rpk-stroke-badge:first-child {
    margin-left: 0;
}

/* ─── Component cell ───────────────────────────────────────────────────────── */

.rpk-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-main);
    font-size: 1.15rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s ease;
    padding: 0;
    line-height: 1;
}

.rpk-cell:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: scale(1.08);
}

.rpk-cell.rpk-selected {
    background: #3B82F6;
    color: #fff;
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.rpk-cell.rpk-selected:hover {
    background: #2563EB;
    border-color: #2563EB;
}

.rpk-cell.rpk-dead {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}

.rpk-cell:focus-visible:not(:disabled) {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

/* ─── Results area ─────────────────────────────────────────────────────────── */

.rpk-hint,
.rpk-no-results,
.rpk-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.rpk-result-count {
    padding: 6px 12px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.rpk-results-grid {
    max-height: 300px;
    overflow-y: auto;
    padding: 2px 0;
}

.rpk-results-grid::-webkit-scrollbar {
    width: 6px;
}
.rpk-results-grid::-webkit-scrollbar-track {
    background: transparent;
}
.rpk-results-grid::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

/* ─── Result row ───────────────────────────────────────────────────────────── */

.rpk-result-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 16px);
    margin: 6px 8px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-secondary);
    color: var(--color-text-main);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    font-family: inherit;
}

.rpk-result-row:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-text-muted);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.rpk-result-row:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

.rpk-result-char {
    font-size: 2rem;
    font-weight: 600;
    min-width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    border-radius: 8px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}

.rpk-result-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rpk-result-meaning {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpk-result-reading {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Auto-selected single result ─────────────────────────────────────────── */

.rpk-result-row.rpk-auto-selected {
    border-color: #3B82F6;
    background: rgba(59, 130, 246, 0.06);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15), 0 2px 8px rgba(59, 130, 246, 0.08);
}

.rpk-result-row.rpk-auto-selected .rpk-result-char {
    background: #3B82F6;
    color: #fff;
    border-color: #3B82F6;
}

.rpk-result-row.rpk-auto-selected:hover {
    border-color: #2563EB;
    background: rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2), 0 4px 12px rgba(59, 130, 246, 0.12);
}

.rpk-enter-hint {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* ─── JLPT badge ───────────────────────────────────────────────────────────── */

.rpk-jlpt {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rpk-jlpt-n5 { background: #dcfce7; color: #166534; }
.rpk-jlpt-n4 { background: #dbeafe; color: #1e40af; }
.rpk-jlpt-n3 { background: #fef3c7; color: #92400e; }
.rpk-jlpt-n2 { background: #fce7f3; color: #9d174d; }
.rpk-jlpt-n1 { background: #ede9fe; color: #5b21b6; }

/* Dark theme adjustments */
.dark .rpk-jlpt-n5 { background: rgba(34, 197, 94, 0.15); color: #86efac; }
.dark .rpk-jlpt-n4 { background: rgba(59, 130, 246, 0.15); color: #93bbfd; }
.dark .rpk-jlpt-n3 { background: rgba(234, 179, 8, 0.15); color: #fde047; }
.dark .rpk-jlpt-n2 { background: rgba(236, 72, 153, 0.15); color: #f9a8d4; }
.dark .rpk-jlpt-n1 { background: rgba(139, 92, 246, 0.15); color: #c4b5fd; }

/* ─── Studying badge ───────────────────────────────────────────────────────── */

.rpk-studying-badge {
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
    font-weight: 500;
    flex-shrink: 0;
}

.rpk-result-row.rpk-studying {
    opacity: 0.7;
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .rpk-cell {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .rpk-stroke-badge {
        min-width: 22px;
        height: 36px;
        font-size: 0.65rem;
        padding: 0 4px;
        margin-left: 6px;
    }

    /* Stack vertically on mobile */
    .rpk-layout {
        flex-direction: column;
        height: auto;
    }

    .rpk-left {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .rpk-right {
        width: 100%;
    }

    .rpk-left .rpk-grid-scroll {
        max-height: 240px;
    }

    .rpk-right .rpk-results-grid {
        max-height: 200px;
    }

    .rpk-result-char {
        font-size: 1.5rem;
        min-width: 40px;
        height: 40px;
    }
}