/* =====================================================================
   fm-navtoggle.css — the old / new account layout switch
   ---------------------------------------------------------------------
   UNGATED and self-contained. This control renders on the legacy
   /account/index as well as the new /account/navigation, and on the
   legacy page fm-shell.css matches no markup and its design tokens are
   not in scope. So the values are literal here rather than var() —
   duplication is the price of the control looking identical on a page
   the shell does not style.

   Brand values per foremost-digital-standards.html:
     blue1 #0061fe · navy #121d3c · neon #ccff00 · button radius 60px
   ===================================================================== */

.fm-navtog{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:8px 8px 8px 18px;
  margin:0 0 18px;
  background:#fff;
  border:1px solid #e8effd;
  border-radius:60px;
  font-family:'Ambit','Open Sans','Helvetica Neue',Arial,sans-serif;
  vertical-align:middle;
  max-width:100%;
}
.fm-navtog__lab{
  font-size:12.5px;
  color:rgba(18,29,60,.6);
  white-space:nowrap;
}

/* Navy track, so the selected option reads as "on" in neon against it.
   Old sits left as the off position, New right as on. */
.fm-navtog__seg{
  display:inline-flex;
  background:#121d3c;
  border:2px solid #121d3c;
  border-radius:60px;
  overflow:hidden;
}
.fm-navtog__opt,
.fm-navtog__opt:visited{
  display:inline-block;
  padding:8px 20px;
  font-size:12.5px;
  line-height:1.2;
  color:rgba(255,255,255,.62);
  text-decoration:none;
  white-space:nowrap;
  transition:background 180ms ease, color 180ms ease;
}
.fm-navtog__opt:hover,
.fm-navtog__opt:focus{
  color:#fff;
  text-decoration:none;
}
.fm-navtog__opt.is-on,
.fm-navtog__opt.is-on:visited,
.fm-navtog__opt.is-on:hover,
.fm-navtog__opt.is-on:focus{
  background:#ccff00;
  color:#121d3c;
  font-weight:700;
  border-radius:60px;
}
.fm-navtog__opt:focus-visible{
  outline:2px solid #0061fe;
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .fm-navtog__opt{ transition:none }
}
@media (max-width:520px){
  .fm-navtog{ display:flex; width:100%; justify-content:space-between }
  .fm-navtog__opt{ padding:8px 14px }
}