#header-inner { overflow: visible; z-index: 2; }
#sub-nav { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; }
#post-search { position: relative; display: flex; align-items: center; }
#post-query {
    box-sizing: border-box; width: clamp(100px, 20vw, 175px); height: 32px;
    padding: 0 32px 0 13px; border: 1px solid #c7cbd1; border-radius: 18px;
    color: #283442; background: #fff; font: inherit;
}
#post-search button, #color-switch {
    border: 0; font-family: FontAwesome; cursor: pointer;
}
#post-search button { position: absolute; right: 0; height: 32px; width: 32px; color: #526274; background: transparent; }
#color-switch { width: 34px; height: 34px; color: #fff; background: transparent; font-size: 18px; }
#color-switch::before { content: "\f186"; }
html[data-color="dark"] #color-switch::before { content: "\f185"; }
#post-matches {
    position: absolute; right: 0; top: calc(100% + 6px); width: min(290px, 72vw);
    max-height: min(55vh, 320px); overflow-y: auto; box-sizing: border-box; padding: 10px 14px;
    background: #fff; color: #475465; border: 1px solid #c7cbd1; border-radius: 8px;
    box-shadow: 0 4px 16px #0003;
}
#post-matches p { font-size: 13px; margin: 0; }
#post-matches ul { list-style: none; margin: 0; padding: 0; }
#post-matches a { display: block; padding: 8px 0; color: #216c95; text-decoration: none; }
#post-matches a:hover, #post-matches a:focus-visible { text-decoration: underline; }

html[data-color="dark"] { color-scheme: dark; --surface: #202732; --ink: #e0e6ee; --muted: #adb9c6; --edge: #394352; --link: #86ccec; }
[data-color="dark"] body, [data-color="dark"] #wrap { background: #151a21; color: var(--ink); }
[data-color="dark"] :is(.article-inner, .archive-article-inner, .widget, #page-nav, #post-matches, #post-query, .article-share-box) {
    background: var(--surface); color: var(--ink); border-color: var(--edge); box-shadow: none; text-shadow: none;
}
[data-color="dark"] :is(.summary-card, .article-entry, .article-title, #page-nav .current) { color: var(--ink); }
[data-color="dark"] :is(.widget-title, .article-meta a, .article-footer, .article-nav-title, #page-nav a) { color: var(--muted); text-shadow: none; }
[data-color="dark"] :is(.widget a, .article-entry a, #post-matches a, .summary-card:hover .article-title, .summary-card:focus-visible .article-title) { color: var(--link); }
[data-color="dark"] #post-search button { color: var(--muted); }
[data-color="dark"] :is(.article-entry td, .article-entry th, .article-footer) { border-color: var(--edge); }
[data-color="dark"] .article-entry code { background: #303a48; }