/* ==========================================================================
   探す (sagasu) — the global lookup palette. Desktop housing (≥769px).

   One quiet centered card on a dim scrim: the LOOKUP verb ("take me to it,
   from anywhere"), silhouette-distinct from the left-edge / in-beam FILTER
   ("rearrange this wall"). The engine (js/vocab-search.js) binds by element
   id, so this file only re-houses the same DOM; the mobile bottom sheet
   keeps its skin in vocab-panel.css.

   Stacking law (docs/SEARCH_ARCHITECTURE.md §5.4): scrim/card ride the
   lookup z tokens from tokens.css — above every page surface (hall tops out
   at 9600); only transient pointer-blind feedback may exceed them.

   和の感性: washi card, one hairline, minimal shadow, no blur, no entrance
   theater — the results are the decoration.
   ========================================================================== */

@media (min-width: 769px) {

    /* ── Scrim ─────────────────────────────────────────────────────────── */
    /* visibility must flip INSTANTLY on open (0s) and only after the fade on
       close (0s + .16s delay): a transitioned visibility is still computed
       hidden in the tick .open/.active lands, and focus() on a hidden
       element silently fails — the palette would open unfocused. */
    .vocab-panel-backdrop {
        background: rgba(44, 44, 44, 0.32);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition: opacity 0.16s ease, visibility 0s linear 0.16s;
    }
    .vocab-panel-backdrop.active {
        transition: opacity 0.16s ease, visibility 0s;
    }

    /* ── Card ──────────────────────────────────────────────────────────── */
    .vocab-panel {
        top: 14vh;
        left: 50%;
        right: auto;
        bottom: auto;
        width: min(640px, calc(100vw - 96px));
        max-height: min(560px, 68vh);
        transform: translateX(-50%);
        background: var(--color-card);            /* #FAFAF7 washi */
        border: 1px solid rgba(44, 44, 44, 0.08);
        border-radius: var(--radius-lg);
        box-shadow: 0 8px 40px rgba(44, 44, 44, 0.06);   /* warm sumi, per token guard */
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        /* same instant-on / delayed-off visibility discipline as the scrim —
           the controller focuses the input synchronously on open */
        transition: opacity 0.14s ease, visibility 0s linear 0.14s;
    }

    .vocab-panel.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.14s ease, visibility 0s;
    }

    /* ── Header — bare-line input on the washi, one hairline under ─────── */
    .vocab-panel .panel-header {
        padding: 6px 18px 0;
        background: transparent;
        border-bottom: none;
    }

    .vocab-panel .panel-search {
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--color-divider);
        border-radius: 0;
        padding: 14px 2px 12px;
        gap: 12px;
        box-shadow: none;
    }

    .vocab-panel .panel-search:focus-within {
        background: transparent;
        border-color: rgba(44, 44, 44, 0.28);
        box-shadow: none;
    }

    .vocab-panel .panel-search-input {
        font-size: 1.15rem;
        font-weight: 450;
    }

    /* Ghost completion must share the input's metrics exactly */
    .vocab-panel .search-ghost {
        font-size: 1.15rem;
        font-weight: 450;
    }

    /* The ✕ clears text — with nothing to clear it rests (Esc and the scrim
       already close the palette). :has() reaches past the JS-inserted
       typeahead wrapper around the input. visibility (not just opacity) so
       the resting button is also unfocusable — an opacity-0 button would
       still take Tab focus and swallow Enter invisibly. */
    .vocab-panel .panel-close {
        transition: opacity 0.15s ease, background-color 0.2s ease, color 0.2s ease;
    }
    .vocab-panel .panel-search:has(.panel-search-input:placeholder-shown) .panel-close {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* ── Content ───────────────────────────────────────────────────────── */
    .vocab-panel .panel-content {
        padding: 8px 10px 10px;
    }

    .vocab-panel .panel-result-count {
        display: none;
        font-family: var(--font-ui);
        font-size: 11px;
        font-weight: 500;
        color: var(--color-faint);
        letter-spacing: 0.06em;
        padding: 6px 10px 4px;
    }
    .vocab-panel .panel-result-count.visible {
        display: block;
    }

    /* ── Result rows — thumbnail + Japanese + romaji · gloss + status ──── */
    .vocab-panel .vocab-search-result {
        padding: 9px 10px;
        border-radius: 10px;
        background: transparent;
        border: none;
        margin-bottom: 2px;
        gap: 14px;
        animation: paletteRowIn 0.12s ease both;
    }

    @keyframes paletteRowIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .vocab-panel .vocab-search-result:hover,
    .vocab-panel .vocab-search-result.selected,
    .vocab-panel .vocab-search-result.previewing {
        background: rgba(44, 44, 44, 0.045);
        border: none;
        padding-left: 10px;
        transform: none;
    }

    .vocab-panel .vocab-search-result:active {
        transform: scale(0.995);
        background: rgba(44, 44, 44, 0.06);
    }

    /* Thumbnail — the scenic watercolor IS the visual interest */
    .vocab-panel .result-thumb {
        display: block;
        width: 48px;
        height: 48px;
        border-radius: 10px;
        background: var(--color-paper);
        overflow: hidden;
        flex-shrink: 0;
        position: relative;
        box-shadow: 0 0 0 0.5px rgba(216, 210, 200, 0.7);
    }
    .vocab-panel .result-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: 0;
        transition: opacity 0.25s ease;
    }
    .vocab-panel .result-thumb img.loaded {
        opacity: 1;
    }
    .vocab-panel .result-thumb.no-image::before {
        content: "言";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-jp);
        font-size: 19px;
        color: var(--color-divider);
    }

    /* Learning status — thumbnail-corner dot, scarcity-compliant:
       learning = gold, known = moss, new = nothing. */
    .vocab-panel .result-thumb .status-dot {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 1.5px solid var(--color-card);
        z-index: 1;
    }
    .vocab-panel .result-thumb .status-dot--learning { background: var(--color-gold); }
    .vocab-panel .result-thumb .status-dot--known    { background: var(--color-moss); }

    /* Fill the row so space-between actually reaches the right edge — the
       POS tags read as one aligned column, not confetti after each gloss. */
    .vocab-panel .result-compact {
        flex: 1;
        min-width: 0;
        align-items: center;
    }

    .vocab-panel .result-japanese {
        font-size: 1.25em;
        font-weight: 500;
        color: var(--color-ink);
        margin-bottom: 3px;
    }

    /* Romaji reads as romaji (4-type text system) — italic warm gray,
       never the interactive indigo. */
    .vocab-panel .result-romanization {
        color: var(--color-romaji);
        font-style: italic;
        font-weight: 400;
    }

    /* Match highlight — the same sumi-brush gold underline as mobile,
       paper-and-ink instead of a pill. */
    .vocab-panel .result-japanese mark,
    .vocab-panel .result-romanization mark,
    .vocab-panel .result-english mark {
        background: linear-gradient(
            transparent 62%,
            rgba(201, 169, 110, 0.28) 62%,
            rgba(201, 169, 110, 0.28) 92%,
            transparent 92%
        );
        color: inherit;
        padding: 0 1px;
        margin: 0;
        border-radius: 0;
    }

    /* Meta column: quiet neutral POS tag; the ● indicator duplicates the
       thumb-corner dot, so it rests. */
    .vocab-panel .result-badge {
        background: rgba(44, 44, 44, 0.045);
        color: var(--color-stone);
    }
    .vocab-panel .result-progress {
        display: none;
    }

    /* ── Footer — keyboard hints ───────────────────────────────────────── */
    .vocab-panel .panel-footer {
        padding: 9px 18px;
        background: transparent;
        border-top: 1px solid rgba(44, 44, 44, 0.06);
        gap: 18px;
    }

    /* ── Sections — Words / Kanji (search slice 2) ─────────────────────── */
    /* Labels appear only when the Kanji block does; a words-only list keeps
       its bare, furniture-free look. Same quiet voice as the dym label. */
    .vocab-panel .vocab-search-section-label {
        font-family: var(--font-ui);
        font-size: 11px;
        font-weight: 500;
        color: var(--color-faint);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 10px 10px 5px;
    }
    .vocab-panel .vocab-search-nowords {
        font-family: var(--font-ui);
        font-size: 13px;
        color: var(--color-stone);
        padding: 12px 10px 2px;
    }
    /* Layer-2 not landed yet: one quiet line, never a spinner (§4). */
    .vocab-panel .vocab-search-kanji-pending {
        font-family: var(--font-ui);
        font-size: 12.5px;
        color: var(--color-faint);
        padding: 6px 10px 12px;
    }

    /* Kanji rows — the glyph carries the row; readings speak kun/on in the
       family colours (indigo / terracotta — the kanji wall's own voice),
       romaji visible beside each reading (the romaji-on-every-token law). */
    .vocab-panel .result-thumb--kanji {
        background: #f6f3ec;   /* the sumi-e story image's warm paper */
    }
    .vocab-panel .result-kanji-glyph {
        font-size: 1.45em;
        line-height: 1.15;
    }
    .vocab-panel .result-kanji-readings {
        display: inline-flex;
        align-items: baseline;
        gap: 10px;
        margin-left: 10px;
    }
    .vocab-panel .krd { display: inline-flex; align-items: baseline; gap: 4px; }
    .vocab-panel .krd [lang="ja"] { font-family: var(--font-jp); font-size: 12.5px; }
    .vocab-panel .krd--kun { color: var(--color-accent); }   /* the kun indigo */
    .vocab-panel .krd--on  { color: #9E5E43; }               /* the on terracotta (kanji-grid's own) */
    .vocab-panel .krd-ro {
        font-family: var(--font-ui);
        font-style: italic;
        font-size: 11px;
        color: var(--color-romaji);
    }

    /* ── Empty state + did-you-mean ────────────────────────────────────── */
    .vocab-panel .vocab-search-empty {
        padding: 34px 20px 30px;
    }
    .vocab-panel .vocab-search-empty-icon {
        display: none;   /* the magnifier glyph is chrome — the text suffices */
    }

    .vocab-panel .vocab-search-dym {
        margin-top: 16px;
    }
    .vocab-panel .vocab-search-dym-label {
        font-family: var(--font-ui);
        font-size: 11px;
        font-weight: 500;
        color: var(--color-faint);
        letter-spacing: 0.06em;
        margin-bottom: 8px;
    }
    .vocab-panel .vocab-search-dym-chip {
        display: inline-flex;
        align-items: baseline;
        padding: 6px 14px;
        margin: 0 4px;
        border-radius: var(--radius-full);
        background: var(--color-card-bright);
        border: 1px solid rgba(44, 44, 44, 0.08);
        box-shadow: none;
        color: var(--color-ink);
        font-family: var(--font-jp);
        font-size: 15px;
        cursor: pointer;
        transition: background 0.15s ease, border-color 0.15s ease;
    }
    .vocab-panel .vocab-search-dym-chip:hover {
        background: rgba(61, 90, 128, 0.06);
        border-color: rgba(61, 90, 128, 0.25);
        box-shadow: none;
        transform: none;
    }
    .vocab-panel .vocab-search-dym-chip .chip-roma {
        font-family: var(--font-ui);
        font-style: italic;
        font-size: 12px;
        color: var(--color-romaji);
        margin-left: 7px;
    }
    .vocab-panel .vocab-search-dym-chip:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }
}

