/* Search: a box in the bar and a results panel over the current page. Type and highlight colours are
   tokens here so they follow the same three cases as the palette: system light, picked light, dark. */
:root{--search-mark-bg:#8a642c;--search-mark-fg:#fff3d5;--search-article-fg:#89b8ff;--search-article-bg:#19314c;--search-book-fg:#c1b0ff;--search-book-bg:#342746;--search-question-fg:#8cdbb1;--search-question-bg:#193c2d}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--search-mark-bg:#ffe09d;--search-mark-fg:#2a210d;--search-article-fg:#285f9d;--search-article-bg:#e3efff;--search-book-fg:#64449a;--search-book-bg:#f0eaff;--search-question-fg:#276d49;--search-question-bg:#e1f2e8}}
:root[data-theme="light"]{--search-mark-bg:#ffe09d;--search-mark-fg:#2a210d;--search-article-fg:#285f9d;--search-article-bg:#e3efff;--search-book-fg:#64449a;--search-book-bg:#f0eaff;--search-question-fg:#276d49;--search-question-bg:#e1f2e8}

/* The box takes two fifths of the window, up to 640px, from the room between the navigation and the theme
   button, and gives it back on a narrower window. The results panel is as wide as the box. */
.bar{--search-width:clamp(280px,40vw,640px)}
.shell-search{margin-left:auto;display:flex;align-items:center;gap:var(--space-2);flex:0 1 var(--search-width);min-width:0}
.shell-search~.theme-toggle{margin-left:-16px;flex-shrink:0}
.shell-search-box{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-frame);background:var(--surface);color:var(--muted);cursor:text}
.shell-search-box:focus-within{border-color:var(--accent)}
.shell-search-box svg{width:16px;height:16px;flex:none}
.shell-search-box input{flex:1;min-width:0;padding:0;border:0;outline:0;background:none;color:var(--fg);font:inherit;font-size:14px}
.shell-search-box input::placeholder{color:var(--faint)}
.shell-search-clear{flex:none;font-size:var(--font-caption);color:var(--muted);padding:2px 4px;border-radius:4px}
.shell-search-clear:hover{color:var(--fg)}
.shell-search-clear[hidden]{display:none}
.shell-search-open,.shell-search-cancel{display:none;flex:none;font-size:var(--font-small);padding:8px 6px;border-radius:4px;color:var(--fg);white-space:nowrap}
.shell-search-cancel{color:var(--accent)}
.shell-search .sr-only,.search-panel .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.shell-search :focus-visible,.search-panel button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shell-search-box input:focus-visible{outline:0}

/* Right edge under the box's right edge: the bar's padding, the theme button and the gap between them. */
.search-panel{position:absolute;top:calc(100% + 6px);right:74px;z-index:20;width:min(max(var(--search-width),480px),calc(100vw - 98px));max-height:min(640px,calc(100vh - 80px));overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-frame);box-shadow:0 10px 30px rgba(0,0,0,.22)}
.search-panel[hidden]{display:none}
.search-types{position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.search-type{padding:3px 10px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:var(--font-small)}
.search-type.on{border-color:var(--accent);color:var(--accent)}
.search-type:disabled{opacity:.4}
.search-type span{font-size:var(--font-caption);margin-left:2px}
.search-list{list-style:none;padding:0;margin:0}
.search-result{border-bottom:1px solid var(--line)}
.search-result-link{display:block;padding:10px 14px;color:var(--fg);text-decoration:none;overflow-wrap:anywhere;scroll-margin:52px 0 40px}
.search-result-link:hover,.search-result-link.cur{background:var(--surface-2)}
.search-result-link:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--accent)}
.search-head{display:block;line-height:1.6}
.search-kind{display:inline-block;margin-right:8px;padding:1px 6px;border-radius:4px;font-size:var(--font-caption);line-height:1.5;vertical-align:1px;color:var(--search-article-fg);background:var(--search-article-bg)}
.search-kind.is-book{color:var(--search-book-fg);background:var(--search-book-bg)}
.search-kind.is-question{color:var(--search-question-fg);background:var(--search-question-bg)}
.search-title{font-size:15px;font-weight:600}
.search-source{display:block;margin-top:2px;color:var(--faint);font-size:var(--font-caption)}
.search-snippet{display:block;margin-top:4px;color:var(--muted);font-size:var(--font-small);line-height:1.7}
.search-section{color:var(--faint)}
.search-panel mark{background:var(--search-mark-bg);color:var(--search-mark-fg);border-radius:2px;padding:0 1px}
.search-more{display:flex;margin:12px auto}
.search-state{margin:0;padding:18px 14px;color:var(--muted);font-size:14px;line-height:1.8;overflow-wrap:anywhere}
.search-state p{margin:0 0 10px}
.search-keys{position:sticky;bottom:0;margin:0;padding:7px 14px;background:var(--surface);border-top:1px solid var(--line);color:var(--faint);font-size:var(--font-caption)}
/* Touch has no arrow keys: no key hints and no pre-selected row. */
@media (pointer:coarse){.search-keys{display:none}.search-result-link.cur:not(:hover){background:none}}

/* Below this width the bar has no room for the box. It shows the word 搜索; opening it gives the
   whole bar to the box and the rest of the screen to the results. */
@media (max-width:900px){
  .shell-search{flex:none}
  .shell-search-box{display:none}
  .shell-search-open{display:block}
  .bar.searching>.logo,.bar.searching>nav,.bar.searching>.nav-menu,.bar.searching>.theme-toggle,.bar.searching .shell-search-open{display:none}
  .bar.searching .shell-search{flex:1;margin-left:0}
  .bar.searching .shell-search-box{display:flex;flex:1;width:auto}
  /* 16px keeps iOS from zooming the page when the box takes focus. */
  .bar.searching .shell-search-box input{font-size:16px}
  .bar.searching .shell-search-cancel{display:block}
  .search-panel{top:100%;left:0;right:0;width:auto;height:calc(100dvh - 57px);max-height:none;border:0;border-radius:0;box-shadow:none;background:var(--bg)}
  .search-types{background:var(--bg)}
  .search-keys{display:none}
  .search-open{overflow:hidden}
}