/* evision.css — shared by every dashboard page.
   Linked after each page's own <style>, so where the two overlap these win. */

/* iOS standalone: the rubber-band overscroll shows <html>, not <body>. */
html{background:#02342B}

/* ── Animated neon logo ────────────────────────────────────────────────
   Two images of identical size. The second sits exactly on the first and
   only its opacity moves, so the glow can never drift off the word. */
.ev-logo{position:relative;display:inline-block;line-height:0}
.ev-logo img{display:block;width:100%;max-width:100%;height:auto}
.ev-logo .ev-on{position:absolute;inset:0;opacity:0;
                animation:ev-neon 6s infinite}

@keyframes ev-neon{
   0%,  5%  {opacity:0}    6%      {opacity:1}
   7%, 11%  {opacity:0}   12%      {opacity:.9}
  13%       {opacity:.2}  14%,20%  {opacity:0}
  21%       {opacity:.85} 22%      {opacity:1}
  23%       {opacity:.3}  24%,33%  {opacity:0}
  34%       {opacity:1}   35%      {opacity:.15}
  36%       {opacity:.9}  37%,44%  {opacity:0}
  45%       {opacity:.95} 46%      {opacity:1}
  47%       {opacity:.4}  48%      {opacity:1}
  49%,50%   {opacity:0}   51%      {opacity:1}
  52%       {opacity:.25} 53%,55%  {opacity:0}
  56%       {opacity:.9}  57%,58%  {opacity:1}
  59%       {opacity:.5}  60%,62%  {opacity:0}
  63%       {opacity:1}   64%      {opacity:.3}
  65%       {opacity:1}   66%      {opacity:0}
  67%,100%  {opacity:1}
}

@media (prefers-reduced-motion: reduce){
  .ev-logo .ev-on{animation:none;opacity:1}
}

/* Sizes — by width only, and always from the logo's own container:
   width:100% / max-width:100% means it can never be wider than the box it
   sits in. The first version sized the header logo off the viewport (40vw),
   which the nav had no say in. */
.ev-logo--login{width:100%;max-width:260px;margin:0 auto 22px}
@media (max-width:480px){
  .ev-logo--login{max-width:60vw}
}

/* ── Dashboard header ─────────────────────────────────────────────────
   One row: logo, "Command Center" beside it, then the Live pill and links.

   The logo is sized from the HEADER HEIGHT, not from the viewport: the header
   is --ev-nav-h tall with --ev-nav-pad of breathing room above and below, the
   logo fills what is left, and its width follows from the artwork's own
   737 x 425 proportions. The header was 134 px tall on a desktop including its
   1 px bottom border, so the content box plus padding is 133 px and the
   header does not grow. */
body.ev-dash{--ev-nav-h:133px;--ev-nav-pad:11px}

body.ev-dash > nav{flex-wrap:nowrap;
  padding-top:calc(var(--ev-nav-pad) + env(safe-area-inset-top));
  padding-bottom:var(--ev-nav-pad)}
/* Overflow guards from the last change, kept: the brand link may shrink,
   the controls may not -- so a narrow screen takes width from the logo, never
   pushes "Sign out" off the edge or breaks a link onto two lines. */
body.ev-dash > nav > a.logo{min-width:0;flex:0 1 auto}
body.ev-dash > nav > .pill,
body.ev-dash > nav > .navlink{flex:none;white-space:nowrap}

.ev-brand{display:flex;flex-direction:row;align-items:center;
          gap:10px;line-height:1;min-width:0}
.ev-brand .ev-logo{flex:0 1 auto;min-width:0;max-width:100%;
  width:calc((var(--ev-nav-h) - 2 * var(--ev-nav-pad)) * 737 / 425)}

/* "Command Center" in the typography it had before the logo existed -- the
   original rule was `.wordmark small` in templates/dashboard.html. */
.ev-sub{font-family:var(--font-j);font-size:8px;font-weight:600;
        letter-spacing:.3em;color:rgba(255,255,255,.35);
        white-space:nowrap;flex:none}

/* Below 628 px "Command Center" no longer fits beside a FULL-height logo
   (192.5 x 111) and the controls -- measured in Chromium. Between 624 and 627
   it would still squeeze in, but only by shrinking the logo, which is not
   allowed. The logo alone carries the brand. */
@media (max-width:627px){
  .ev-sub{display:none}
}

/* ── Login / 2FA pages ─────────────────────────────────────────────── */
.ev-login{position:relative;z-index:2;width:100%;max-width:420px;
          display:flex;flex-direction:column;align-items:center}
/* The background orbs are positioned up to 100 px past the right edge. Clipping
   them on <body> relies on overflow propagating to the viewport, which iOS
   Safari does not always honour -- the page can still pan sideways. This box
   has exactly the body's size and clips on its own, so nothing past the edge
   ever reaches the document. The orbs keep the same containing box, stacking
   and scroll behaviour, so they draw exactly where they did. */
.ev-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* The logo makes the page taller than a short screen. These pages used
   overflow:hidden, which would cut the form off instead of scrolling. */
body.ev-card-page{overflow-x:hidden;overflow-y:auto}

/* ── Safe areas ────────────────────────────────────────────────────────
   status-bar-style black-translucent + viewport-fit=cover run the page under
   the notch and the home indicator. env() is 0 everywhere else, so desktop
   and Android layouts are unchanged. */
body.ev-card-page{padding:calc(24px + env(safe-area-inset-top)) 24px
                          calc(24px + env(safe-area-inset-bottom))}
/* Dashboard: the sticky nav takes the top inset itself, so it still covers
   the notch once the page scrolls. Padding the body instead would let the
   content slide under the status bar. */
body.ev-dash{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
body.ev-dash .toast{bottom:calc(18px + env(safe-area-inset-bottom))}
