/* Shared geometry: themes change color only, never icon size or positioning. */
:root {
    --search-size: 42px;
    --search-width: 300px;
    --search-ink: #c4cedb;
    --search-surface: rgba(16,24,48,.95);
    --search-line: rgba(56,189,248,.22);
    --search-focus: #38bdf8;
    --search-placeholder: #8294b0;
    --search-shadow: 0 8px 20px rgba(0,0,0,.20);
}
html.theme-light {
    --search-ink: #929ba8;
    --search-surface: #fff;
    --search-line: #dbe1ea;
    --search-focus: #9bbfe0;
    --search-placeholder: #7d8797;
    --search-shadow: 0 8px 20px rgba(30,45,70,.10);
}
html #nsMini, html #rankSearchBox {
    position: relative !important; box-sizing: border-box !important;
    display: flex !important; align-items: center !important;
    width: var(--search-size) !important; min-width: var(--search-size) !important;
    height: var(--search-size) !important; flex: 0 0 var(--search-size) !important;
    padding: 0 !important; gap: 0 !important; overflow: visible !important;
    border: 1.5px solid var(--search-line) !important; border-radius: 999px !important;
    background: var(--search-surface) !important; color: var(--search-ink) !important;
    box-shadow: none !important;
    transition: width .78s cubic-bezier(.22,1,.36,1), min-width .78s cubic-bezier(.22,1,.36,1), flex-basis .78s cubic-bezier(.22,1,.36,1), padding .62s cubic-bezier(.22,1,.36,1), gap .62s cubic-bezier(.22,1,.36,1), transform .78s cubic-bezier(.22,1,.36,1), border-color .28s ease, box-shadow .28s ease !important;
}
html #nsMini.open, html #rankSearchBox.expanded {
    width: var(--search-width) !important; min-width: var(--search-width) !important;
    flex-basis: var(--search-width) !important; max-width: calc(100vw - 88px) !important;
    padding: 4px 6px 4px 14px !important; gap: 8px !important;
    box-shadow: var(--search-shadow) !important;
}
html #nsMini:focus-within, html #rankSearchBox:focus-within { border-color: var(--search-focus) !important; }
html #niSearch, html #rankSearchToggle, html #niUser2 {
    box-sizing: border-box !important; display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    width: var(--search-size) !important; min-width: var(--search-size) !important;
    height: var(--search-size) !important; flex: 0 0 var(--search-size) !important;
    padding: 0 !important; margin: 0 !important; border-radius: 50% !important;
    color: var(--search-ink) !important; background: transparent !important;
    border: 0 !important; box-shadow: none !important; transform: none !important;
    cursor: pointer !important;
}
html #niUser2 { border: 1.5px solid var(--search-line) !important; background: var(--search-surface) !important; }
html #nsMini:not(.open) #niSearch, html #rankSearchBox:not(.expanded) #rankSearchToggle {
    position: absolute !important; inset: 0 !important; margin: auto !important;
    width: calc(var(--search-size) - 3px) !important; min-width: 0 !important; height: calc(var(--search-size) - 3px) !important;
}
html #nsMini.open #niSearch, html #rankSearchBox.expanded #rankSearchToggle {
    position: relative !important; width: 34px !important; min-width: 34px !important; height: 34px !important; flex-basis: 34px !important;
}
html #niSearch:hover, html #rankSearchToggle:hover, html #niSearch:active, html #rankSearchToggle:active {
    background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important;
}
html #niSearch:focus-visible, html #rankSearchToggle:focus-visible, html #niUser2:focus-visible {
    outline: 2px solid var(--search-focus) !important; outline-offset: 3px !important;
}
html .search-glyph, html #niUser2 .nav-svg {
    display: block !important; width: 22px !important; height: 22px !important; flex: 0 0 22px !important;
    overflow: visible !important; opacity: 1 !important; visibility: visible !important; color: var(--search-ink) !important;
}
html .search-glyph circle, html .search-glyph path, html #niUser2 .nav-svg circle, html #niUser2 .nav-svg path {
    fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important;
}
html #nsInput, html #rankSearch {
    box-sizing: border-box !important; min-width: 0 !important; width: 0 !important;
    flex: 1 1 0 !important; height: 30px !important; padding: 0 !important;
    border: 0 !important; outline: none !important; background: transparent !important;
    box-shadow: none !important; line-height: 30px !important; font-size: 14px !important;
    color: var(--txt) !important; opacity: 0 !important;
    transition: opacity .28s ease .12s !important;
}
html #nsMini.open #nsInput, html #rankSearchBox.expanded #rankSearch { opacity: 1 !important; padding: 0 2px !important; }
html #nsInput::placeholder, html #rankSearch::placeholder { color: var(--search-placeholder) !important; opacity: 1 !important; }
.ladder-controls.rank-search-open { transform: translateX(calc((var(--search-width) - var(--search-size)) / 2)); }
html .ladder-controls { max-width: calc(100% - 48px) !important; }
@media (max-width: 1440px) {
    html .ladder-controls { max-width: calc(100% - 32px) !important; flex-wrap: wrap !important; justify-content: center !important; transform: none !important; }
    html .ladder-tabs { flex: 0 0 100% !important; width: 100% !important; }
    html #rankSearchBox { margin-inline: auto !important; }
    html #rankSearchBox.expanded { transform: translateX(calc((var(--search-width) - var(--search-size)) / 2)) !important; }
}
@media (max-width: 720px) { :root { --search-width: min(300px, calc(100vw - 88px)); } }
@media (max-width: 600px) {
    html .ladder-controls { justify-content: flex-start !important; }
    html #rankSearchBox { margin-left: 0 !important; margin-right: auto !important; }
    html #rankSearchBox.expanded { transform: none !important; }
}
/* Keep the existing mobile menu out of the reading/search area; open upward
   from the safe bottom edge on every page (including the Center's 780px mode). */
@media (max-width: 780px) {
    html #mnav {
        top: auto !important; bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
        left: 12px !important; right: auto !important; transform: none !important;
        flex-direction: column-reverse !important; pointer-events: none !important;
    }
    html #mnavToggle { pointer-events: auto !important; }
    html #mnavLinks { pointer-events: none !important; }
    html #mnav.open #mnavLinks {
        max-height: min(320px, calc(100dvh - 120px)) !important;
        overflow-y: auto !important; pointer-events: auto !important;
    }
}
.data-error { padding: 18px; text-align: center; color: var(--sub); grid-column: 1 / -1; }
.data-error button { margin-left: 10px; padding: 6px 14px; border: 1px solid var(--search-line); border-radius: 999px; background: var(--search-surface); color: var(--txt); cursor: pointer; }
.auth-modal :focus-visible { outline: 2px solid var(--search-focus); outline-offset: 3px; }
.acct-user { font: inherit; background: transparent; color: inherit; border: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) {
    html #nsMini, html #rankSearchBox, html #nsInput, html #rankSearch, .ladder-controls { transition: none !important; }
}