/* Evervale design system, site layer: ev-site.css
   Sits on ev-ui.css. Everything the PUBLIC SITE adds to the system: the shared top bar's group menus, the phone drawer,
   the footer, and the "app" skin that brings the older page families (.ar- armory/PvP, .db- database, .s numbered panels)
   onto the same tokens, so a signed-in page and the Companion read as one product. Cinematic selling pages use ev-cine.css.
   No inline styles are needed anywhere (the site CSP forbids them). */

/* ============================== top bar extras ============================== */
.evx-host { display: contents; }
.evx-bar { z-index: 60; }
.evx-acct { position: relative; }
.evx-bar .ev-acct, .evx-bar .ev-btn, .evx-bar .ev-iconbtn { text-decoration: none; }
.evx-acct .evh-in, .evx-acct .evh-me { display: none; }
.evx-acct[data-state="out"] .evh-in { display: flex; }
.evx-acct[data-state="in"] .evh-me, .evx-acct[data-state="load"] .evh-me { display: flex; }
.evx-acct[data-state="load"] .evh-me { visibility: hidden; }
.evx-acct .evh-me { position: relative; cursor: pointer; }
.evh-dot { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--ev-red-hard); box-shadow: 0 0 8px var(--ev-red-hard); border: 2px solid #082030; }
.evh-dot[hidden], .evh-ct[hidden] { display: none; }
.evx-burger { display: inline-grid; }
.evx-nav { display: none; }
@media (min-width: 1024px) { .evx-burger { display: none !important; } .evx-nav { display: flex; } }
@media (max-width: 1023px) { .evx-burger { display: none !important; } .evx-bar { padding-left: 16px; } }
@media (max-width: 639px) { .evx-cta { display: none; } .evx-acct .ev-acct-t, .evx-acct .evh-me > .ev-i { display: none; } .evx-acct .evh-me { padding-right: 4px; } .evx-acct .ev-acct.ev-out { padding: 0 16px; gap: 8px; } }
@media (max-width: 1179px) and (min-width: 1024px) { .evx-nav svg:first-child { display: none; } }
@media (max-width: 1299px) and (min-width: 1024px) { .evx-nav a, .evx-nav .evx-gb { padding: 0 8px; letter-spacing: .08em; } .evx-acct .ev-acct-t { display: none; } .evx-bar .ev-brand-t { letter-spacing: .14em; } }
.evx-nav { margin-left: 16px; }
.evx-nav .evx-l, .evx-nav .evx-gb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--ev-r-sm); background: none; color: var(--ev-mute); text-decoration: none; cursor: pointer;
  font: 600 12px var(--ev-head); letter-spacing: .12em; text-transform: uppercase; position: relative; transition: color var(--ev-t-fast), background var(--ev-t-fast); }
