/* ═══════════════════════════════════════════════════════════════════════════════
   Draw Search — Triptych layout: canvas | candidates | kanji showcase
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Draw Toggle Button (in spotlight header) ────────────────────────────── */

.spotlight-draw-toggle {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: transparent;
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    position: relative;
    overflow: hidden;
}

.spotlight-draw-toggle:hover {
    background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.1));
    color: var(--color-text-primary, #fff);
}

.spotlight-draw-toggle.active {
    color: #3B82F6;
    background: rgba(59, 130, 246, 0.15);
}

/* ─── Periodic rainbow shine sweep (matches rpk-toggle shine) ────────────── */

.spotlight-draw-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%,
        rgba(192, 132, 252, 0.28) 47%,
        rgba(16, 185, 129, 0.18)  57%,
        rgba(250, 204, 21, 0.12)  64%,
        transparent            73%
    );
    transform: translateX(-100%) skewX(-10deg);
    animation: draw-toggle-shine 5s ease-in-out infinite;
    animation-delay: 2.5s;
    pointer-events: none;
}

/* No shine while active — blue tint already draws the eye */
.spotlight-draw-toggle.active::after {
    display: none;
}

@keyframes draw-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) {
    .spotlight-draw-toggle::after {
        animation: none;
        opacity: 0;
    }
}

/* ─── Draw Mode Label ─────────────────────────────────────────────────────── */

.spotlight-draw-label {
    flex: 1;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-text-muted, #6b7280);
    user-select: none;
}

/* ─── Main Panel ──────────────────────────────────────────────────────────── */

.draw-panel {
    padding: 0.75rem;
}

/* ─── Triptych: three-column layout ──────────────────────────────────────── */

.draw-triptych {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    min-height: 280px;
}

/* Left column: canvas + controls */
.draw-col-left {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* Center column: candidate grid */
.draw-col-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Right column: showcase */
.draw-col-right {
    flex-shrink: 0;
    width: 240px;
    display: flex;
    flex-direction: column;
}

/* ─── Canvas ─────────────────────────────────────────────────────────────── */

.draw-canvas-wrapper {
    width: 280px;
    height: 280px;
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--color-bg-primary, #111);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
}

.light .draw-canvas-wrapper {
    background: #f3f4f6;
    border-color: rgba(0, 0, 0, 0.15);
}

.draw-canvas {
    display: block;
    cursor: crosshair;
    touch-action: none;
    border-radius: 0.75rem;
}

/* ─── Controls ────────────────────────────────────────────────────────────── */

.draw-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.125rem 0;
}

.draw-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary, #9ca3af);
    background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.draw-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text-primary, #fff);
    border-color: rgba(255, 255, 255, 0.2);
}

.draw-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.draw-btn svg {
    flex-shrink: 0;
}

.draw-btn-retry {
    color: #3B82F6;
    border-color: rgba(59, 130, 246, 0.3);
}

.draw-btn-retry:hover {
    background: rgba(59, 130, 246, 0.15);
}

.draw-stroke-count {
    font-size: 0.7rem;
    color: var(--color-text-muted, #6b7280);
    font-variant-numeric: tabular-nums;
    min-width: 4rem;
    text-align: center;
}

/* ─── Candidate Grid (center column) ─────────────────────────────────────── */

.draw-candidate-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, 2.25rem);
    align-content: start;
    gap: 3px;
    padding: 0.25rem;
    flex: 1;
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    border-radius: 0.5rem;
    background: var(--color-bg-secondary, rgba(255, 255, 255, 0.02));
    overflow-y: auto;
    scrollbar-width: thin;
}

.draw-candidate-grid::-webkit-scrollbar {
    width: 4px;
}

.draw-candidate-grid::-webkit-scrollbar-thumb {
    background: var(--color-border, rgba(255, 255, 255, 0.15));
    border-radius: 2px;
}

.draw-candidate {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.25rem;
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
    background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
    border-radius: 0.375rem;
    color: var(--color-text-primary, #fff);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.1s;
    flex-shrink: 0;
}

.draw-candidate:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    transform: scale(1.08);
}

.draw-candidate.selected {
    background: rgba(59, 130, 246, 0.25);
    border-color: #3B82F6;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3);
}

/* ─── Placeholder & Loading ───────────────────────────────────────────────── */

.draw-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.8125rem;
    pointer-events: none;
}

.draw-placeholder-kanji {
    font-size: 6rem;
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', serif;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.06);
    user-select: none;
    line-height: 1;
}

