/* ==========================================================================
   探す (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;
    }

    /* The placeholder is an invitation, not content — it rests in faint
       ink so the empty palette reads as quiet paper, not a loud prompt. */
    .vocab-panel .panel-search-input::placeholder {
        color: var(--color-faint);
        font-weight: 400;
    }

    /* 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 {
        background: transparent;   /* ghost — the filled box read as chrome */
        color: var(--color-stone);
        transition: opacity 0.15s ease, background-color 0.2s ease, color 0.2s ease;
    }
    .vocab-panel .panel-close:hover {
        background: rgba(44, 44, 44, 0.05);
        color: var(--color-ink);
    }
    .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,
    .vocab-panel .result-altw 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;
    }

    /* Status speaks ONCE, from the thumbnail corner. The right-edge dot and
       the left accent ribbon are the MOBILE sheet's signals (styled only in
       its media block) — on desktop they rendered as unstyled inline spans
       inside the flex row, eating a gap-width and shoving that row's POS
       badge out of the aligned column (the ragged-badges bug). */
    .vocab-panel .result-status-dot,
    .vocab-panel .result-accent-line {
        display: none;
    }

    /* (Footer retired 2026-07-12 — see vocab-panel.css.) */

    /* ── 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);
    }

    /* ── Open-empty state — Recent / Try chips (polish 2026-07-12) ─────── */
    /* The open palette is an invitation, not a void: recent lookups return
       as chips (continuity), or first-open example chips that teach the
       tri-modal input by example. Same washi-chip species as did-you-mean. */
    .vocab-panel .vocab-search-recent-label {
        font-family: var(--font-ui);
        font-size: 11px;
        font-weight: 500;
        color: var(--color-faint);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 12px 10px 8px;
    }
    /* the recents label speaks the house pattern — 最近 saikin · recent
       (M3): embedded JP sheds the tracked caps, romaji goes italic */
    .vocab-panel .vocab-search-recent-label [lang="ja"] {
        font-family: var(--font-jp);
        font-size: 13px;
        letter-spacing: 0;
        text-transform: none;
        color: var(--color-stone);
    }
    .vocab-panel .vocab-search-recent-label i {
        font-style: italic;
        text-transform: none;
        letter-spacing: 0.02em;
    }
    .vocab-panel .vocab-search-chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 10px 16px;
    }
    .vocab-panel .vocab-search-chip {
        display: inline-flex;
        align-items: baseline;
        gap: 7px;
        padding: 6px 14px;
        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-chip:hover {
        background: rgba(61, 90, 128, 0.06);
        border-color: rgba(61, 90, 128, 0.25);
        transform: none;
    }
    .vocab-panel .vocab-search-chip:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }
    .vocab-panel .vocab-search-chip .chip-roma {
        font-family: var(--font-ui);
        font-style: italic;
        font-size: 12px;
        color: var(--color-romaji);
    }
    /* The mobile sheet's tip line ("hold a word to hear it") is touch
       grammar — the desktop placeholder already teaches the input modes. */
    .vocab-panel .vocab-search-tip {
        display: none;
    }

    /* ── 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;
    }
}

/* ==========================================================================
   The lookup's ONE door on every desktop surface (owner ruling 2026-07-12):
   a bare magnifying glass — no label, no second verb. It opens the palette,
   which finds words, kanji and collections.
   ========================================================================== */

.lookup-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    box-shadow: none;
    cursor: pointer;
    color: var(--color-ink);
    opacity: 0.72;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.lookup-glass svg { width: 17px; height: 17px; }
.lookup-glass:hover,
.lookup-glass:active {
    background: rgba(44, 44, 44, 0.05);
    opacity: 1;
    box-shadow: none;
    transform: none;
}
.lookup-glass:focus {
    outline: none;
}
.lookup-glass:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    opacity: 1;
}

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

/* ── Collections rows (slice 3) — the same result-row species: cover
   painting (or the 道 place glyph on washi), name, JP·romaji, honest count
   in the badge column. Committing ENTERS the collection. ── */
.vocab-search-result--collection .result-col-name {
    font-family: var(--font-ui, 'Inter', sans-serif);
    font-size: 14.5px;
    font-weight: 600;
}
.vocab-search-result--collection .result-col-jp {
    font-family: var(--font-jp, 'Klee One', sans-serif);
    font-size: 13px;
    color: var(--color-stone, #57534e);
}
.result-thumb--place {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-paper, #F0EDE8) 94%, var(--color-ink, #2C2C2C));
}
.result-thumb--place [lang="ja"] {
    font-family: var(--font-jp, 'Klee One', sans-serif);
    font-size: 19px;
    color: var(--color-ink, #2C2C2C);
    opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
    .vocab-panel,
    .vocab-panel-backdrop {
        transition: none;
    }
    /* Killing the entrance animation must also LAND its end state. The row's
       base rule (css/vocab-panel.css:253) parks it at opacity:0 and relies on
       panelResultFadeIn / mobileResultEnter to bring it in; with the animation
       gone and nothing restoring opacity, every result stayed invisible — the
       one lookup surface returned a blank sheet for anyone running Reduce
       Motion. Restore the resting state the animation would have reached. */
    .vocab-panel .vocab-search-result {
        animation: none;
        opacity: 1;
        transform: none;
    }
}