/* ==========================================================================
   探す affordance — the lookup's visible door on each desktop surface.
   A quiet text control: 探す + its romaji always visible on-screen
   (the romaji-on-every-token law), optional ⌘K teaching hint.
   Utility chrome like the beam magnifier — never a second magnifier.
   ========================================================================== */

.sagasu-btn {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 5px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    box-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}
.sagasu-btn:hover,
.sagasu-btn:active {
    background: rgba(44, 44, 44, 0.05);
    box-shadow: none;
    transform: none;
}
.sagasu-btn:focus {
    outline: none;
}
.sagasu-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.sagasu-btn .sagasu-jp {
    font-family: var(--font-jp);
    font-size: 15px;
    line-height: 1;
    color: var(--color-ink);
}
.sagasu-btn .sagasu-roma {
    font-family: var(--font-ui);
    font-style: italic;
    font-size: 11.5px;
    line-height: 1;
    color: var(--color-romaji);
}
/* (The on-control ⌘K hint was cut — owner decision 2026-07-12: quiet
   control; the shortcut is taught in the ? sheet.) */

/* Mobile never shows the desktop affordance (its lookup is the
   journey-search overlay). */
@media (max-width: 768px) {
    .sagasu-btn {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vocab-panel,
    .vocab-panel-backdrop {
        transition: none;
    }
    .vocab-panel .vocab-search-result {
        animation: none;
    }
}