.light .draw-placeholder-kanji {
    color: rgba(0, 0, 0, 0.06);
}

.draw-loading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.8125rem;
    padding: 0.5rem;
    justify-content: center;
}

.draw-spinner {
    width: 1.25rem;
    height: 1.25rem;
    animation: draw-spin 1s linear infinite;
}

@keyframes draw-spin {
    to { transform: rotate(360deg); }
}

.draw-error {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #EF4444;
    font-size: 0.8125rem;
    padding: 0.5rem;
    justify-content: center;
}

/* ─── Showcase (right column — lite item detail) ─────────────────────────── */

.draw-showcase {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--color-bg-secondary, rgba(255, 255, 255, 0.02));
}

.draw-showcase-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.draw-showcase-empty-icon {
    font-size: 3rem;
    color: var(--color-border, rgba(255, 255, 255, 0.08));
    font-weight: 700;
    user-select: none;
}

.draw-showcase-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: background 0.15s;
    padding: 0.5rem;
}

.draw-showcase-inner:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Handdrawn kanji display — rendered by HanziWriter */
.draw-showcase-char {
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7rem;
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
    color: var(--color-text-primary, #fff);
    line-height: 1;
}

/* Replay stroke order button */
.draw-showcase-replay {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--showcase-accent, #3B82F6);
    background: transparent;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border: 1px solid color-mix(in srgb, var(--showcase-accent, #3B82F6) 30%, transparent);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    margin-top: 0.25rem;
}

.draw-showcase-replay:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.5);
    background: color-mix(in srgb, var(--showcase-accent, #3B82F6) 12%, transparent);
    border-color: color-mix(in srgb, var(--showcase-accent, #3B82F6) 50%, transparent);
}

/* Info section below the character */
.draw-showcase-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem 0;
    text-align: center;
    width: 100%;
}

.draw-showcase-meaning {
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #d1d5db);
    line-height: 1.3;
}

.draw-showcase-reading {
    font-size: 0.75rem;
    color: var(--color-text-muted, #9ca3af);
}

.draw-showcase-badges {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.125rem;
}

/* "View detail" link at bottom */
.draw-showcase-open {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-text-muted, #6b7280);
    opacity: 0;
    transition: opacity 0.15s;
}

.draw-showcase-inner:hover .draw-showcase-open,
.draw-showcase-inner:focus-within .draw-showcase-open {
    opacity: 1;
}

.draw-showcase-open:focus-visible {
    outline: 2px solid var(--showcase-accent, #3B82F6);
    outline-offset: 2px;
}

/* ─── Badges (shared) ─────────────────────────────────────────────────────── */

.draw-badge {
    display: inline-flex;
    padding: 0.1rem 0.35rem;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.draw-badge-jlpt {
    background: rgba(59, 130, 246, 0.15);
    color: #60A5FA;
}

.draw-badge-studying {
    background: rgba(16, 185, 129, 0.15);
    color: #34D399;
}

.draw-no-data {
    font-style: italic;
    color: var(--color-text-muted, #6b7280);
}

/* ─── Light Theme ─────────────────────────────────────────────────────────── */

.light .draw-candidate {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--color-text-primary, #111);
}

.light .draw-candidate:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.light .draw-candidate.selected {
    background: rgba(59, 130, 246, 0.15);
    border-color: #3B82F6;
}

.light .draw-candidate-grid {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

.light .draw-showcase {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

.light .draw-showcase-inner:hover {
    background: rgba(0, 0, 0, 0.03);
}

.light .draw-showcase-empty-icon {
    color: rgba(0, 0, 0, 0.08);
}

.light .draw-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--color-text-secondary, #4b5563);
}

.light .draw-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.08);
}

.light .draw-badge {
    background: rgba(0, 0, 0, 0.06);
}

/* ─── Responsive (Mobile) ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .draw-triptych {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .draw-col-left {
        width: 100%;
        align-items: center;
    }

    .draw-col-center {
        width: 100%;
        max-height: 120px;
    }

    .draw-col-right {
        width: 100%;
    }

    .draw-canvas-wrapper {
        width: 100%;
        max-width: 280px;
        height: auto;
        aspect-ratio: 1;
    }

    .draw-showcase-char {
        width: 100px;
        height: 100px;
        font-size: 5rem;
    }

    .draw-candidate {
        width: 2rem;
        height: 2rem;
        font-size: 1.1rem;
    }
}