#search{background:var(--color-surface);border:0;color:var(--color-text-main);height:100vh;height:100dvh;inset:0;margin:0;max-height:none;max-width:none;padding:0;width:100%}
#search[open]{display:flex;flex-direction:column}
#search::backdrop{background:var(--color-overlay-medium);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#search>header{align-items:center;background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;flex:0 0 auto;justify-content:space-between;min-height:var(--header-h);padding:0.75rem 1rem}
#search>header h2{font-family:var(--font-display);font-size:1.25rem;font-weight:700}
#search>header form{margin:0}
#search>header button{align-items:center;border-radius:var(--radius);display:flex;justify-content:center;padding:0.5rem;transition:background-color 0.15s,color 0.15s}
#search>header button:hover{background:var(--color-surface-alt);color:var(--color-link)}
#search>form{align-items:center;border:2px solid var(--color-border-strong);border-radius:var(--radius-lg);display:grid;flex:0 0 auto;gap:0.5rem;grid-template-columns:auto minmax(0,1fr) auto;margin:1rem;padding:0.375rem;transition:border-color 0.15s,box-shadow 0.15s}
#search>form:focus-within{border-color:var(--color-link);box-shadow:0 0 0 3px rgb(0 157 224/0.15)}
#search>form>.material-symbols-outlined{color:var(--color-text-muted);margin-left:0.5rem}
#search-input{background:transparent;border:0;color:var(--color-text-main);font:inherit;font-size:1rem;min-width:0;outline:0;padding:0.625rem 0;width:100%}
#search-input::placeholder{color:var(--color-text-light)}
#search>form>button{background:var(--color-primary);border-radius:var(--radius);color:var(--color-primary-text);font-weight:700;padding:0.625rem 1rem;transition:background-color 0.15s}
#search>form>button:hover{background:var(--color-primary-dark)}

#search-results{border-top:1px solid var(--color-border);flex:1 1 auto;min-height:0;overflow-y:auto;padding:0.5rem 0 1rem}
#search-results[data-state="idle"]{display:none}
#search-results>p,#search-results>a{display:none}
#search-results[data-state="empty"]>ul{display:none}
#search-results[data-state="empty"]>p{display:block}
#search-results[data-state="results"]>a{display:flex}
#search-results>ul>li>a{display:flex;gap:0.75rem;padding:0.625rem 1rem;transition:background-color 0.15s}
#search-results>ul>li>a:hover{background-color:var(--color-link-bg-soft)}
#search-results>ul>li>a:hover .search-result-title{color:var(--color-link)}
#search-results img{background-color:var(--color-surface-alt);border-radius:var(--radius);flex-shrink:0;height:3.5rem;object-fit:cover;width:3.5rem}
#search-results mark{background-color:rgb(235 200 24/0.3);border-radius:2px;color:inherit}
.search-result{display:flex;flex-direction:column;gap:0.125rem;min-width:0}
.search-result-title{font-size:0.9375rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;transition:color 0.15s;white-space:nowrap}
.search-result-text{-webkit-box-orient:vertical;color:var(--color-text-muted);display:-webkit-box;font-size:0.8125rem;-webkit-line-clamp:2;line-height:1.4;overflow:hidden}
.search-result-pill{align-self:flex-start;background-color:var(--color-surface-alt);border-radius:var(--radius-full);color:var(--color-text-muted);font-size:0.6875rem;font-weight:700;margin-top:0.25rem;padding:0.125rem 0.5rem}
.search-result-pill[data-color="persimmon"]{background-color:rgb(235 0 0/0.08);color:#c40000}
.search-result-pill[data-color="carrot-orange"]{background-color:rgb(242 143 36/0.14);color:#9c5a06}
.search-result-pill[data-color="cerulean"]{background-color:rgb(0 157 224/0.1);color:var(--color-link-dark)}
.search-result-pill[data-color="fountain-blue"]{background-color:rgb(71 176 171/0.15);color:#2a7a76}
.search-result-pill[data-color="gold-tips"]{background-color:rgb(235 200 24/0.2);color:var(--color-star-text)}
#search-results>p{color:var(--color-text-muted);padding:1.5rem 1rem;text-align:center}
#search-results>a{align-items:center;color:var(--color-link);font-size:0.875rem;font-weight:700;gap:0.25rem;justify-content:center;margin-top:0.25rem;padding:0.75rem 1rem;transition:background-color 0.15s}
#search-results>a:hover{background-color:var(--color-link-bg-soft)}
#search-results>a .material-symbols-outlined{font-size:18px}

@media (min-width:1180px){
#search{border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-dialog);height:auto;inset:5.5rem 0 auto;margin:0 auto;max-height:calc(100dvh - 7rem);width:min(44rem,calc(100% - 2rem))}
#search>form{margin:1.5rem 2rem 2rem}
#search>form:has(+#search-results:not([data-state="idle"])){margin-bottom:1rem}
#search-results>ul>li>a{padding:0.625rem 2rem}
#search-results>p{padding:2rem}
#search-results>a{margin-top:0.5rem}
}