/* Dictionary search tools (voice, radicals, handwriting, pictures) and the
   top answer of a search. Loaded after dictionary.css. */

/* Tool buttons inside the search field */
.dict-tools{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}
.dict-tools[hidden],.dict-tool[hidden]{display:none}
.dict-tool{border:0;box-shadow:none}
.dict-tool{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:10px;background:transparent;color:var(--color-muted);cursor:pointer;transition:background-color .15s,color .15s}
.dict-tool svg{width:19px;height:19px;stroke-width:1.9}
.dict-tool.is-active,.dict-tool[aria-expanded=true]{background:var(--color-accent-soft);color:var(--color-accent)}
/* Drawn by CSS so the page's furigana pass leaves it alone. */
.dict-tool-glyph::before{content:"部";font:600 16px/1 var(--font-japanese)}
.dictionary-search-field .dict-tools{margin-right:2px}
.dict-quick-field .dict-tools{margin-left:auto}
.dict-quick-field input[type=search][name].is-filled,.dictionary-search-field input[type=search][name].is-filled{animation:dict-filled .6s ease-out}
@keyframes dict-filled{from{background:var(--color-accent-soft)}to{background:transparent}}

/* What a search looks in, below the search field */
.dict-scope{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;border:0;min-width:0}
.dict-quick-form .dict-scope{grid-column:1/-1;justify-self:start;flex-wrap:nowrap;gap:4px;max-width:100%;margin:0;padding:4px;border-radius:14px;background:var(--color-paper-2);overflow-x:auto;scrollbar-width:none}
.dict-quick-form .dict-scope::-webkit-scrollbar{display:none}
.dict-scope label{position:relative;cursor:pointer}
.dict-scope input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.dict-scope span{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:10px;color:var(--color-muted);font-size:13px;font-weight:400;white-space:nowrap;transition:background-color .15s,color .15s}
.dict-scope label:hover span{color:var(--color-ink)}
.dict-scope input:checked+span{background:var(--color-surface);color:var(--color-ink);font-weight:500;box-shadow:0 1px 3px var(--color-shadow)}
.dict-scope input:focus-visible+span{outline:3px solid var(--color-focus);outline-offset:2px}

/* Kanji of a kanji-only search */
.dkc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:10px;margin:0;padding:0;list-style:none}
.dkc{display:flex;align-items:flex-start;gap:14px;height:100%;padding:14px 14px 14px 12px;background:var(--color-surface);border:1px solid var(--color-rule);border-radius:16px;color:inherit;text-decoration:none;transition:border-color .15s}
.dkc-char{display:grid;place-items:center;width:64px;height:64px;flex-shrink:0;border-radius:14px;background:var(--color-paper);font:400 38px/1 var(--font-japanese);color:var(--color-ink)}
.dkc-char rt{font-size:.3em;color:var(--color-accent)}
.dkc-body{display:grid;gap:5px;flex:1;min-width:0}
.dkc-mean{font-size:15px;font-weight:600;line-height:1.45;color:var(--color-ink);overflow-wrap:anywhere}
.dkc-read{display:flex;gap:8px;align-items:baseline;font-size:14px;line-height:1.5;color:var(--color-ink)}
.dkc-read small{flex-shrink:0;min-width:58px;font-size:11px;color:var(--color-muted)}
.dkc-read .is-rare{color:var(--color-muted);opacity:.7}
.dkc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--color-muted)}
.dkc-go{width:18px;height:18px;flex-shrink:0;margin-top:4px;color:var(--color-muted)}

/* Each tool opens its own dialog: centred on wide screens, a sheet from
   the bottom on phones. */
