/* App navigation (Oct 6): the header is only brand, search and account (or Sign in / Sign up). The platform
   destinations live in the right rail, reading in the left rail - on every page, the discovery homepage included -
   and below 1024px, where there is no room for rails, the header menu button opens both lists. */

/* Header: one row, nothing wraps under the search any more. */
body.ev-theme .ev-header__bar--app { flex-wrap: nowrap; }
body.ev-theme .ev-header__actions { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; margin-left: auto; }
body.ev-theme .ev-header__bar--app .ev-search-toggle { margin-left: 0; }
body.ev-theme .ev-search--header { flex: 1 1 auto; max-width: 640px; margin-inline: auto; }

/* Signed out: Sign in and Sign up are always in the header (phones included). */
body.ev-theme .ev-header .ev-btn--signin,
body.ev-theme .ev-header .ev-btn--join { display: inline-flex; flex: none; }

/* Phones: everything on one row inside the screen. */
@media (max-width: 767px) {
  body.ev-theme .ev-header .ev-header__bar--app { gap: 6px; padding-inline: 12px; }
  body.ev-theme .ev-header .ev-brand { flex: 0 1 auto; min-width: 0; }
  body.ev-theme .ev-header .ev-brand__img { width: auto; height: auto; max-height: 44px; max-width: 132px; }
  body.ev-theme .ev-header .ev-header__actions { gap: 2px; }
  body.ev-theme .ev-header .ev-header__actions .ev-icon-btn,
  body.ev-theme .ev-header .ev-navmenu__toggle { width: 38px; min-width: 38px; height: 40px; }
  body.ev-theme .ev-header .ev-btn--signin,
  body.ev-theme .ev-header .ev-btn--join { min-height: 36px; padding: 0 11px; font-size: 12.5px; }
}
@media (max-width: 419px) { body.ev-theme .ev-header .ev-brand__img { max-width: 112px; } }
@media (max-width: 389px) {
  body.ev-theme .ev-header .ev-btn--signin { display: none; } /* still in the phone bottom bar */
  body.ev-theme .ev-header .ev-brand__img { max-width: 104px; }
}

/* The brand takes the room the header quick-link board used to need. The visible logo is WPCode #163920's background
   on .ev-brand (230x72; it hides the <img>), so size that box - and the <img>, should the snippet ever go - from here:
   300x100 on desktop, 252x84 on tablets, unchanged on phones where the header row is already full. */
@media (min-width: 768px) {
  body.ev-theme .ev-header .ev-brand { width: 252px; min-width: 252px; height: 84px; }
  body.ev-theme .ev-header .ev-brand .ev-brand__img--wide { width: 252px; max-width: 252px; height: auto; max-height: 84px; }
}
@media (min-width: 1024px) {
  body.ev-theme .ev-header .ev-brand { width: 300px; min-width: 300px; height: 100px; }
  body.ev-theme .ev-header .ev-brand .ev-brand__img--wide { width: 300px; max-width: 300px; height: auto; max-height: 100px; }
}

/* Rails on every page, the discovery homepage included. */
@media (min-width: 1024px) {
  body.ev-theme.ev-home-discovery .ev-shell { display: grid; grid-template-columns: 92px minmax(0, 1fr) 92px; }
  body.ev-theme.ev-home-discovery .ev-rail { display: block; }
}

/* Right rail: Ranks is always green, Live keeps its red pulse and new-post count. */
.ev-rail .ev-rail__link--charts .ev-rail__icon,
.ev-rail .ev-rail__link--charts:hover .ev-rail__icon,
.ev-rail .ev-rail__link--charts.is-current .ev-rail__icon { color: #34d399; }
.ev-rail .ev-rail__link--charts:hover .ev-rail__icon { border-color: #1f8f66; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 14px rgba(52,211,153,.14); }
.ev-rail .ev-rail__link--charts.is-current { background: linear-gradient(270deg, rgba(52,211,153,.14), rgba(52,211,153,.03)); }
.ev-rail .ev-rail__link--charts.is-current::before { background: #34d399; box-shadow: 0 0 9px rgba(52,211,153,.4); }
.ev-rail .ev-rail__link--charts.is-current .ev-rail__icon { border-color: #1f8f66; background: linear-gradient(145deg, #15392c, #0f1f19 70%); }
.ev-rail .ev-rail__link--signal .ev-rail__label { color: #ff5361; }
.ev-rail__badge { position: absolute; top: 2px; right: 14px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e12635; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #0b0c0f; }
.ev-rail__divider { list-style: none; }

/* Phone/tablet menu (below 1024px): both rails in one panel. The header's backdrop-filter traps fixed children,
   so the panel hangs from the header bar instead (absolute, sized to the space above the bottom bar). */
.ev-navmenu { position: static; flex: none; }
.ev-navmenu__toggle { list-style: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ev-text); cursor: pointer; }
.ev-navmenu__toggle::-webkit-details-marker { display: none; }
.ev-navmenu__toggle:hover, .ev-navmenu[open] > .ev-navmenu__toggle { background: var(--ev-surface-2); }
.ev-navmenu__toggle:focus-visible { outline: 2px solid #ff7283; outline-offset: 1px; }
.ev-navmenu__panel { position: absolute; z-index: 120; top: 100%; right: 0; width: min(320px, 100vw); height: calc(100vh - var(--ev-sticky-top, 64px) - 57px); height: calc(100dvh - var(--ev-sticky-top, 64px) - 57px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px 20px; background: #0b0c0f; border-left: 1px solid var(--ev-border); box-shadow: -18px 0 40px rgba(0,0,0,.55); }
/* While the menu is open the page behind it stays put, so the panel never drifts under the bottom bar. */
html.ev-navmenu-open, html.ev-navmenu-open body { overflow: hidden; }
.ev-navmenu__panel { padding-bottom: 28px; }
.ev-navmenu__group + .ev-navmenu__group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ev-border); }
.ev-navmenu__title { margin: 0 0 6px 10px; color: #8b929d; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ev-navmenu__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ev-navmenu__link { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 10px; border-radius: 10px; color: #e6e7ea; font-size: 15px; font-weight: 600; }
.ev-navmenu__link:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
.ev-navmenu__link .ev-icon { width: 22px; height: 22px; flex: none; }
.ev-navmenu__link .ev-live-dot { margin: 0 5px; }
.ev-navmenu__link.is-current { color: #fff; background: linear-gradient(90deg, rgba(187,24,42,.22), rgba(187,24,42,.04)); }
.ev-navmenu__link--charts .ev-icon { color: #34d399; }
.ev-navmenu__link--signal { color: #ff5361; }
.ev-navmenu__badge { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; background: #e12635; color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; }
@media (min-width: 1024px) { .ev-navmenu { display: none; } }