.evx-nav .evx-l:hover, .evx-nav .evx-gb:hover, .evx-nav .evx-gb[aria-expanded="true"] { color: var(--ev-ink); background: rgba(94, 224, 232, .08); }
.evx-nav .evx-l.on, .evx-nav .evx-gb.on { color: var(--ev-cy-hi); }
.evx-nav .evx-l.on::after, .evx-nav .evx-gb.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--ev-cy); box-shadow: 0 0 10px var(--ev-cy); }
.evx-nav .evx-gb > svg:last-child { transition: transform var(--ev-t); opacity: .7; }
.evx-nav .evx-gb[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.evx-g { position: relative; }
.evx-pop { position: absolute; z-index: 70; top: calc(100% + 4px); left: 0; min-width: 270px; padding: 8px; border: 1px solid rgba(94, 224, 232, .4); border-radius: var(--ev-r-md);
  background: var(--ev-panel-solid); box-shadow: var(--ev-sh-md), var(--ev-glow-cy); animation: ev-fade var(--ev-t) ease-out; }
.evx-pop[hidden] { display: none; }
.evx-pop.evx-wide { min-width: 300px; }
.evx-pop.evx-right { left: auto; right: 0; min-width: 250px; top: calc(100% + 6px); }
.evx-ps { padding: 12px 12px 4px; font: 500 var(--ev-fs-2xs) var(--ev-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ev-dim); }
.evx-ps:first-child { padding-top: 8px; }
.evx-pa { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: var(--ev-r-sm); background: none; color: var(--ev-text); text-align: left; text-decoration: none; cursor: pointer; font: inherit; }
.evx-pa:hover { background: rgba(94, 224, 232, .1); color: var(--ev-ink); }
.evx-pa.on { background: linear-gradient(90deg, rgba(94, 224, 232, .16), transparent); box-shadow: inset 3px 0 0 var(--ev-cy); }
.evx-pi { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(140, 235, 240, .32); background: rgba(94, 224, 232, .07); color: var(--ev-cy); }
.evx-pt { flex: 1; min-width: 0; display: grid; gap: 1px; } /* spacing-ok: optical */
.evx-pt b { font: 600 14px var(--ev-head); color: var(--ev-ink); }
.evx-pt small { font: 400 12px var(--ev-sans); color: var(--ev-mute); }
.evh-who { display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--ev-line); }
.evh-wn { font: 700 15px var(--ev-head); color: var(--ev-ink); overflow: hidden; text-overflow: ellipsis; }
.evh-wr { font: 500 10px var(--ev-mono); letter-spacing: .16em; color: var(--ev-mint); }
.evh-out { border-top: 1px solid var(--ev-line-soft); margin-top: 4px; border-radius: 0 0 var(--ev-r-sm) var(--ev-r-sm); }
.evh-out .evx-pi, .evh-out .evx-pt b { color: var(--ev-red); }
.evh-ct { margin-left: auto; min-width: 20px; padding: 1px 8px; border-radius: 10px; background: var(--ev-red-hard); color: #210a10; font: 700 11px var(--ev-sans); text-align: center; } /* spacing-ok: optical */

/* cinematic pages: the bar floats over the hero and turns solid on scroll */
.ev-cine .evx-bar.is-solid { position: fixed; left: 0; right: 0; background: var(--ev-bar); border-bottom-color: var(--ev-line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* tab bar (phone, app pages): the Menu entry is a button */
.evx-tabs button { position: relative; flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: none; border: 0; color: var(--ev-mute);
  font: 600 10.5px var(--ev-head); letter-spacing: .1em; text-transform: uppercase; }
.evx-tabs button:hover { color: var(--ev-ink); }
.evx-tabs button[aria-current="page"] { color: var(--ev-cy-hi); box-shadow: inset 0 2px 0 var(--ev-cy); background: linear-gradient(rgba(94, 224, 232, .12), transparent); }
.evx-tabs a { text-decoration: none; }
.evx-tabs a:focus-visible, .evx-tabs button:focus-visible { outline: 2px solid var(--ev-cy-hi); outline-offset: -3px; }

/* ============================== phone drawer ============================== */
.evd-scrim { position: fixed; inset: 0; z-index: 90; background: var(--ev-scrim); opacity: 0; transition: opacity .2s; }
.evd-scrim.open { opacity: 1; }
.evd { position: fixed; z-index: 95; top: 0; left: 0; bottom: 0; width: min(330px, 88vw); display: flex; flex-direction: column; overflow-y: auto; border-right: 1px solid rgba(94, 224, 232, .4);
  background: var(--ev-panel-solid), var(--ev-bg-0); background-color: #07131c; box-shadow: var(--ev-sh-md); transform: translateX(-100%); transition: transform .2s var(--ev-ease); padding-bottom: var(--ev-sab); }
.evd.open { transform: none; }
.evd[hidden], .evd-scrim[hidden] { display: none; }
.evd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(var(--ev-sat) + 8px) 12px 8px 16px; border-bottom: 1px solid var(--ev-line); }
.evd-nav { flex: 1 1 auto; padding: 8px 0; }
.evd .evd-i, .evd .evd-s { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 16px; color: var(--ev-text); text-decoration: none; font: 600 14px var(--ev-head); letter-spacing: .04em; }
.evd-i svg { color: var(--ev-cy); flex: none; }
a.evd-i:hover, .evd .evd-s:hover { background: rgba(94, 224, 232, .09); color: var(--ev-ink); }
.evd .evd-i.on, .evd .evd-s.on { color: var(--ev-ink); background: linear-gradient(90deg, rgba(94, 224, 232, .16), transparent); box-shadow: inset 3px 0 0 var(--ev-cy); }
.evd-gh { display: flex; align-items: stretch; }
.evd-gh .evd-i { flex: 1 1 auto; }
.evd-t { flex: 0 0 52px; display: grid; place-items: center; background: none; border: 0; border-left: 1px solid var(--ev-line-soft); color: var(--ev-mute); cursor: pointer; }
.evd-t svg { transition: transform .2s; }
.evd-t[aria-expanded="true"] svg { transform: rotate(180deg); }
.evd-sl { display: none; background: rgba(0, 0, 0, .18); }
.evd-g.open .evd-sl { display: block; }
.evd .evd-s { min-height: 44px; padding-left: 50px; gap: 12px; font: 500 14px var(--ev-head); color: var(--ev-mute); letter-spacing: 0; } /* spacing-ok: optical */
.evd-s svg { color: var(--ev-cy); flex: none; opacity: .8; }
.evd-cta { margin: 12px 16px 24px; width: auto; }
.evd-cta[hidden] { display: none; }
html.evh-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .evd, .evd-scrim, .evd-t svg { transition: none; } .evx-pop { animation: none; } }
@media (min-width: 1024px) { .evd, .evd-scrim { display: none !important; } }

/* ============================== footer ============================== */
/* Phones and tablets (under 1024 px) have no page footer: its links live at the foot of the menu (.evd-foot, built in js/header.js) */
.ev-foot { display: none; position: relative; z-index: 1; border-top: 1px solid var(--ev-line); background: #03070c; padding: 48px 0 32px; margin-top: 48px; }
.ev-cine .ev-foot { margin-top: 0; }
.ev-foot-in { max-width: 1320px; margin: 0 auto; padding: 0 var(--ev-gutter); }
@media (min-width: 1024px) { .ev-foot { display: block; } }
/* No footer under 1024 px, so the last block would sit flush on the tab bar: give the page an even gap above it */
@media (max-width: 1023px) { body:not(.ev-cine) > main { padding-bottom: 32px; } }
/* desktop footer: the standard card (teal-edged panel, tinted title strip, split line) holding four headed link columns */
.evf { box-shadow: var(--ev-sh-md); }
.evf-h { gap: 16px; }
.evf-h .ev-brand { min-height: 0; }
.evf-h .ev-brand-t { font: 700 15px var(--ev-head); letter-spacing: .24em; color: #e8f6ff; }
.evf-tag { font: 500 11px var(--ev-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ev-dim); }
.evf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 24px; }
.evf-col { display: grid; align-content: start; gap: 4px; }
.evf-ct { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--ev-line-soft); font: 500 11px var(--ev-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ev-cy-hi); }
.evf-col a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 8px; margin: 0 -8px; border-radius: var(--ev-r-sm); font: 500 14px var(--ev-head); color: var(--ev-mute); text-decoration: none; } /* spacing-ok: negative margin keeps the hover tint inside the column edge */
.evf-col a svg { flex: none; color: var(--ev-cy); opacity: .85; }
.evf-col a:hover { color: var(--ev-ink); background: rgba(94, 224, 232, .09); }
.evf-col a:focus-visible { outline: 2px solid var(--ev-cy-hi); outline-offset: 1px; }
.evf-f p { margin: 0; max-width: none; font-size: 12px; line-height: 1.5; color: var(--ev-dim); }
/* the same links at the foot of the phone/tablet menu */
.evd-foot { margin-top: 8px; padding: 8px 0 calc(var(--ev-sab) + 16px); border-top: 1px solid var(--ev-line); }
.evd-fh { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; font: 500 10px var(--ev-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ev-cy-hi); }
.evd .evd-fl { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 16px; font: 500 13px var(--ev-head); color: var(--ev-mute); text-decoration: none; }
.evd .evd-fl svg { flex: none; color: var(--ev-cy); opacity: .8; }
.evd .evd-fl:hover { color: var(--ev-ink); background: rgba(94, 224, 232, .09); }
.evd-fp { margin: 0; padding: 12px 16px 0; font-size: 11px; line-height: 1.5; color: var(--ev-dim); }
/* phones and tablets: pages fill the window between the top bar and the bottom bar (dvh: no jump when the browser bar hides) */
@media (max-width: 1023px) { html, body { min-height: 100dvh; } }

/* ============================== news posts (news page, account) ============================== */
.x-post { border-color: var(--ev-cy-lo); border-radius: var(--ev-r-md); outline-offset: -5px; background: var(--ev-panel); }
.x-tag { border-radius: var(--ev-r-pill); padding: 2px 8px; color: var(--ev-cy-hi); } /* spacing-ok: optical */
.x-meta { color: var(--ev-mute); }
.x-md { color: var(--ev-text); font-size: 14.5px; line-height: 1.65; }
@media (max-width: 1023px) { .evx-bar .evx-acct { margin-left: auto; } }
/* popover rows sit inside .ev-nav, whose link rules (caps, tracking, muted !important) must not leak into them */
.ev-nav .evx-pa { display: flex; width: 100%; min-height: 48px; padding: 8px 12px; text-transform: none; letter-spacing: 0; font: inherit; color: var(--ev-text) !important; gap: 12px; }
.ev-nav .evx-pa:hover { color: var(--ev-ink) !important; background: rgba(94, 224, 232, .1); }
.ev-nav .evx-pa::after { content: none !important; }
.ev-nav .evx-pa .evx-pt b { font: 600 14px var(--ev-head); letter-spacing: 0; text-transform: none; color: var(--ev-ink); }
.ev-nav .evx-pa .evx-pt small { font: 400 12px var(--ev-sans); letter-spacing: 0; text-transform: none; color: var(--ev-mute); }
.evx-acct .evx-pa { text-transform: none; letter-spacing: 0; }
@media (max-width: 1299px) { .evx-cta { display: none; } }

/* phones: the top bar keeps a gutter from the viewport edge on the right, like the page content (was 8px, the Sign in button looked clipped) */
@media (max-width: 1023px) { .evx-bar { padding-right: max(16px, env(safe-area-inset-right)); } }

/* top bar actions: ONE rule. Online chip, Get the launcher, Sign in, account button (and any icon button) are --ev-act-h (44px) tall,
   share --ev-act-r, sit --ev-act-gap (8px) apart and are vertically centred. Change them here, together. */
.evx-bar .evx-acct { gap: var(--ev-act-gap); align-items: center; }
.evx-acct > .evx-cta, .evx-acct > .evh-online, .evx-acct > .ev-acct, .evx-acct > .ev-iconbtn {
  box-sizing: border-box; height: var(--ev-act-h); min-height: var(--ev-act-h); border-radius: var(--ev-act-r); }
.evx-acct .evx-cta, .evx-acct .ev-acct.ev-out { padding: 0 16px; gap: 8px; font: 600 13px var(--ev-head); letter-spacing: .04em; }
.evx-acct .evx-cta { text-transform: none; }
.evx-acct > .evh-online { padding: 0 12px; gap: 8px; align-items: center; }
.evx-acct > .evh-me { padding: 0 8px; }
.evx-acct .evh-me .ev-av { width: 32px; height: 32px; }

/* ============================== owner's header design (restored 2026-10-20) ==============================
   Source: Resources/Design/Wildstar Account Panel.dc.html (public bar) and the pre-redesign header (git 77934ea^).
   Wide-tracked EVERVALE with the outline diamond, mono capital nav with a mint active underline, blue Sign in button,
   teal gradient bar. The grouped menus (mega menus) stay; only the look goes back. */
.evx-bar:not(.ev-clear), .ev-cine .evx-bar.is-solid { background: linear-gradient(180deg, rgba(10, 40, 54, .92), rgba(6, 22, 32, .82)); border-bottom: 1px solid rgba(94, 224, 232, .22); }
.evx-bar .ev-brand { gap: 12px; }
.evh-gem { display: block; width: 20px; height: 20px; margin: 0 4px; border: 1.5px solid #5ee0e8; transform: rotate(45deg); box-shadow: 0 0 14px rgba(94, 224, 232, .45); }
.evx-bar .ev-brand-t { font: 700 15px var(--ev-head); letter-spacing: .24em; color: #e8f6ff; }
.evx-nav { gap: 4px; margin-left: 24px; }
.evx-nav .evx-l, .evx-nav .evx-gb { gap: 8px; padding: 0 12px; border-radius: 0; color: #9fc0cb; font: 500 10.5px var(--ev-mono); letter-spacing: .16em; }
.evx-nav .evx-l:hover, .evx-nav .evx-gb:hover, .evx-nav .evx-gb[aria-expanded="true"] { background: rgba(255, 255, 255, .05); color: #e8f6ff; }
.evx-nav .evx-l.on, .evx-nav .evx-gb.on { color: #f2fffb; background: linear-gradient(180deg, rgba(14, 72, 80, .2), rgba(20, 96, 84, .85)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.evx-nav .evx-l.on::after, .evx-nav .evx-gb.on::after { left: 0; right: 0; bottom: 0; height: 2px; background: #7ef0c4; box-shadow: 0 0 12px #7ef0c4; }
.evx-acct .ev-acct.ev-out { border: 1px solid rgba(150, 225, 255, .6); background: linear-gradient(#4aa6d8, #1d5e93); box-shadow: 0 0 22px rgba(74, 166, 216, .35), inset 0 1px 0 rgba(255, 255, 255, .28); font: 700 13px var(--ev-head); color: #eaf8ff; }
.evx-acct .ev-acct.ev-out:hover { background: linear-gradient(180deg, #5fbce9, #2472ad); }
@media (max-width: 1179px) and (min-width: 1024px) { .evx-nav .evx-l, .evx-nav .evx-gb { letter-spacing: .1em; padding: 0 8px; } }

/* mega menus: sections sit side by side, one column each */
.evx-pop.evx-wide { display: grid; gap: 0 12px; min-width: 0; }
.evx-pop.evx-c2 { grid-template-columns: repeat(2, minmax(250px, 1fr)); width: 560px; }
.evx-pop.evx-c3 { grid-template-columns: repeat(3, minmax(240px, 1fr)); width: 800px; }
.evx-pop .evx-col + .evx-col { padding-left: 12px; border-left: 1px solid var(--ev-line-soft); }
.evx-g:last-of-type .evx-pop { left: auto; right: 0; }
@media (max-width: 1099px) { .evx-pop.evx-c3 { width: 560px; grid-template-columns: repeat(2, 1fr); } }
.evx-acct .ev-acct.ev-out, .evx-acct > .evh-online { white-space: nowrap; }
@media (max-width: 359px) { .evx-acct > .evh-online span { display: none; } .evx-acct > .evh-online { padding: 0 12px; } }
@media (max-width: 439px) { .evx-acct > .evh-online span { display: none; } } /* with the burger and the Online counter side by side, drop the word so the bar fits a 390 px phone */
/* page banner sits 24 below the top bar (the banner -> top bar gap); the account portrait fills its circle (zoomed on the head) */
.evx-acct .evh-me .ev-av { overflow: hidden; }
.evx-acct .evh-me .ev-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.45); transform-origin: 50% 38%; }
.ev-app .ev-pagehead:first-child { margin-top: var(--ev-s5, 24px); } /* legacy wrappers (.ar-wrap, .wrap, .m-wrap): same 24 under the top bar */