.header-search-item{flex:0 1 auto;min-width:0;margin-inline:-6px}
#header-search{display:flex;align-items:center;gap:6px;margin:0;font:inherit}
#search-toggle{display:flex;align-items:center;justify-content:center;border:0;padding:0;background:none;color:var(--link-cyan,#00ffff);cursor:pointer;font:inherit}
#search-toggle svg{fill:none;stroke:currentColor;stroke-width:2}
#search-entry{display:flex;align-items:center;gap:6px;min-width:0}
#search-entry[hidden]{display:none}
#search-entry[hidden] .search-input-wrap{width:12px!important}
#search-entry label{color:var(--brand-yellow,#ffcf24)}
.search-input-wrap{position:relative;display:block;width:12px;max-width:min(260px,35vw);flex:0 0 auto;overflow:hidden}
#search-input{display:block;box-sizing:border-box;width:100%;min-width:0;border:0;border-radius:0;padding:0 16px 0 0;outline:none;background:transparent;color:var(--brand-yellow,#ffcf24);font:inherit;line-height:1.2;caret-color:transparent}
.search-cursor{position:absolute;top:50%;transform:translateY(-50%);left:0;width:10px;height:18px;background:var(--accent-magenta);pointer-events:none;animation:cp-search-cursor-blink 1s steps(1,end) infinite}
@keyframes cp-search-cursor-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.search-cursor{animation:none}}
.search-input-wrap:not(:focus-within) .search-cursor{visibility:hidden}
#search-toggle:focus-visible{outline:1px solid var(--accent-magenta,#ff22aa);outline-offset:3px}
.search-heading h1{color:var(--brand-yellow,#ffcf24);overflow-wrap:anywhere}
.search-pages{display:flex;gap:24px;align-items:center;justify-content:center;margin:24px 0}
@media(max-width:650px){.search-input-wrap{max-width:32vw}}
@media(pointer:coarse) and (hover:none){#search-input{caret-color:var(--accent-magenta)}.search-cursor{display:none}}

/* Draw glyphs above the block when editing inside existing text. */
#search-input{position:relative;z-index:1}
.search-cursor{z-index:2}

/* A real mouse always gets the block cursor, including hybrid/touch PCs. */
.search-input-wrap.search-mouse .search-cursor{display:block}
.search-input-wrap.search-mouse #search-input{caret-color:transparent}

/* Text and block share one layout, preventing glyph overlap with proportional GEOS. */
.search-text-mirror{position:absolute;left:0;top:0;display:flex;align-items:center;white-space:pre;width:max-content;height:100%;font:inherit;line-height:1.2;color:var(--brand-yellow,#ffcf24);pointer-events:none;z-index:2}
.search-text-mirror .search-cursor{position:static;transform:none;flex:0 0 10px;display:block}
.search-input-wrap:has(.search-text-mirror) #search-input{color:transparent}
@media(pointer:coarse) and (hover:none){
.search-input-wrap:not(.search-mouse) .search-text-mirror{visibility:hidden}
.search-input-wrap:not(.search-mouse) #search-input{color:var(--brand-yellow,#ffcf24)}
}

/* Clip without creating an independently scrollable wrapper. */
.search-input-wrap{overflow:clip}

/* Submission animation remains visible after keyboard focus is released. */
#header-search.search-finishing .search-text-mirror{visibility:visible}
#header-search.search-finishing .search-cursor{display:block;visibility:visible}
#header-search.search-finishing #search-input{color:transparent;caret-color:transparent}