html:has(.dict-modal[open]){overflow:hidden}
.dict-modal{box-sizing:border-box;width:min(560px,calc(100% - 32px));max-width:none;max-height:min(760px,calc(100dvh - 48px));margin:auto;padding:0;border:0;border-radius:18px;background:var(--color-surface);color:var(--color-ink);box-shadow:0 24px 70px oklch(25% 0.03 270 / .28);overflow:auto;overscroll-behavior:contain;text-align:left}
.dict-modal.dm-wide{width:min(860px,calc(100% - 32px))}
.dict-modal::backdrop{background:oklch(22% 0.02 270 / .45)}
.dict-modal[open]{animation:dm-in .18s ease-out}
@keyframes dm-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
.dict-modal button:not(.btn){border:0;box-shadow:none}
.dm-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 20px;border-bottom:1px solid var(--color-rule);background:var(--color-surface)}
.dict .dm-head h2,.dm-head h2{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--color-ink)}
.dm-close{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border-radius:999px;background:var(--color-paper-2);color:var(--color-ink);cursor:pointer}
.dm-close svg{width:18px;height:18px;stroke-width:2}
.dm-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dm-main{padding:18px 20px;min-width:0}
.dm-side{display:flex;flex-direction:column;gap:10px;padding:18px 20px;border-left:1px solid var(--color-rule);min-width:0}
.dm-label{font-size:13px;font-weight:600;color:var(--color-ink)}
.dict-pane-hint{font-size:12px;line-height:1.6;color:var(--color-muted)}
.dict-text-btn{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:999px;background:var(--color-paper-2);color:var(--color-ink);font-size:12px;font-weight:500;cursor:pointer}
.dict-text-btn svg{width:15px;height:15px;stroke-width:2}
.dict-text-btn[hidden]{display:none}

/* The query bar: the text the picked characters make */
.dm-query{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--color-rule)}
.dm-query-text{flex:1;min-width:0;min-height:44px;display:flex;align-items:center;padding:0 12px;border-radius:12px;background:var(--color-paper);color:var(--color-ink);font:500 22px/1.3 var(--font-japanese);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dm-query-text.is-empty{font:400 12px/1.4 var(--font-body);color:var(--color-muted);white-space:normal}
.dm-query-text.is-filled{animation:dict-filled .6s ease-out}
.dm-query-back{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--color-paper-2);color:var(--color-ink);cursor:pointer}
.dm-query-back svg{width:20px;height:20px;stroke-width:1.8}
.dm-query .btn{min-height:44px;flex-shrink:0}
.dm-query button:disabled{opacity:.4;cursor:default}

/* Japanese ⇄ the interface language */
.dm-langs{display:flex;align-items:center;justify-content:center;gap:6px}
.dm-lang{min-height:38px;padding:0 14px;border-radius:999px;background:transparent;color:var(--color-muted);font-size:15px;font-weight:500;cursor:pointer;transition:color .15s,background-color .15s}
.dm-lang[aria-pressed=true]{background:var(--color-accent-soft);color:var(--color-accent);font-weight:600}
.dm-swap{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;background:transparent;color:var(--color-ink);cursor:pointer}
.dm-swap svg{width:20px;height:20px;stroke-width:1.9}

/* Voice */
.dv-body{display:grid;justify-items:center;gap:14px;padding:22px 20px 18px;text-align:center}
.dv-status{font-size:13px;line-height:1.55;color:var(--color-muted);max-width:40ch}
/* What is said, written out as it comes; a caret blinks while listening. */
.dv-transcript{width:100%;min-height:2.6em;display:flex;align-items:center;justify-content:center;font:500 28px/1.3 var(--font-japanese);color:var(--color-ink);overflow-wrap:anywhere}
.dv-transcript.is-interim{color:var(--color-muted)}
.is-listening .dv-transcript::after{content:"";width:2px;height:1.1em;margin-left:4px;background:var(--color-accent);animation:dv-caret 1s steps(1) infinite}
@keyframes dv-caret{50%{opacity:0}}
.dv-mic{position:relative;margin:12px 0 8px;display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;flex-shrink:0;border-radius:999px;background:var(--color-accent-soft);color:var(--color-accent);cursor:pointer;transition:background-color .2s,color .2s}
.dv-mic svg{position:relative;width:28px;height:28px;stroke-width:1.9}
.dv-mic.is-on{background:var(--color-accent);color:var(--color-accent-ink)}
.dv-mic:disabled{cursor:progress}
/* The ring grows with the microphone level (--level, 0–1, set by the script). */
.dv-ring{position:absolute;inset:0;border-radius:inherit;background:oklch(53% 0.20 274 / .22);transform:scale(calc(1 + var(--level,0) * .45));opacity:0;transition:transform .08s linear,opacity .2s}
.is-listening .dv-ring{opacity:1}
/* The browser's recognition gives no level: the ring breathes instead. */
.is-live.is-listening .dv-ring{animation:dv-breathe 1.2s ease-in-out infinite}
@keyframes dv-breathe{50%{transform:scale(1.3)}}
.is-busy .dv-mic::after{content:"";position:absolute;inset:-5px;border:3px solid transparent;border-top-color:var(--color-accent);border-radius:999px;animation:dp-spin .8s linear infinite}

