/* =========================================================
   PREVAIL ALTERNATIVE ASSETS — login disclosure ("one login, two doors")
   The masthead "Investor login" control opens a small navy panel holding two
   destinations: the deal room and the investor portal. Linked on every page.

   No-JS safe: the toggle stays an <a href="/dealroom/"> and the panel stays
   hidden, so both doors remain reachable (the deal room links on to the
   portal). login-menu.js upgrades the anchor into a disclosure button.

   Self-hosted, CSP-safe (style-src 'self' 'unsafe-inline'). Tokens come from
   the page (home inline / legal.css). Reduced motion keeps the fade and drops
   the settle and the caret turn (movement only) — see PREVAILAA-ONRAMP §2.
   ========================================================= */
:root{ --ease-soft:cubic-bezier(.25,.1,.25,1); }

/* Toggle + panel share a positioning context so the panel hangs under the
   toggle on desktop. */
.nav-login-wrap{position:relative;display:inline-flex;align-items:center;}

/* Caret: a quiet state affordance. aria-expanded carries the real state to
   assistive tech; the caret turns on open. */
.nav-login .caret{display:inline-block;margin-left:.5em;font-size:.7em;line-height:1;transition:transform .35s var(--ease-soft);}
.nav-login[aria-expanded="true"] .caret{transform:rotate(180deg);}

/* The panel: a narrow navy card, brass hairline along the top edge, square
   corners. Hidden for no-JS; JS toggles [hidden] + .is-open. */
.login-panel{position:absolute;top:calc(100% + .55rem);right:0;z-index:60;
  width:300px;max-width:calc(100vw - 2*var(--gut,1.25rem));
  display:flex;flex-direction:column;
  background:var(--ink);border:1px solid var(--rule-ink);border-top:1px solid var(--brass);
  box-shadow:0 26px 60px -34px rgba(3,4,12,.85);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .35s var(--ease-soft),transform .35s var(--ease-soft);}
.login-panel.is-open{opacity:1;transform:none;pointer-events:auto;}
.login-panel[hidden]{display:none;}

/* Two doors: serif title with an arrow, small grey line beneath. Hover draws a
   brass underline under the title. */
.login-panel .lp-row{display:block;padding:1.05rem 1.2rem;color:var(--on-ink);text-decoration:none;
  border-top:1px solid var(--rule-ink);transition:background .3s var(--ease-soft);}
.login-panel .lp-row:first-child{border-top:0;}
.login-panel .lp-row:hover,.login-panel .lp-row:focus-visible{background:rgba(244,240,231,.05);outline:none;}
.login-panel .lp-title{display:flex;align-items:baseline;gap:.55em;font-family:var(--serif);font-weight:600;font-size:1.2rem;line-height:1.1;color:var(--on-ink);}
.login-panel .lp-titleline{position:relative;}
.login-panel .lp-titleline::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-soft);}
.login-panel .lp-row:hover .lp-titleline::after,.login-panel .lp-row:focus-visible .lp-titleline::after{transform:scaleX(1);}
.login-panel .lp-arrow{margin-left:auto;font-size:.8rem;color:var(--brass);transition:transform .4s var(--ease-soft);}
.login-panel .lp-row:hover .lp-arrow,.login-panel .lp-row:focus-visible .lp-arrow{transform:translateX(4px);}
.login-panel .lp-desc{margin-top:.35rem;font-size:.8125rem;line-height:1.45;color:var(--on-ink-3);}

/* Phones: a full-width sheet under the masthead. Dropping the wrapper's
   positioning hands the panel to the masthead as its containing block, so it
   spans the full width with no horizontal scroll. */
@media (max-width:480px){
  .nav-login-wrap{position:static;}
  .login-panel{top:100%;left:0;right:0;width:auto;max-width:none;border-left:0;border-right:0;}
}

/* Reduced motion removes MOVEMENT, not smoothing: keep the opacity fade, drop
   the 6px settle and the caret turn. Never transition:none (see the onramp). */
@media (prefers-reduced-motion:reduce){
  .login-panel,.login-panel.is-open{transform:none;}
  .nav-login[aria-expanded="true"] .caret{transform:none;}
}