/* ==========================================================================
   探す (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%);
        /* desktop polish round 2 (13 October 2026), finding 12: ONE MENU
           CARD dress, the same for every card that pops (the lesson's ⋮ card
           in course-lesson.css is the reference; the hall's ⋯ card and the
           account menu wear it too): bright paper, one 10 per cent hairline,
           the 8px radius, the two-layer resting shadow. Width, top, the scrim
           and the visibility discipline stay the palette's own. Nothing
           inside rounds itself to the card's corners (the header is
           transparent and unrounded); the card's overflow clip does it. */
        background: var(--color-card-bright, #FEFDFB);
        border: 1px solid rgba(44, 44, 44, 0.10);
        border-radius: var(--radius, 8px);
        box-shadow: 0 1px 2px rgba(44, 44, 44, 0.04), 0 2px 8px rgba(44, 44, 44, 0.05);   /* 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;
        /* 13 and 11, not 14 and 12: the ✕'s 34px seat (below) is the row's
           tallest item, so the row keeps its round-2 height of 59px */
        padding: 13px 2px 11px;
        gap: 12px;
        box-shadow: none;
    }

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

    /* desktop polish round 3, finding 10: the field wears NO ring. It owns
       the focus for as long as the palette is open (a text field matches
       :focus-visible whenever it holds the caret), so a ring would never
       leave it; its cue is the caret and the underline darkening above.
       The ✕ and the chips wear the one ring. */
    .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.

       desktop polish round 3, finding 8: ONE CLOSE, the round-2 door's seat
       (the glass below, the lesson's ⋮): a 34px square on 8px corners, the
       glyph at 16px, faint warm ink at rest, ink on a 5 per cent wash under
       the pointer. No shadow at rest or on hover: components.css gives every
       button a raised shadow, and this ✕ was the one lifted thing on a card
       that rests. */
    .vocab-panel .panel-close {
        flex: none;
        width: 34px;
        height: 34px;
        padding: 0;
        border: none;
        border-radius: 8px;
        background: transparent;
        box-shadow: none;
        color: var(--color-faint-warm, #6E6860);
        transition: opacity 0.15s ease, background-color 0.2s ease, color 0.2s ease;
    }
    /* the svg's viewBox is 14 units wide: 1.75 units draw 2px at 16px */
    .vocab-panel .panel-close svg {
        width: 16px;
        height: 16px;
        stroke-width: 1.75;
    }
    .vocab-panel .panel-close:hover,
    .vocab-panel .panel-close:active {
        background: rgba(44, 44, 44, 0.05);
        color: var(--color-ink, #2C2C2C);
        box-shadow: none;
        transform: none;
    }
    /* ONE RING; base.css adds a 4px halo to every focused button */
    .vocab-panel .panel-close:focus-visible {
        outline: 2px solid var(--color-accent, #3D5A80);
        outline-offset: 2px;
        box-shadow: none;
    }
    .vocab-panel .panel-search:has(.panel-search-input:placeholder-shown) .panel-close {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* ── Content ───────────────────────────────────────────────────────── */
    /* desktop polish round 3, finding 11: the list's foot. A 24px fade into
       the card's paper, so the row the card's edge cuts dissolves instead of
       reading as sliced, and a 24px scroll padding, so a row the arrows
       select is scrolled clear of it. The fade is a mask on the scroller,
       never a painted band, so it is always exactly the card's paper. */
    .vocab-panel .panel-content {
        padding: 8px 10px 10px;
        scroll-padding-bottom: 24px;
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
        /* the side panels' scrollbar (css/browse-sidebar.css): the standard
           properties go back to auto because, while either is set, Chrome
           ignores the ::-webkit-scrollbar rules below */
        scrollbar-width: auto;
        scrollbar-color: auto;
    }
    .vocab-panel .panel-content::-webkit-scrollbar { width: 3px; }
    .vocab-panel .panel-content::-webkit-scrollbar-track { background: transparent; }
    .vocab-panel .panel-content::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 3px;
        transition: background 0.3s ease;
    }
    .vocab-panel .panel-content:hover::-webkit-scrollbar-thumb {
        background: rgba(44, 44, 44, 0.08);
    }

    .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 ──── */
    /* desktop polish round 3, finding 11: no entrance. The list re-renders
       on every keystroke, so any row animation re-runs on every key; the one
       fade is the card's own 140ms on open. The rows also shed the legacy
       dropdown's glass blur (css/vocab-search.css), which blurred flat paper. */
    .vocab-panel .vocab-search-result {
        padding: 9px 10px;
        border-radius: 10px;
        background: transparent;
        border: none;
        margin-bottom: 2px;
        gap: 14px;
        animation: none;
        opacity: 1;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    /* the list's bottom air: the last row clears the 24px foot fade */
    .vocab-panel .vocab-search-result:last-child {
        margin-bottom: 16px;
    }

    /* the selected row wears the hover wash alone: the legacy dropdown's
       blue-tinted shadow (css/vocab-search.css) is cut here */
    .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;
        box-shadow: 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);
    }

    /* desktop polish round 3, finding 12: ONE MARK. The state dot sits
       inside the thumb's rounded clip, 5px in from its top-right corner (it
       hung at -2px, where the clip cut it away: the palette showed no state
       at all), the 6px dot of the wall's tile inside a 1px paper ring.
       Learning amber, Resting moss, Coming back the brighter moss, New
       nothing; gold is kintsugi's, never a state. */
    .vocab-panel .result-thumb .status-dot {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 1px solid var(--color-card-bright, #FEFDFB);
        z-index: 1;
        /* components.css's global .status-dot (a legacy text glyph) dims it
           to .9 and grows it under the pointer: the mark prints its state's
           ink whole, and the pointer belongs to the row */
        opacity: 1;
        pointer-events: none;
    }
    .vocab-panel .result-thumb .status-dot--learning { background: var(--color-amber, #A07850); }
    .vocab-panel .result-thumb .status-dot--known    { background: var(--color-moss, #6B7F5C); }
    .vocab-panel .result-thumb .status-dot--coming   { background: var(--color-moss-bright, #5B8C5A); }

    /* 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,
    .vocab-panel .result-kanji-readings mark,
    .vocab-panel .vocab-search-line 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);
    }

    /* ── S4 — meet-later rows: unprimed paper, palette-native (2026-08-18).
       A word the corpus glosses that has no card yet. The first dress boxed
       every row in its own dashed coupon on a beige wash — three of them
       outshouted the one real result above. Redesigned to the palette's own
       grammar: rows are the same clean paper as every row (the section
       label already fences the group), and ONE mark carries the state — the
       empty thumb FRAME, a fine dashed hairline where the painting will
       hang (study-walk's "the empty tile-space is the signal"). Ink one
       step back but fully legible (the row has to TEACH); the band chip
       goes ghost — outline, never fill — solid pills belong to words that
       are IN the app. ⛔ Dim by COLOUR, never opacity (opacity composites
       the subtree); hover changes ink, never geometry. */
    .vocab-panel .vocab-search-result--later {
        background: transparent;
        border: none;
    }
    .vocab-panel .vocab-search-result--later:hover,
    .vocab-panel .vocab-search-result--later.selected,
    .vocab-panel .vocab-search-result--later.previewing {
        background: rgba(44, 44, 44, 0.045);   /* the standard row wash — native */
        border: none;
    }
    .vocab-panel .vocab-search-result--later .result-japanese { color: #6b6459; }
    .vocab-panel .vocab-search-result--later .result-romanization { color: #b3a892; }
    .vocab-panel .vocab-search-result--later .result-english { color: #8f887a; }
    /* the one mark: an empty frame waiting for its painting */
    .vocab-panel .vocab-search-result--later .result-thumb {
        background: rgba(122, 108, 88, 0.03);
        box-shadow: none;
        border: 1px dashed rgba(122, 108, 88, 0.30);
    }
    /* the repeated 言 tile taught nothing — the empty frame speaks alone */
    .vocab-panel .vocab-search-result--later .result-thumb.no-image::before {
        content: none;
    }
    .vocab-panel .vocab-search-result--later:hover .result-thumb,
    .vocab-panel .vocab-search-result--later.selected .result-thumb,
    .vocab-panel .vocab-search-result--later.previewing .result-thumb {
        border-color: rgba(122, 108, 88, 0.44);
    }
    /* band chip in the ghost register — same seat, quieter voice */
    .vocab-panel .vocab-search-result--later .result-badge {
        background: transparent;
        box-shadow: inset 0 0 0 1px rgba(122, 108, 88, 0.26);
        color: #948c7c;
    }

    /* ── ⚖ 21 October 2026: the course's search (js/vocab-search.js performCourseSearch) ─────────────
       On the 稽古 Course portal and the 単語帳 Flashcards shelf the palette is the course's: the course's sheet for its
       paper, its labels in kanji + English, each taught result's lesson as a tag in the micro-label of the course word
       page's foot (css/word-page.css .wp-colo-lines), and the grey lines of what the course has not taught yet. Nothing
       new in colour: the inks are the palette's own (the stone of the tag it replaces, the meet-later rows' greys, the
       faint), the one accent the presses'. */
    .vocab-panel.vocab-panel--course {
        background: var(--cl-sheet, #FFFFFB);
    }
    /* ⭐ THE DESIGN ELEVATION, STEPS 1 AND 2 (1 November 2026; css/course-lesson.css #kotobaLesson says the palette): under
       the course the palette is a slip of the course's 胡粉 (gofun) #FFFFFB, told by its shadow and never by a ring, over a
       veil of the rooms' paper (白練, never the app's grey scrim, which dimmed the course to #B3B1AD); its inks the course's
       (the sumi for the cold #2C2C2C, the stone, the one quiet ink for the faint: the labels 3.45 → 5.99:1), its little
       paintings melted into the slip on the house's lift. Dim stays a colour, never an opacity. The app's own palette, over
       the hall, keeps its dress. */
    .vocab-panel.vocab-panel--course {
        --color-ink: #2A231F;
        --color-jp-text: #2A231F;
        --color-stone: #514A44;
        --color-faint: #69625A;
        --color-faint-warm: #69625A;
        border-color: transparent;
        box-shadow: 0 1px 3px rgba(42, 35, 31, 0.06), 0 22px 56px -22px rgba(42, 35, 31, 0.28);
    }
    /* the suggestion after what you typed (`day` → `; the sun`): readable, so the quiet ink and opaque, and told from the typed
       text by a second cue that is neither a colour nor a fade (the review round, 1 November 2026: at one ink step from the
       typed sumi a stranger read the field as filled): a breath of sumi under it, as a selection marks what a key will take */
    .vocab-panel.vocab-panel--course .search-ghost-completion { color: #69625A; opacity: 1; background: rgba(42, 35, 31, 0.07); border-radius: 2px; }
    .vocab-panel.vocab-panel--course { --color-text-secondary: #514A44; }   /* the shelf's .result-kana reads it: the stone, not #57534E */
    .vocab-panel.vocab-panel--course .result-thumb { background: transparent; box-shadow: none; }
    .vocab-panel.vocab-panel--course .result-thumb img { filter: url(#cl-washi); mix-blend-mode: multiply; }
    .vocab-panel.vocab-panel--course .vocab-search-line,
    .vocab-panel.vocab-panel--course .vocab-search-line .vsl-kana,
    .vocab-panel.vocab-panel--course .vocab-search-line .vsl-en { color: #69625A; }
    .vocab-panel.vocab-panel--course .vocab-search-line .vsl-jp { color: #514A44; }
    .vocab-panel-backdrop:has(+ .vocab-panel.vocab-panel--course) { background: rgba(252, 250, 242, 0.66); }
    .vocab-panel .vocab-search-section-label [lang="ja"] {
        font-family: var(--font-jp);
        font-size: 12.5px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        color: var(--color-stone);
        margin-right: 2px;
    }
    /* the lesson tag: the number alone, a door to the lesson's row on the portal; ink only under the pointer */
    .vocab-panel .result-lesson {
        flex: none;
        margin: 0;
        padding: 3px 2px;
        border: 0;
        border-radius: 3px;
        background: none;
        box-shadow: none;
        font-family: var(--font-ui);
        font-size: 10.5px;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--color-stone);
        cursor: pointer;
        transition: color 0.15s ease;
    }
    .vocab-panel .result-lesson:hover,
    .vocab-panel .result-lesson:active {
        color: var(--color-accent);
        background: none;
        box-shadow: none;
        transform: none;
    }
    .vocab-panel .result-lesson:focus {
        outline: none;
    }
    .vocab-panel .result-lesson:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
        box-shadow: none;
    }
    /* a taught kanji's sounds: the course taught them, in kana and the stone, no family colours, no romaji */
    .vocab-panel .result-kanji-readings--course .krd {
        color: var(--color-stone);
    }
    /* the grey line: a word or a kanji the course has not taught yet, one line on the rows' text column, no picture,
       no press (asked before shown); `comes in lesson N` at the right, where the taught rows carry their lesson. Dim
       by colour, never opacity (the meet-later rows' law and their inks) */
    .vocab-panel .vocab-search-line {
        display: flex;
        align-items: baseline;
        gap: 10px;
        min-width: 0;
        padding: 6px 12px 6px 72px;
        cursor: default;
        color: #8f887a;
    }
    .vocab-panel .vocab-search-line:last-child {
        margin-bottom: 16px;
    }
    .vocab-panel .vocab-search-line .vsl-jp {
        flex: none;
        font-family: var(--font-jp);
        font-size: 15px;
        color: #6b6459;
    }
    .vocab-panel .vocab-search-line .vsl-kana {
        flex: none;
        font-family: var(--font-jp);
        font-size: 12.5px;
        color: #8f887a;
    }
    .vocab-panel .vocab-search-line .vsl-en {
        min-width: 0;
        font-size: 13px;
        color: #8f887a;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .vocab-panel .vocab-search-line .vsl-when {
        flex: none;
        margin-left: auto;
        font-size: 12px;
        color: var(--color-faint);
        white-space: nowrap;
    }
    /* the course's empty state: 該当なし No word found, the Japanese in the label's own dress */
    .vocab-panel .vocab-search-empty--course .vocab-search-empty-text [lang="ja"] {
        font-family: var(--font-jp);
        color: var(--color-stone);
        margin-right: 4px;
    }

    /* ── 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.

   desktop polish round 2 (13 October 2026), finding 3: THE ONE DOOR seat,
   identical on the hall's beam and the wall's beam (and the same spec the
   ⋮ doors wear): a 34px square on an 8px radius, an 18px glass, faint warm
   ink at rest that turns to ink on a 5 per cent wash under the pointer. It
   dims by COLOUR, never opacity (opacity composites the subtree), and
   hovering changes ink only, never geometry: no transform, no shadow.
   ========================================================================== */

.lookup-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    box-shadow: none;
    cursor: pointer;
    color: var(--color-faint-warm, #6E6860);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.lookup-glass svg { width: 18px; height: 18px; }
.lookup-glass:hover,
.lookup-glass:active {
    color: var(--color-ink, #2C2C2C);
    background: rgba(44, 44, 44, 0.05);
    box-shadow: none;
    transform: none;
}
.lookup-glass:focus {
    outline: none;
}
.lookup-glass:focus-visible {
    outline: 2px solid var(--color-accent, #3D5A80);
    outline-offset: 2px;
}

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