/* Radicals */
.drad-picked{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;min-height:34px}
.drad-status{font-size:13px;font-weight:600;color:var(--color-ink)}
.drad-kanji{display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start;align-items:center;flex:1;min-height:120px;max-height:340px;overflow:auto;padding:8px;border-radius:12px;background:var(--color-paper)}
.drad-kanji-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;background:var(--color-surface);color:var(--color-ink);font:400 24px/1 var(--font-japanese);box-shadow:0 1px 0 var(--color-rule)}
.drad-kanji-btn.is-rare{color:var(--color-muted);font-size:21px}
.drad-more{margin-left:4px}
.drad-grid{display:flex;flex-wrap:wrap;gap:3px;align-items:center;max-height:420px;overflow:auto;padding-right:2px}
.drad-stroke{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:34px;padding:0 4px;border-radius:8px;background:var(--color-ink);color:var(--color-surface);font-size:11px;font-weight:600}
.drad-kanji .drad-stroke{min-width:22px;height:22px;background:transparent;color:var(--color-accent);font-size:10px}
.dict-modal .drad-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--color-rule);border-radius:8px;background:var(--color-surface);color:var(--color-ink);font:400 18px/1 var(--font-japanese)}
.drad-btn[aria-pressed=true]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}
.drad-btn:disabled{opacity:.25;cursor:default}

/* Handwriting */
.dd-pad{display:grid;gap:10px;align-content:start;justify-items:center;min-width:0}
.dd-pad .dd-canvas{max-width:360px}
.dd-canvas{display:block;width:100%;aspect-ratio:1;border:1px solid var(--color-rule);border-radius:14px;color:var(--color-ink);touch-action:none;cursor:crosshair;
 background:linear-gradient(var(--color-paper-3),var(--color-paper-3)) center/1px 100% no-repeat,linear-gradient(var(--color-paper-3),var(--color-paper-3)) center/100% 1px no-repeat,var(--color-paper)}
.dd-actions{display:flex;gap:6px}
.dd-actions .dict-text-btn:disabled{opacity:.45;cursor:default}
.dd-candidates{display:flex;flex-wrap:wrap;gap:6px;min-height:52px}
.dict-modal .dd-candidate{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid var(--color-rule);border-radius:12px;background:var(--color-surface);color:var(--color-ink);font:400 30px/1 var(--font-japanese)}
.dd-candidate:first-child{border-color:var(--color-accent);background:var(--color-accent-soft)}
.dd-status{font-size:12px;color:var(--color-muted)}
.dd-status:empty{display:none}

/* Pictures */
.dp-body{display:grid;gap:14px;padding:18px 20px}
.dp-drop{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:18px;border:1.5px dashed var(--color-rule);border-radius:14px;background:var(--color-paper)}
/* The file input stays focusable for its label but takes no room; the
   search field's input styles would otherwise give it a width. */
