/* search-overlay.css — touch-device search sheet (see js/render/searchOverlay.js).
   The sheet is pinned to the top of the *visual* viewport so it stays put when
   the on-screen keyboard is up. Its input is locked to 16px — large enough that
   mobile browsers don't zoom the page on focus. Mounted on any touch device. */

.search-sheet {
    position: fixed;
    left: 0;
    right: 0;
    /* --vv-top tracks visualViewport.offsetTop (set from JS); falls back to 0. */
    top: var(--vv-top, 0px);
    height: var(--vv-height, 100vh);
    z-index: 1000;                 /* above the sidebar (z 50/51) */
    display: flex;
    flex-direction: column;
}

/* CRITICAL: `display:flex` above overrides the browser's `[hidden]{display:none}`
   (author rule wins over the UA rule), so the JS `sheet.hidden = true` on close
   would NOT visually hide the sheet without this. `.search-sheet[hidden]` (0,2,0)
   out-specifies `.search-sheet` (0,1,0), so the sheet actually disappears. */
.search-sheet[hidden] {
    display: none;
}

/* Light scrim over the page — page stays visible (the request was "the whole
   view stays the same"), just a touch dimmed so the results read clearly. Tap
   to close. */
.search-sheet-scrim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.28);
}

.search-sheet-panel {
    position: relative;
    z-index: 1;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.search-sheet-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}

.search-sheet-icon {
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.search-sheet-input {
    flex: 1;
    min-width: 0;
    /* The reason this whole feature exists — 16px keeps mobile browsers from zooming the page. */
    font-size: 16px;
    font-family: inherit;
    line-height: 1.3;
    padding: 8px 10px;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: none;
    box-sizing: border-box;
}
.search-sheet-input:focus {
    border-color: var(--color-accent);
}

.search-sheet-close {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: none;
    background: var(--color-bg);
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.search-sheet-close:active { background: var(--color-border); }

/* Permanent Clear — empties the query (browse-all again); does NOT close. */
.search-sheet-clear {
    flex-shrink: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--fs-080);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
.search-sheet-clear:active { background: var(--color-border); }

/* Results — scroll inside the panel, never push the page. */
.search-sheet-results {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--color-border);
}
.search-sheet-results:empty { border-top: none; }

.search-sheet-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
}
.search-sheet-option:active { background: var(--color-hover); }

/* Leading icon column (league glyph / player avatar). The inner .search-icon*
   markup is styled by navigation.css, shared with the flyout. */
.search-sheet-option-icon {
    flex-shrink: 0;
    display: flex;
}
.search-sheet-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.search-sheet-option-label {
    font-size: var(--fs-095);
    font-weight: 600;
    color: var(--color-text);
}
.search-sheet-option-sub {
    font-size: var(--fs-080);
    color: var(--color-text-secondary);
}

.search-sheet-empty {
    padding: 14px;
    text-align: center;
    font-size: var(--fs-085);
    color: var(--color-text-secondary);
}

/* Country flag shown just left of a player name in every player list — the
   smart-search flyout/sheet, the What-If pickers, the admin comboboxes and the
   admin player search. Lives here (not navigation.css) because BOTH the public
   site and admin.html load search-overlay.css, whereas admin never loads
   navigation.css. em-based so it tracks the surrounding font size; horizontal
   spacing comes from each row's own flex `gap` (no ad-hoc margin). */
:is(.nav-search-results, .search-sheet-results, .whatif-options,
    .app-combo-dropdown, .player-search-results, .player-autocomplete) .search-flag {
    flex-shrink: 0;
    height: 1.05em;
    width: auto;
    border-radius: 0.15em;
    object-fit: contain;
    image-rendering: auto;
    align-self: center;
}

