/* The form owns the focus treatment; its input is a seamless part of it. */
.portal-page .portal-header-search {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1 1 430px;
    width: auto;
    min-width: 0;
    max-width: 460px;
    height: 46px;
    min-height: 46px;
    margin: 0;
    padding: 5px 5px 5px 15px;
    background: #1b1e23;
    border: 1px solid #343840;
    border-radius: 12px;
    color: #929aa6;
    box-shadow: inset 0 1px 0 #ffffff03;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.portal-page .portal-header-search:hover { border-color: #54504a; background: #1e2127; }
.portal-page .portal-header-search:focus-within {
    border-color: var(--portal-accent);
    background: #1e2127;
    box-shadow: 0 0 0 3px #f5a53b12;
}
.portal-page .portal-header-search > .portal-header-search-icon {
    width: 18px;
    height: 18px;
    flex: none;
    color: #919aa7;
    transition: color .18s ease;
}
.portal-page .portal-header-search:focus-within > .portal-header-search-icon { color: var(--portal-accent); }
/* ID specificity also overrides the shared input:not(...) palette. */
.portal-page .portal-header-search #portal-search {
    flex: 1 1 auto;
    width: 0;
    max-width: 100%;
    min-width: 0;
    height: 34px;
    min-height: 0;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    outline-offset: 0;
    color: var(--portal-text) !important;
    font: 400 13px/1.4 var(--font) !important;
    caret-color: var(--portal-accent);
    appearance: none;
    -webkit-appearance: none;
}
.portal-page .portal-header-search #portal-search::placeholder { color: #939ba8 !important; opacity: 1; }
.portal-page .portal-header-search #portal-search::-webkit-search-decoration { -webkit-appearance: none; }
.portal-page .portal-header-search #portal-search::-webkit-search-cancel-button { cursor: pointer; }
.portal-page .portal-header-search .portal-header-search-submit {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 34px;
    min-width: 36px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid #f5a53b26;
    border-radius: 8px;
    background: #f5a53b12;
    color: #f5b65d;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.portal-page .portal-header-search .portal-header-search-submit > .icon { width: 18px; height: 18px; }
.portal-page .portal-header-search .portal-header-search-submit:hover {
    background: var(--portal-accent);
    border-color: var(--portal-accent);
    color: #191b1f;
}
.portal-page .portal-header-search .portal-header-search-submit:focus-visible {
    outline: 2px solid var(--portal-accent);
    outline-offset: 1px;
    background: var(--portal-accent);
    color: #191b1f;
}
@media (max-width: 980px) {
    .portal-page .portal-header-search { max-width: 360px; height: 44px; min-height: 44px; padding: 4px 4px 4px 12px; gap: 9px; }
}
@media (max-width: 720px) {
    .portal-page .portal-header-search { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .portal-page .portal-header-search,
    .portal-page .portal-header-search > .portal-header-search-icon,
    .portal-page .portal-header-search .portal-header-search-submit { transition: none; }
}