.dp-drop input[type=file]{position:absolute;top:0;left:0;width:1px;height:1px;min-width:0;padding:0;border:0;opacity:0;overflow:hidden;clip-path:inset(50%)}
.dp-drop.is-over{border-color:var(--color-accent);background:var(--color-accent-soft)}
.dp-drop .btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.dp-drop .btn svg{width:18px;height:18px}
.dp-drop:has(input:focus-visible) .btn{outline:3px solid var(--color-focus);outline-offset:2px}
.dp-result{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.dp-result[hidden]{display:none}
.dp-preview{max-width:min(240px,32vw);height:auto;border-radius:10px;border:1px solid var(--color-rule);background:var(--color-paper)}
.dp-text{display:grid;gap:10px;min-width:0}
.dp-status{font-size:13px;color:var(--color-muted)}
.dp-status.is-busy::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;border:2px solid var(--color-accent-soft);border-top-color:var(--color-accent);border-radius:999px;animation:dp-spin .8s linear infinite}
@keyframes dp-spin{to{transform:rotate(360deg)}}
.dp-lines{display:grid;gap:6px;max-height:260px;overflow:auto}
.dp-line{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border:1px solid var(--color-rule);border-radius:10px;background:var(--color-surface)}
.dp-line-text{flex:1;min-width:0;font-size:16px;line-height:1.6;color:var(--color-ink);overflow-wrap:anywhere;user-select:text}
.dp-line-text[lang=ja]{font-family:var(--font-japanese);font-size:18px}
.dp-line-go{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;border-radius:9px;background:var(--color-accent-soft);color:var(--color-accent)}
.dp-line-go svg{width:17px;height:17px;stroke-width:2}
.dp-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dp-actions .btn[hidden]{display:none}
.dp-actions label{cursor:pointer}
.dp-privacy{font-size:11px;color:var(--color-muted)}

/* Top answer: the same flat card as the sentence translation. The head
holds the title and how the answer was checked; the foot holds the other
dictionary words and the link to the entry. */
.da-card{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:22px;background:var(--dict-card);border:0;border-radius:var(--radius-surface);min-width:0}
.da-card[hidden]{display:none}
.da-loading{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--color-muted)}
.da-loading::before{content:"";width:14px;height:14px;flex-shrink:0;border:2px solid var(--color-accent-soft);border-top-color:var(--color-accent);border-radius:999px;animation:dp-spin .8s linear infinite}
.da-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
.dict .da-head h2{margin:0;font-size:18px;font-weight:500;letter-spacing:-.005em;color:var(--color-ink)}
.da-body{display:grid;gap:8px;min-width:0}
.da-sentence{margin:0;font-size:17px;line-height:1.7;color:var(--color-ink);overflow-wrap:anywhere}
.da-word{font:600 32px/1.4 var(--font-japanese);color:var(--color-ink);margin:0 2px;vertical-align:-3px}
.da-word rt{font-size:.4em;font-weight:400}
.da-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0}
.da-meta:empty{display:none}
.da-meta .dict-audio.small{min-width:32px;height:32px}
.da-reading{margin:0;font-size:13px;color:var(--color-muted)}
.da-meta .dw-badges{margin:0}
.da-body .dw-lines{margin:0}
.da-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-top:14px;border-top:1px solid var(--color-rule)}
.da-status{display:inline-flex;align-items:center;gap:5px;margin:0;padding:2px 10px;border-radius:999px;background:var(--color-paper-2);font-size:12px;font-weight:500;color:var(--color-muted)}
.da-status svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4}
.da-status.is-match{background:color-mix(in oklab,var(--color-success) 12%,transparent);color:var(--color-success)}
.da-status.is-model{background:color-mix(in oklab,oklch(45% 0.11 60) 12%,transparent);color:color-mix(in oklch,oklch(45% 0.11 60),oklch(80% 0.11 70) var(--dark-mix))}
.da-open{flex-shrink:0;margin-left:auto;min-height:36px}
.da-others{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1 1 0;min-width:0;margin:0;font-size:12px;color:var(--color-muted)}
.da-others>span{margin-right:2px}
.da-others a{display:inline-flex;align-items:baseline;gap:6px;min-width:0;padding:3px 10px;border-radius:999px;background:var(--color-paper-2);color:var(--color-ink);font-size:14px;text-decoration:none;max-width:100%}
.da-others a rt{font-size:.5em}
.da-others small{font-size:11px;color:var(--color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:16ch}

/* Scope options stay on one line and scroll sideways on a phone. */
.dict-quick-form .dict-scope{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-inline:2px}
.dict-quick-form .dict-scope::-webkit-scrollbar{display:none}
.dict-quick-form .dict-scope label{flex-shrink:0}

/* Hover only where a pointer hovers; a tap must not leave it on. */
@media(hover:hover){
 .dict-tool:hover:not(.is-active){background:var(--color-paper-2);color:var(--color-ink)}
 .dm-close:hover,.dm-query-back:hover:not(:disabled){background:var(--color-paper-3)}
 .dkc:hover{border-color:var(--color-accent)}
 .dkc:hover .dkc-char{color:var(--color-accent)}
 .dict-scope input:not(:checked):hover+span{color:var(--color-ink);background:var(--color-paper-2)}
 .dm-lang:hover:not([aria-pressed=true]){color:var(--color-ink)}
 .dm-swap:hover{background:var(--color-paper-2)}
 .dict-text-btn:hover{background:var(--color-paper-3)}
 .drad-kanji-btn:hover{background:var(--color-accent);color:var(--color-accent-ink)}
 .drad-btn:hover:not(:disabled):not([aria-pressed=true]){border-color:var(--color-accent);color:var(--color-accent)}
 .dd-candidate:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}
 .dp-line-go:hover{background:var(--color-accent);color:var(--color-accent-ink)}
 .da-others a:hover{background:var(--dict-soft);color:var(--color-accent)}
}