/* ---- Title abbreviation badges (BMAB rank + championship: G0 / WC / NC …) ----
   SYNCED COPY of the `.title-abbr*` shared atom whose canonical home is
   components.css. Duplicated here (kept identical — update both) because
   admin.html loads search-overlay.css but NEVER components.css, so admin
   comboboxes would otherwise show unstyled title badges. Same reasoning as the
   flag rule above. The markup comes from getTitleAbbreviationsHtml()
   (titleConstants.js) and is shared by the TABLES *and* every player search
   (flyout, sheet, combobox). All sizing is em-relative, so a badge tracks the
   surrounding font size in both a table cell and a search row.

   "Mix G" style (Player Page Lab):
     • BMAB (non-champ) → outlined pill, transparent body, tier-coloured border + text
     • Championship    → gradient pill with diagonal shine, tier-coloured background
   BOTH variants share the SAME padding (0.12em 0.5em). BMAB's "border" is an
   inset box-shadow (not a real border) so it takes no layout space — a fixed-px
   border would oversize BMAB pills next to champion pills at small font-sizes. */
.title-abbr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    font-weight: 900;
    padding: 0.12em 0.5em;
    border-radius: 0.25em;
    border: none;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px currentColor;  /* fake border, zero layout impact */
    margin-left: 0.5em;
    vertical-align: text-bottom;
    line-height: 1;
    letter-spacing: 0.04em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    min-width: 1.4em;
}
.title-abbr + .title-abbr { margin-left: 0.25em; }

.title-abbr-gold   { color: #d4a942; }
.title-abbr-silver { color: #94a3b8; }
.title-abbr-bronze { color: #b45309; }
.title-abbr-white  { color: #94a3b8; }

/* Championship badges — gradient pill with diagonal shine. Same padding as
   BMAB; the box-shadow "border" is removed since the gradient defines the shape.
   Its own stacking context keeps the caption crisply above the ::before shine. */
.title-abbr-champ {
    box-shadow: none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-shadow: 0 1px 0 rgba(255,255,255,0.18);
}
.title-abbr-champ::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.45), transparent 55%);
    pointer-events: none;
    z-index: -1;
}
.title-abbr-champ.title-abbr-gold {
    background: linear-gradient(135deg, #fbbf24, #b45309);
    color: #1a1305;
}
.title-abbr-champ.title-abbr-silver {
    background: linear-gradient(135deg, #cbd5e1, #64748b);
    color: #1e293b;
}
.title-abbr-champ.title-abbr-bronze {
    background: linear-gradient(135deg, #f59e0b, #92400e);
    color: #fff;
}
.title-abbr-champ.title-abbr-white {
    background: linear-gradient(135deg, #f8fafc, #cbd5e1);
    color: #475569;
}

/* Trailing pill (What-If Player B: WON / LOST / DREW / NOT-PLAYED). */
.search-sheet-badge {
    flex-shrink: 0;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-068);
    font-weight: 700;
    letter-spacing: 0.5px;
}
.search-sheet-badge--won {
    background: color-mix(in srgb, var(--color-win) 15%, transparent);
    color: var(--color-win);
}
.search-sheet-badge--lost {
    background: color-mix(in srgb, var(--color-loss) 15%, transparent);
    color: var(--color-loss);
}
.search-sheet-badge--unplayed,
.search-sheet-badge--drew {
    background: rgba(148, 163, 184, 0.15);
    color: var(--color-text-secondary);
}

/* Canonical desktop-dropdown badge (mirror of .search-sheet-badge for the
   inline list). Shared by every mountSearchField picker; themed win/loss
   tokens so it tracks every theme. Lives here so admin (no navigation.css)
   gets it too. */
.sf-badge {
    flex-shrink: 0;
    margin-left: auto;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-068);
    font-weight: 700;
    letter-spacing: 0.5px;
}
.sf-badge--won {
    background: color-mix(in srgb, var(--color-win) 15%, transparent);
    color: var(--color-win);
}
.sf-badge--lost {
    background: color-mix(in srgb, var(--color-loss) 15%, transparent);
    color: var(--color-loss);
}
.sf-badge--unplayed,
.sf-badge--drew {
    background: rgba(148, 163, 184, 0.15);
    color: var(--color-text-muted);
}

/* Lock the page behind the sheet while keeping its scroll position. We pin
   <body> (NOT overflow:hidden on <html>, which collapses the page to the top on
   some mobile browsers); JS sets `body.style.top` to the negated scrollY and
   restores it on close. */
html.search-sheet-open body {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}