/* Keep the home tabs and search on one row, independent of older search breakpoints. */
.home-score-layout .tabs.home-match-toolbar {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

.home-match-toolbar .home-match-tabs {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 3px 2px;
}

.home-match-tabs::-webkit-scrollbar { display: none; }
.home-match-tabs a { flex: 0 0 auto; white-space: nowrap; }

.home-score-layout .home-match-toolbar .ob-search {
    position: static;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.home-match-toolbar .ob-search .ob-search__toggle,
.home-match-toolbar .ob-search .ob-search__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    color: var(--match-name);
    cursor: pointer;
    transform: none;
}

.home-match-toolbar .ob-search .ob-search__toggle {
    position: relative;
    width: 36px;
    height: 36px;
    border: 1px solid var(--match-line);
    border-radius: 50%;
    background: var(--match-search);
}

.home-match-toolbar .ob-search__toggle[aria-expanded="true"],
.home-match-toolbar .ob-search__toggle:hover {
    border-color: var(--ole-blue);
    color: var(--match-odd);
}

.home-match-toolbar .ob-search.has-query .ob-search__toggle::after {
    content: '';
    position: absolute;
    inset-block-start: 3px;
    inset-inline-end: 3px;
    width: 7px;
    height: 7px;
    border: 2px solid var(--match-search);
    border-radius: 50%;
    background: var(--match-odd);
}

.home-match-toolbar .ob-search__panel {
    position: absolute;
    z-index: 20;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: min(320px, 100%);
    padding: 10px 12px;
    border: 1px solid var(--match-line);
    border-radius: 12px;
    background: var(--match-search);
    box-shadow: 0 8px 24px rgba(10, 30, 55, .16);
}

.home-match-toolbar .ob-search__panel[hidden] { display: none; }

.home-match-toolbar .ob-search__panel #matchSearch {
    flex: 1;
    width: 100% !important;
    min-width: 0;
    max-width: none;
    margin: 0 !important;
    padding: 4px 0 !important;
    border: 0 !important;
    background: transparent;
    font-size: 16px;
    color: var(--match-name);
    opacity: 1;
    pointer-events: auto;
}

/* A single clear action works consistently across browsers. */
.home-match-toolbar #matchSearch::-webkit-search-cancel-button { -webkit-appearance: none; }

.home-match-toolbar .ob-search #matchSearchClear {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    background: transparent;
    opacity: 1;
    pointer-events: auto;
}

.home-match-toolbar .ob-search #matchSearchClear:disabled {
    opacity: .35;
    cursor: default;
}

.home-match-toolbar .ob-search button:focus-visible {
    outline: 2px solid var(--match-odd);
    outline-offset: 2px;
}

.home-match-toolbar .ob-search__panel:focus-within {
    border-color: var(--match-odd);
}

@media (prefers-reduced-motion: no-preference) {
    .home-match-tabs { scroll-behavior: smooth; }
}