@media(max-width:767px){
 .dict-tool{width:34px;height:34px}
 .dict-tool svg{width:18px;height:18px}
 .dict-modal,.dict-modal.dm-wide{width:100%;max-height:92dvh;margin:auto 0 0;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom)}
 .dict-modal[open]{animation:dm-up .22s ease-out}
 .dm-head{padding:12px 12px 12px 16px}
 .dm-split{grid-template-columns:minmax(0,1fr)}
 .dm-main,.dm-side,.dp-body{padding:14px 16px}
 .dm-side{border-left:0;border-top:1px solid var(--color-rule)}
 /* Results and the query bar first: the picker scrolls below them. */
 #dict-modal-radicals .dm-side{order:-1;border-top:0;border-bottom:1px solid var(--color-rule)}
 #dict-modal-radicals .drad-kanji{flex:none;min-height:64px;max-height:132px}
 .dd-pad .dd-canvas{max-width:280px}
 .dict-modal .dd-candidate{width:46px;height:46px;font-size:26px}
 .dv-transcript{font-size:24px}
 .dp-result{grid-template-columns:minmax(0,1fr)}
 .dp-preview{max-width:160px}
 .drad-grid{max-height:none}
 .da-card{padding:16px;gap:12px}
 .da-sentence{font-size:16px}
 .da-word{font-size:26px}
 .da-foot{gap:8px}
 /* Other words scroll in one row; the entry link keeps its own line. */
 .da-others{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
 .da-others::-webkit-scrollbar{display:none}
 .da-others>span,.da-others a{flex-shrink:0}
}
@media(max-width:420px){
 .dict-tools{gap:0}
 .dict-tool{width:30px;height:32px;border-radius:8px}
 .dict-tool svg{width:17px;height:17px}
 .dict-tool-glyph::before{font-size:14px}
 .dictionary-search-field>svg,.dict-quick-field>svg{display:none}
 .dict-hero .dictionary-search-field .btn{padding-inline:12px}
}
@keyframes dm-up{from{transform:translateY(40px);opacity:.4}}
@media(prefers-reduced-motion:reduce){
 .dict-modal[open]{animation:none}
 .is-listening .dv-transcript::after,.is-live.is-listening .dv-ring{animation:none}
 .is-busy .dv-mic::after,.dp-status.is-busy::before,.da-loading::before{animation:none}
 .dv-ring{transition:none}
 .dict-quick-field input.is-filled,.dictionary-search-field input.is-filled{animation:none}
}